:root {
      --bg-color: #fff;
      --text-color: #000;
      --grid-bg: #fffbe6;
      --planet-bg: #e3e3ff;
      --center-bg: #f0f0f0;
      --sign-label-bg: #fdfdfd;
      --header-bg: rgba(255, 255, 255, 0.95);
      --border-color: #e8e5ed;
      --hover-bg: #f6edfa;
      --shadow-color: rgba(54, 32, 102, 0.08);
      --accent-color: #663399;
      --box-border: #ccc;
    }

    [data-theme="dark"] {
      --bg-color: #000000;
      --text-color: #f0f0f0;
      --grid-bg: #000000;
      --planet-bg: #000000;
      --center-bg: #333;
      --sign-label-bg: #1e1e1e;
      --header-bg: rgba(17, 17, 17, 0.95);
      --border-color: #2d2d2d;
      --hover-bg: #262626;
      --shadow-color: rgba(0, 0, 0, 0.6);
      --accent-color: #9d7cbf;
      --box-border: #fff;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
      text-align: center;
      background-color: var(--bg-color);
      color: var(--text-color);
	  overflow-x: auto;
	  max-width: 100vw;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    header {
      background-color: var(--header-bg);
      border-bottom: 1px solid var(--border-color);
      box-shadow: 0 1px 3px var(--shadow-color);
      position: relative;
      z-index: 1000;
      backdrop-filter: blur(8px);
      padding: 0.25rem 2rem !important;
    }

    header .header-content {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    header .logo_link {
      transition: opacity 0.25s ease;
      display: flex;
      align-items: center;
    }

    header .logo_link:hover {
      opacity: 0.75;
    }

    header .nav-controls {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      flex-wrap: wrap;
    }

    header .avatar {
      width: 30px;
      height: 30px;
      background: linear-gradient(135deg, #663399 0%, #362066 100%);
      color: #fff;
      font-weight: 600;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      transition: all 0.25s ease;
      cursor: pointer;
      border: 2px solid transparent;
    }

    header .avatar:hover {
      transform: scale(1.05);
      border-color: var(--text-color);
      box-shadow: 0 4px 12px var(--shadow-color);
    }

    .planet#I, .planet#I-2, .planet#X, .planet#X-2 {
      color: red !important;
      background: var(--planet-bg) !important;
    }

    .planet-in-box.red-planet {
      color: red !important;
      background: transparent !important;
      border-color: #666;
    }

    .box .sign-image {
      position: absolute;
      top: 1px;
      left: 1px;
      width: 30px;
      height: 30px;
      opacity: 1;
      z-index: 1;
    }

    .roman-tag {
      position: absolute;
      top: 2px;
      right: 4px;
      font-size: 12px;
      font-weight: bold;
      color: red;
      pointer-events: none;
    }

    .hide-sign-images .sign-image {
      display: none !important;
    }

    .hide-house-numbers .roman-tag {
      display: none !important;
    }

    .chart-grid {
      display: grid;
      grid-template-columns: repeat(4, 100px);
      grid-template-rows: repeat(4, 100px);
      gap: 0px;
	  width: max-content;
	  max-width: 100%;
      margin: 0px;
      position: relative;
    }

    .charts-container {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      margin-top: 1rem;
      margin-left: 1rem;
      align-items: flex-start;
    }

    .chart-wrapper {
      display: block;
    }

    .chart-wrapper[data-chart="2"] {
      display: none;
    }

    .chart-wrapper[data-chart="2"].visible {
      display: block;
    }

    .box {
      border: 0.8px solid var(--box-border);
      background: var(--grid-bg);
      position: relative;
      overflow: hidden;
    }

    .planet-toolbar {
      margin-top: 0.8rem;
      margin-left: 0;
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-width: 400px;
    }

    .chart-grid .box:nth-child(6),
    .chart-grid .box:nth-child(7),
    .chart-grid .box:nth-child(11),
    .chart-grid .box:nth-child(10) {
      visibility: hidden;
      pointer-events: none;
    }

    .planet-toolbar div {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .planet-toolbar label {
      font-size: 12px;
    }

    .center {
      background-color: var(--center-bg);
    }

    .planet {
      display: inline-block;
      padding: 4px 6px;
      background: var(--planet-bg);
      border: 1px solid #666;
      border-radius: 4px;
      cursor: move;
      font-size: 13px;
    }

    .planet.inactive {
      opacity: 0.3 !important;
      pointer-events: none !important;
      cursor: not-allowed !important;
    }


    .planet-in-box {
      font-size: 12px;
      margin: 2px;
      cursor: grab;
      position: absolute;
      left: 5px;
      width: 90px;
    }

    .sign-label {
      position: absolute;
      width: 100px;
      text-align: center;
      font-weight: bold;
      font-size: 13px;
      background: var(--sign-label-bg);
    }

    .sign-label.top {
      top: -20px;
    }

    .sign-label.bottom {
      bottom: -20px;
    }

    .sign-label.left {
      left: -100px;
      transform: rotate(-90deg);
      transform-origin: left top;
    }

    .sign-label.right {
      right: -100px;
      transform: rotate(90deg);
      transform-origin: right top;
    }

   .toggle-theme {
      margin: 20px auto;
      display: inline-block;
      padding: 6px 12px;
      border: 1px solid #888;
      border-radius: 6px;
      background: var(--planet-bg);
      cursor: pointer;
      color: var(--text-color);
    }

    header .toggle-theme {
      margin: 0;
      padding: 0.3rem 0.7rem;
      font-size: 13px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-color);
      border-radius: 6px;
      transition: all 0.25s ease;
      font-weight: 500;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }

    header .toggle-theme:hover {
      background: var(--hover-bg);
      border-color: var(--border-color);
      box-shadow: 0 2px 4px var(--shadow-color);
    }

    header .toggle-theme:active {
      transform: scale(0.98);
    }

    header .toggle-theme:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    header .toggle-theme:focus:not(:focus-visible) {
      outline: none;
    }

    header .toggle-theme.active {
      background: var(--hover-bg);
      border-color: var(--border-color);
    }

    header select.toggle-theme {
      padding-right: 2rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      appearance: none;
      cursor: pointer;
      color: var(--text-color);
    }

    header select.toggle-theme:hover {
      background-color: var(--hover-bg);
    }

    header select.toggle-theme option {
      background: var(--bg-color);
      color: var(--text-color);
    }

    header a.toggle-theme {
      text-decoration: none;
    }

    header .divider {
      width: 1px;
      height: 20px;
      background: var(--border-color);
      margin: 0 0.15rem;
    }

    /* Responsive header for smaller screens */
    @media (max-width: 968px) {
      header {
        padding: 0.5rem 1rem !important;
      }

      header .header-content {
        gap: 1rem;
      }

      header .nav-controls {
        gap: 0.375rem;
      }

      header .toggle-theme {
        padding: 0.375rem 0.75rem;
        font-size: 13px;
      }

      header .toggle-theme span {
        margin-right: 3px !important;
      }

      header .divider {
        display: none;
      }

      header .avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
      }
    }

    @media (max-width: 640px) {
      header .toggle-theme span {
        display: none;
      }

      header select.toggle-theme option {
        font-size: 14px;
      }
    }

    /* Smooth transitions */
    * {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    button, select, a {
      transition: all 0.2s ease;
    }  

    .custom-tooltip {
      position: absolute;
      background: #444;
      color: white;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
      z-index: 999;
      pointer-events: none;
      top: -30px;
      left: 0;
      transform: translateX(-50%);
    }

    .custom-tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #444 transparent transparent transparent;
    }

    .planet-in-box {
      cursor: grab;
    }
	
	.planet-in-box, .planet {
	  user-select: none; /* Prevent text selection */
	  -webkit-user-select: none;
	  -ms-user-select: none;
	}
	
	.rva-chart-section {
	  width: fit-content;
	  max-width: 100%;
	  margin: 0 auto;
	}

	.rva-layout {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start; /* Align left */
	  margin-left: 40px;       /* Adjust based on chart's left edge */
	}

	.chatgpt-code-wrap {
	  background: #1e1e1e;
	  color: #f8f8f2;
	  font-family: Consolas, monospace;
	  border-radius: 8px;
	  overflow: hidden;
	  max-width: 720px;     /* Match width of chart */
	  width: 100%;
	  margin-top: 16px;
	  box-shadow: 0 0 0 1px #444;
	}

	.code-toolbar {
	  background: #2a2a2a;
	  padding: 6px 12px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.language-label {
	  background: #444;
	  color: #ccc;
	  font-size: 12px;
	  padding: 2px 8px;
	  border-radius: 4px;
	}

	.toolbar-actions {
	  display: flex;
	  gap: 8px;
	}

	.toolbar-btn,
	.copy-btn {
	  background: #3a3a3a;
	  border: none;
	  color: #eee;
	  font-size: 12px;
	  padding: 4px 8px;
	  border-radius: 4px;
	  cursor: pointer;
	}

	pre {
	  margin: 0;
	  padding: 12px;
	  overflow-x: auto;
	  text-align: left;
	}

	.code-output {
	  display: block;
	  white-space: pre-wrap;
	  word-break: break-word;
	}

  .input-field {
    height: 35px; /* uniform height */
    line-height: 1.2;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #555;
    background: #111;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    box-sizing: border-box;
  }

  #submit-button {
    background: #fff;
    color: #000;
    font-weight: bold;
    border: 1px solid #fff;
    height: 35px; /* same as input */
    padding: 0 16px;
  }


	#bigTooltip {
	  text-align: left;
	  max-width: 280px;
	  line-height: 1.6;
	  font-size: 13.5px;
	  padding: 12px 16px;
	  position: absolute;
	  max-width: 280px;
	  background: rgba(30, 30, 30, 0.97);
	  color: #fff;
	  font-size: 13px;
	  padding: 10px 14px;
	  border-radius: 8px;
	  z-index: 9999;
	  box-shadow: 0 0 8px #000;
	  pointer-events: none;
	  white-space: pre-line;
	  line-height: 1.5;
	  transform: none; /* We'll manage position with JS */
	}