 :root {
      --bg-color: #fff;
      --text-color: #000;
      --grid-bg: #fffbe6;
      --planet-bg: #e3e3ff;
      --center-bg: #f0f0f0;
      --sign-label-bg: #fdfdfd;
    }

    [data-theme="dark"] {
      --bg-color: #000000;
      --text-color: #f0f0f0;
      --grid-bg: #000000;
      --planet-bg: #000000;
      --center-bg: #333;
      --sign-label-bg: #1e1e1e;
    }

    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: var(--bg-color);
      color: var(--text-color);
	  overflow-x: auto;
	  max-width: 100vw;
    }

    .planet#I {
      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;
    }

    .chart-wrapper {
      margin-top: 1.5rem;
      margin-left: 2rem;
      display: block;
    }

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

    .planet-toolbar {
      margin-top: 1.4rem;
      margin-left: 0;
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .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: white;
    }  

    .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 */
	}

