:root {
      --bg: #090d16;
      --panel: #0e1520;
      --panel2: #0b1018;
      --line: #1d2e48;
      --accent: #3b8eff;
      --teal: #38d4b8;
      --text: #dde6f8;
      --mute: #8ca0c0;
      --hint: #5a7898;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      /* Subtle ambient noise for depth */
      background-image:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(59, 142, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 110%, rgba(56, 212, 184, 0.04) 0%, transparent 55%);
      background-attachment: fixed;
    }

    /* Push footer to the bottom when content is short */
    .site-footer {
      margin-top: auto !important;
    }

    /* Segmented Control for Layout Engine */
    .engine-selector-wrap {
      width: 100%;
      margin-bottom: 0.5rem;
    }

    .engine-selector-wrap input[type="checkbox"] {
      display: none;
    }

    .engine-selector {
      display: flex;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      background: var(--panel2);
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .engine-opt {
      flex: 1;
      padding: 0.8rem 0.5rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      transition: all 0.2s ease-in-out;
    }

    .engine-title {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text);
      transition: color 0.2s;
    }

    .engine-desc {
      font-size: 0.75rem;
      color: var(--hint);
    }

    .standard-opt {
      border-right: 1px solid var(--line);
    }

    /* DEFAULT: Standard is Active (Checkbox is unchecked) */
    .engine-selector-wrap input:not(:checked)+.engine-selector .standard-opt {
      background: rgba(59, 142, 255, 0.12);
    }

    .engine-selector-wrap input:not(:checked)+.engine-selector .standard-opt .engine-title {
      color: var(--accent);
    }

    .engine-selector-wrap input:not(:checked)+.engine-selector .freestyle-opt {
      opacity: 0.5;
    }

    /* FREESTYLE: Freestyle is Active (Checkbox is checked) */
    .engine-selector-wrap input:checked+.engine-selector .standard-opt {
      opacity: 0.5;
    }

    .engine-selector-wrap input:checked+.engine-selector .freestyle-opt {
      background: rgba(212, 56, 162, 0.12);
    }

    .engine-selector-wrap input:checked+.engine-selector .freestyle-opt .engine-title {
      color: #d438a2;
    }

    /* Permanent Engine Selector at top of controls panel */
    .engine-pinned {
      position: relative;
      z-index: 5;
      margin-bottom: 0.5rem;
    }

    .engine-pinned .sub-label {
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--hint);
      font-weight: 600;
      margin: 0 0 0.45rem 0;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .engine-pinned .sub-label::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 6px var(--accent);
    }

    /* ─── Header Action Buttons (AI + Saved Racks) ─── */
    .header-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .header-action-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(59, 142, 255, 0.08);
      border: 1px solid rgba(59, 142, 255, 0.25);
      border-radius: 9px;
      padding: 0.45rem 0.85rem;
      color: var(--text);
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .header-action-btn:hover {
      background: rgba(59, 142, 255, 0.16);
      border-color: rgba(59, 142, 255, 0.5);
    }

    .header-action-btn.saves-btn {
      background: rgba(56, 212, 184, 0.08);
      border-color: rgba(56, 212, 184, 0.25);
    }

    .header-action-btn.saves-btn:hover {
      background: rgba(56, 212, 184, 0.16);
      border-color: rgba(56, 212, 184, 0.5);
    }

    .header-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.9rem;
      min-width: 340px;
      max-width: 420px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
      z-index: 200;
      flex-direction: column;
      gap: 0.6rem;
    }

    .header-dropdown.open {
      display: flex;
    }

    .header-dropdown::before {
      content: '';
      position: absolute;
      top: -6px;
      right: 16px;
      width: 12px;
      height: 12px;
      background: var(--panel2);
      border-left: 1px solid var(--line);
      border-top: 1px solid var(--line);
      transform: rotate(45deg);
    }

    @media (max-width: 600px) {
      .header-actions {
        gap: 0.3rem;
      }

      .header-action-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.76rem;
      }

      .header-action-btn .btn-label-text {
        display: none;
      }

      .header-dropdown {
        min-width: 290px;
        right: -1rem;
      }
    }

    header.site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 64px;
      z-index: 1000;
      background: var(--bg);
      display: flex;
      align-items: center;
      padding: 0 1.25rem;
      border-bottom: 1px solid var(--line);
      box-sizing: border-box;
    }

    .nav {
      display: flex;
      gap: 1.5rem;
      font-size: 0.9rem;
      flex: 1;
      align-items: center;
    }

    .nav a {
      color: var(--mute);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav a:hover,
    .nav a[aria-current="page"] {
      color: var(--text);
    }

    .maker-wrap {
      max-width: 1400px;
      margin: 0 auto;
      padding: 1.25rem;
    }

    .maker-header {
      margin-top: 84px;
      margin-bottom: 0;
      padding-bottom: 1rem;
      border-bottom: 1px solid transparent;
      background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, rgba(59, 142, 255, 0.35) 0%, rgba(56, 212, 184, 0.2) 50%, transparent 100%);
      background-origin: border-box;
      background-clip: padding-box, border-box;
    }

    .header-content {
      display: flex;
      align-items: center;
      gap: 1.2rem;
    }

    .app-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, rgba(59, 142, 255, 0.15) 0%, rgba(56, 212, 184, 0.05) 100%);
      border: 1px solid rgba(59, 142, 255, 0.3);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      box-shadow: 0 4px 20px rgba(59, 142, 255, 0.1);
      flex-shrink: 0;
    }

    .app-icon svg {
      width: 28px;
      height: 28px;
    }

    .header-text {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .title-row {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .maker-header h1 {
      font-size: 1.65rem;
      margin: 0;
      font-weight: 700;
      background: linear-gradient(100deg, #fff 0%, #a5cfff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -0.02em;
    }

    .version-badge {
      background: rgba(56, 212, 184, 0.15);
      color: var(--teal);
      border: 1px solid rgba(56, 212, 184, 0.3);
      padding: 0.1rem 0.5rem;
      border-radius: 6px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    .maker-header .sub {
      margin: 0;
      font-size: 0.9rem;
      color: var(--mute);
    }

    .how-to {
      background: linear-gradient(135deg, rgba(59, 142, 255, 0.07) 0%, rgba(56, 212, 184, 0.03) 100%);
      border: 1px solid rgba(59, 142, 255, 0.18);
      border-left: 3px solid var(--accent);
      border-radius: 12px;
      padding: .8rem 1.1rem;
      font-size: .82rem;
      color: var(--mute);
      line-height: 1.6;
    }

    .how-to strong {
      color: #8ab8ee;
      font-weight: 600;
    }

    /* Settings wider, preview proportionally smaller */
    .maker-grid {
      display: grid;
      grid-template-columns: minmax(440px, 580px) minmax(0, 1fr);
      gap: 1.5rem;
      align-items: start;
    }

    @media (max-width:960px) {
      .maker-grid {
        display: flex;
        flex-direction: column-reverse;
      }
      .controls-panel {
        max-height: none !important;
        overflow-y: visible !important;
      }
      .canvas-panel {
        min-height: 45vh !important;
      }
    }

    /* Controls Panel */
    .controls-panel {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      max-height: calc(100vh - 100px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 6px;
      scroll-behavior: smooth;
    }

    .controls-panel::-webkit-scrollbar {
      width: 5px;
    }

    .controls-panel::-webkit-scrollbar-track {
      background: transparent;
    }

    .controls-panel::-webkit-scrollbar-thumb {
      background: rgba(59, 142, 255, 0.2);
      border-radius: 6px;
    }

    .controls-panel::-webkit-scrollbar-thumb:hover {
      background: rgba(59, 142, 255, 0.4);
    }

    .ai-box {
      background: linear-gradient(180deg, rgba(59, 142, 255, 0.08) 0%, rgba(14, 21, 32, 0) 100%);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: 1.2rem;
      flex-shrink: 0;
      box-shadow: 0 4px 20px rgba(59, 142, 255, 0.05);
    }

    details.setting-group {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color 0.25s, box-shadow 0.25s;
      flex-shrink: 0;
    }

    details.setting-group:hover {
      border-color: rgba(59, 142, 255, 0.35);
      box-shadow: 0 2px 16px rgba(59, 142, 255, 0.06);
    }

    details.setting-group[open] {
      border-color: rgba(59, 142, 255, 0.28);
      background: var(--panel2);
      box-shadow: 0 4px 24px rgba(59, 142, 255, 0.08);
    }

    summary.group-header {
      padding: 1rem 1.2rem;
      cursor: pointer;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
      -webkit-user-select: none;
      user-select: none;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--panel);
      letter-spacing: -0.01em;
    }

    summary.group-header::-webkit-details-marker {
      display: none;
    }

    /* Chevron — rotates smoothly on open */
    summary.group-header::after {
      content: "";
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--panel2);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%238ca0c0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s;
    }

    details[open]>summary.group-header::after {
      transform: rotate(180deg);
      border-color: rgba(59, 142, 255, 0.4);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%233b8eff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    details[open]>summary.group-header {
      border-bottom: 1px solid var(--line);
    }

    /* Smooth reveal animation for group content */
    .group-content {
      padding: 1.15rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 1.15rem;
      animation: group-reveal 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes group-reveal {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .sub-label {
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--hint);
      font-weight: 600;
      margin: 0 0 0.5rem 0;
    }

    /* Shape selector */
    .shape-btns {
      display: flex;
      gap: .4rem;
      flex-wrap: wrap;
    }

    .shape-btn {
      position: relative;
      flex: 1 1 20%;
      text-align: center;
      padding: .6rem .25rem;
      border-radius: 9px;
      cursor: pointer;
      background: var(--panel2);
      border: 1px solid var(--line);
      font-size: .84rem;
      color: var(--mute);
      -webkit-user-select: none;
      user-select: none;
      transition: all .15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .24rem;
      min-width: 64px;
    }

    .shape-btn input[type=radio] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .shape-btn .shape-icon {
      font-size: 1.3rem;
      line-height: 1;
    }

    .shape-btn:has(input:checked) {
      background: rgba(59, 142, 255, .15);
      color: var(--accent);
      border-color: rgba(59, 142, 255, .5);
      font-weight: 600;
    }

    /* Quality Buttons */
    .quality-btns {
      display: flex;
      gap: .4rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    .q-btn {
      position: relative;
      flex: 1 1 20%;
      text-align: center;
      padding: .45rem .15rem;
      border-radius: 7px;
      cursor: pointer;
      background: var(--panel2);
      border: 1px solid var(--line);
      font-size: .84rem;
      color: var(--mute);
      -webkit-user-select: none;
      user-select: none;
      transition: all .12s;
      min-width: 52px;
    }

    .q-btn input[type=radio] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .q-btn:has(input:checked) {
      background: rgba(59, 142, 255, .18);
      color: var(--accent);
      border-color: rgba(59, 142, 255, .5);
      font-weight: 600;
    }

    /* Toggle Switches */
    .toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .6rem;
    }

    .toggle-text-wrap {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      flex: 1;
      min-width: 0;
    }

    .toggle-row span {
      font-size: .88rem;
      color: var(--text);
      line-height: 1.2;
      word-wrap: break-word;
    }

    .mode-label {
      font-size: .74rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .toggle-sw {
      position: relative;
      display: inline-block;
      width: 38px;
      height: 22px;
      flex-shrink: 0;
    }

    .toggle-sw input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-sw .trk {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #182030;
      border: 1px solid #253a55;
      border-radius: 22px;
      transition: .18s;
    }

    .toggle-sw .trk::before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background: #3a4f6a;
      border-radius: 50%;
      transition: .18s;
    }

    .toggle-sw input:checked+.trk {
      background: rgba(56, 212, 184, .2);
      border-color: var(--teal);
    }

    .toggle-sw input:checked+.trk::before {
      transform: translateX(16px);
      background: var(--teal);
    }

    /* Inputs & Premium Sliders */
    .field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .field label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: .88rem;
      color: var(--text);
      flex-wrap: wrap;
    }

    .field label>span {
      display: none;
    }

    .field-row {
      display: flex;
      align-items: center;
      gap: .6rem;
      width: 100%;
    }

    /* Custom Webkit Slider */
    input[type=range] {
      flex: 1;
      min-width: 50px;
      background: transparent;
      height: 24px;
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-runnable-track {
      height: 6px;
      background: var(--line);
      border-radius: 3px;
      transition: background 0.2s ease;
    }

    input[type=range]:hover::-webkit-slider-runnable-track {
      background: #2a4060;
      /* Lightens the track on hover */
    }

    input[type=range]::-webkit-slider-thumb {
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: var(--accent);
      margin-top: -5px;
      box-shadow: 0 0 8px rgba(59, 142, 255, 0.4);
      transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s;
    }

    input[type=range]::-webkit-slider-thumb:hover {
      transform: scale(1.25);
      box-shadow: 0 0 12px rgba(59, 142, 255, 0.8);
    }

    /* Kill native spinner arrows everywhere — bad for touch, steal width from digits */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
      margin: 0;
    }

    input[type=number] {
      width: 64px;
      background: var(--panel);
      color: var(--text);
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: .35rem .4rem;
      text-align: center;
      font-size: .9rem;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
      font-variant-numeric: tabular-nums;
    }

    .field-row input[type=number] {
      font-size: 1rem;
      font-weight: 700;
      color: var(--accent);
    }

    input[type=number]:hover {
      border-color: #3a557a;
      background: #121b29;
    }

    input[type=number]:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(59, 142, 255, 0.2);
    }

    /* Touch-friendly stepper buttons — wraps any number input */
    .touch-stepper {
      display: inline-flex;
      align-items: stretch;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel);
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .touch-stepper:hover {
      border-color: #3a557a;
    }

    .touch-stepper:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(59, 142, 255, 0.2);
    }

    .touch-stepper input[type=number] {
      border: none;
      border-radius: 0;
      background: transparent;
      width: 60px;
      padding: 0.45rem 0.3rem;
      min-height: 38px;
      font-size: 1rem;
      font-weight: 700;
      color: var(--accent);
    }

    .touch-stepper input[type=number]:hover,
    .touch-stepper input[type=number]:focus {
      border: none;
      background: transparent;
      box-shadow: none;
    }

    .touch-stepper .step-btn {
      background: var(--panel2);
      border: none;
      color: var(--mute);
      width: 36px;
      min-height: 38px;
      cursor: pointer;
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1;
      -webkit-user-select: none;
      user-select: none;
      transition: background 0.12s, color 0.12s;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .touch-stepper .step-btn:hover {
      background: rgba(59, 142, 255, 0.15);
      color: var(--accent);
    }

    .touch-stepper .step-btn:active {
      background: rgba(59, 142, 255, 0.3);
      transform: scale(0.95);
    }

    .touch-stepper .step-down {
      border-right: 1px solid var(--line);
    }

    .touch-stepper .step-up {
      border-left: 1px solid var(--line);
    }

    /* Compact variant for row-group entries */
    .touch-stepper.compact input[type=number] {
      width: 48px;
      padding: 0.35rem 0.25rem;
      min-height: 34px;
      font-size: 0.95rem;
    }

    .touch-stepper.compact .step-btn {
      width: 30px;
      min-height: 34px;
      font-size: 1rem;
    }

    /* Wider variant for row-group diameter/depth (needs room for "100.0") */
    .touch-stepper.wide input[type=number] {
      width: 56px;
    }

    .hint-line {
      font-size: .76rem;
      color: var(--hint);
      margin: 0;
      line-height: 1.5;
    }

    /* Panel Header Hover State */
    summary.group-header {
      transition: background 0.2s ease, color 0.15s;
    }

    summary.group-header:hover {
      background: rgba(59, 142, 255, 0.05);
    }

    details[open]>summary.group-header:hover {
      background: rgba(59, 142, 255, 0.07);
    }

    /* Presets */
    .presets {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .chip {
      padding: .36rem .8rem;
      font-size: .80rem;
      border-radius: 20px;
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--mute);
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      font-weight: 500;
    }

    .chip:hover {
      border-color: rgba(59, 142, 255, 0.5);
      color: var(--accent);
      background: rgba(59, 142, 255, .08);
      transform: translateY(-1px);
    }

    /* Row Groups */
    .rg-list {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-bottom: .5rem;
    }

    .lw-head-name {
      width: 80px;
    }

    .lw-head-dim {
      width: 45px;
      text-align: center;
    }

    .lw-head-fill {
      flex: 1;
    }

    .lw-input {
      font-size: 0.75rem;
      padding: 0.2rem;
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 4px;
    }

    .lw-name-input {
      width: 80px;
    }

    .lw-dim-input {
      width: 45px;
      text-align: center;
    }

    .lw-input.is-disabled {
      opacity: 0.25;
    }

    .lw-del:disabled {
      opacity: 0.2;
    }

    .lw-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    .lw-check {
      margin: 0;
    }

    .lw-sep {
      opacity: 0.3;
    }

    .lw-oval-label.is-active {
      color: var(--accent);
      font-weight: 600;
    }

    /* Enhanced Row Group Cards */
    .rg-entry {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: rgba(59, 142, 255, 0.05); /* Lighter, tinted contrast */
  border: 1px solid rgba(59, 142, 255, 0.2); /* Enhanced border visibility */
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 0.8rem;
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
}

    .rg-entry:hover {
      border-color: rgba(59, 142, 255, 0.4);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .rg-entry-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 0.5rem;
      border-bottom: 1px dashed var(--line);
    }

    .rg-entry-title {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .rg-group-label {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text);
      outline: none;
      cursor: text;
      min-width: 60px;
      border-radius: 4px;
      padding: 1px 4px;
      transition: background 0.15s;
    }

    .rg-group-label:hover {
      background: rgba(59, 142, 255, 0.07);
      border-radius: 4px;
    }

    .rg-group-label:focus {
      background: rgba(59, 142, 255, 0.12);
      border-radius: 4px;
    }

    .rg-entry-controls {
      display: flex;
      gap: 0.8rem;
      flex-wrap: wrap;
      align-items: flex-end;
    }

    .rg-ctrl-group {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      flex: 1;
      min-width: 80px;
    }

    .rg-ctrl-group label {
      font-size: 0.72rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
      margin: 0;
    }

    .rg-ctrl-group .touch-stepper {
      width: 100%;
      justify-content: space-between;
    }

    .rg-ctrl-group .touch-stepper input {
      width: 100%;
      text-align: center;
    }

    .rg-vial-type {
      width: 100%;
    }

    .rg-x {
      color: var(--mute);
      white-space: nowrap;
      font-size: .8rem;
    }

    .rg-sep {
      color: var(--hint);
      font-size: .8rem;
    }

    .rg-vial-type {
      flex: 1 1 110px;
      min-width: 100px;
      background: var(--panel2);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0.4rem 0.5rem;
      font-size: 0.84rem;
      min-height: 34px;
    }

    .rg-preview-row {
      margin-top: 0.2rem;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
    }

    .is-hidden {
      display: none;
    }

    .rg-autosize {
      display: none;
      background: rgba(255,80,80,0.12);
      border: 1px solid rgba(255,80,80,0.5);
      color: #ff7878;
      border-radius: 6px;
      padding: 0.25rem 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      min-height: 30px;
      transition: all 0.12s;
      margin-top: 0.2rem;
    }

    .rg-irl-wrap {
      display: none;
      align-items: center;
      gap: 3px;
      font-size: 0.7rem;
      color: var(--teal);
      cursor: pointer;
      padding: 0 4px;
      border: 1px solid rgba(56,212,184,0.3);
      border-radius: 5px;
      background: rgba(56,212,184,0.05);
      min-height: 34px;
    }

    .rg-check {
      margin: 0;
    }

    .rg-remove {
      margin-left: auto;
      background: none;
      border: 1px solid transparent;
      color: var(--hint);
      cursor: pointer;
      font-size: 1.4rem;
      line-height: 1;
      padding: 0.2rem 0.55rem;
      border-radius: 6px;
      transition: all 0.12s;
      min-height: 34px;
    }

    .rg-remove:hover:not(:disabled) {
      color: #e05050;
      border-color: rgba(224, 80, 80, 0.3);
      background: rgba(224, 80, 80, 0.08);
    }

    .btn-add {
      width: 100%;
      background: none;
      border: 1px dashed rgba(59, 142, 255, 0.2);
      color: var(--hint);
      border-radius: 10px;
      padding: .65rem;
      font-size: .85rem;
      cursor: pointer;
      transition: all .18s;
      min-height: 40px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    .btn-add:hover {
      border-color: rgba(59, 142, 255, 0.55);
      color: var(--accent);
      background: rgba(59, 142, 255, 0.05);
      transform: translateY(-1px);
    }

    .drag-handle {
      cursor: grab;
      color: var(--hint);
      font-weight: bold;
      padding: 0.3rem 0.2rem;
      -webkit-user-select: none;
      user-select: none;
      font-size: 1rem;
      touch-action: none;
    }

    .drag-handle:active {
      cursor: grabbing;
    }

    /* AI Typing Anim */
    .ai-typing {
      display: none;
      justify-content: center;
      gap: 4px;
      margin-top: 0.8rem;
    }

    .ai-typing .dot {
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: ai-bounce 1.4s infinite ease-in-out both;
    }

    .ai-typing .dot:nth-child(1) {
      animation-delay: -0.32s;
    }

    .ai-typing .dot:nth-child(2) {
      animation-delay: -0.16s;
    }

    @keyframes ai-bounce {

      0%,
      80%,
      100% {
        transform: scale(0);
      }

      40% {
        transform: scale(1);
      }
    }

    /* Preview Column Wrapper */
    .preview-column {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-width: 0;
    }

    /* Shader Buttons */
    .shader-btn {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      padding: 0.2rem 0.4rem;
      font-size: 1.1rem;
      transition: all 0.2s;
      filter: grayscale(0.5);
      opacity: 0.6;
    }

    .shader-btn:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 0.1);
    }

    .shader-btn.active {
      filter: grayscale(0);
      opacity: 1;
      background: rgba(59, 142, 255, 0.2);
      border-color: var(--accent);
    }

    /* OVERRIDE EXTERNAL CSS LEAKS FOR OVERLAYS */
    .shader-controls,
    .plate-controls {
      display: inline-flex !important;
      width: max-content !important;
      flex: 0 0 auto !important;
    }

    .shader-controls>*,
    .plate-controls>* {
      flex: 0 0 auto !important;
    }

    #shaderColorPicker {
      width: 24px !important;
      height: 24px !important;
      flex-shrink: 0 !important;
    }

    #rulerBtn,
    #exitMeasureBtn,
    #cameraToggleBtn {
      flex: none !important;
    }

    .orbit-text {
      width: max-content !important;
      flex: none !important;
    }

    /* Canvas */
    .canvas-panel {
      background: radial-gradient(ellipse at 50% 40%, #0f1e35 0%, #080c14 65%);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      min-height: 600px;
      height: 100%;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
      display: block;
    }

    #previewCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* Stats Bar below Canvas */
    .canvas-footer {
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 0.85rem 1.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    }

    .dim-readout {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .dim-readout span {
      display: flex;
      flex-direction: column;
      gap: .1rem;
    }

    .dim-readout .dim-val {
      color: var(--text);
      font-size: 1rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .dim-readout .dim-lbl {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--hint);
    }

    .export-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      flex: 1;
      justify-content: flex-end;
    }

    button.primary {
      background: linear-gradient(135deg, #3b8eff 0%, #28c8b0 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: .6rem 1.2rem;
      cursor: pointer;
      font-weight: 600;
      font-size: .9rem;
      transition: opacity .15s;
      box-shadow: 0 2px 10px rgba(59, 142, 255, .2);
      white-space: nowrap;
    }

    button.primary:hover {
      opacity: .9;
    }

    button.primary:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    button.secondary {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: .6rem 1rem;
      cursor: pointer;
      font-size: .85rem;
      transition: all .14s;
      white-space: nowrap;
    }

    button.secondary:hover {
      border-color: var(--accent);
    }

    .ruler-inch {
      font-size: 0.75rem;
      opacity: 0.9;
    }

    /* Freeform Canvas overrides */
    /* #ffGridContainer div { background: var(--panel) !important; border-color: var(--line) !important; } */

    /* Freeform Canvas Controls */
    .ff-workspace {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      background: #06090f;
      padding: 1rem;
      border-radius: 8px;
      border: 1px inset var(--line);
      overflow-x: auto;
      touch-action: none;
      /* Prevents scrolling while drag-painting */
    }

    .ff-middle-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ff-btn-group {
      display: flex;
      gap: 4px;
    }

    .ff-btn-group.vertical {
      flex-direction: column;
    }

    .ff-cell-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.15;
      pointer-events: none;
    }

    .ff-cell-depth {
      opacity: 0.65;
      font-size: 0.6rem;
    }

    .edge-btn {
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--mute);
      border-radius: 4px;
      cursor: pointer;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      transition: all 0.1s;
      -webkit-user-select: none;
      user-select: none;
    }

    .edge-btn:hover {
      background: rgba(59, 142, 255, 0.2);
      color: var(--text);
      border-color: var(--accent);
    }

    .edge-btn:active {
      transform: scale(0.9);
    }

    /* Pop-out Editor Modal */
    #freeformEditor.fullscreen {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 95vw;
      max-width: 800px;
      max-height: 90vh;
      z-index: 9999;
      background: var(--panel);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: 1.5rem;
      /* A massive box-shadow acts as the dark overlay backdrop behind the modal */
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 0 100vmax rgba(9, 13, 22, 0.85);
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      overflow-y: auto;
    }

    #freeformEditor.fullscreen #ffGridContainer {
      max-height: 60vh;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1rem;
      background: var(--bg);
      overflow: auto;
    }

    /* ─── Account UI ───────────────────────────────────── */
    .account-area {
      margin-left: auto;
      position: relative;
    }

    .account-btn {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0.5rem 0.9rem;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.15s;
      min-height: 38px;
      white-space: nowrap;
    }

    .account-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .account-btn .acct-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .account-btn.logged-in {
      background: rgba(56, 212, 184, 0.08);
      border-color: rgba(56, 212, 184, 0.4);
      color: var(--teal);
    }

    .account-btn.logged-in:hover {
      background: rgba(56, 212, 184, 0.15);
    }

    .account-btn .acct-chevron {
      font-size: 0.65rem;
      opacity: 0.7;
    }

    .account-dropdown {
      position: absolute;
      top: calc(100% + 0.4rem);
      right: 0;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      min-width: 200px;
      padding: 0.4rem;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      display: none;
      flex-direction: column;
      gap: 0.15rem;
    }

    .account-dropdown.open {
      display: flex;
    }

    .account-dropdown .dd-header {
      padding: 0.55rem 0.7rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 0.25rem;
    }

    .account-dropdown .dd-header .dd-label {
      font-size: 0.7rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .account-dropdown .dd-header .dd-username {
      font-size: 0.95rem;
      color: var(--text);
      font-weight: 600;
      margin-top: 0.1rem;
      word-break: break-all;
    }

    .account-dropdown .dd-item {
      background: none;
      border: none;
      color: var(--text);
      padding: 0.55rem 0.7rem;
      border-radius: 6px;
      cursor: pointer;
      text-align: left;
      font-size: 0.88rem;
      transition: background 0.12s, color 0.12s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .account-dropdown .dd-item:hover {
      background: rgba(59, 142, 255, 0.1);
      color: var(--accent);
    }

    .account-dropdown .dd-item.danger:hover {
      background: rgba(224, 80, 80, 0.1);
      color: #ff7878;
    }

    /* ─── Auth Modal ───────────────────────────────────── */
    .auth-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(9, 13, 22, 0.85);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .auth-modal-backdrop.open {
      display: flex;
    }

    .auth-modal {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      width: 100%;
      max-width: 400px;
      padding: 1.5rem;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
      animation: auth-modal-in 0.18s ease-out;
    }

    @keyframes auth-modal-in {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .auth-modal h2 {
      margin: 0 0 1rem 0;
      font-size: 1.2rem;
      font-weight: 700;
      background: linear-gradient(100deg, #fff 0%, #a5cfff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .auth-tabs {
      display: flex;
      gap: 0.3rem;
      background: var(--panel2);
      padding: 0.3rem;
      border-radius: 9px;
      border: 1px solid var(--line);
      margin-bottom: 1.2rem;
    }

    .auth-tab {
      flex: 1;
      background: none;
      border: none;
      color: var(--mute);
      padding: 0.55rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.88rem;
      font-weight: 500;
      transition: background 0.15s, color 0.15s;
    }

    .auth-tab.active {
      background: rgba(59, 142, 255, 0.18);
      color: var(--accent);
      font-weight: 600;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 0.9rem;
    }

    .auth-field label {
      font-size: 0.78rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
    }

    .auth-field input {
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--text);
      padding: 0.7rem 0.85rem;
      font-size: 0.95rem;
      transition: border-color 0.15s, box-shadow 0.15s;
      min-height: 42px;
    }

    .auth-field input:hover {
      border-color: #3a557a;
    }

    .auth-field input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(59, 142, 255, 0.2);
    }

    .auth-hint {
      font-size: 0.76rem;
      color: var(--hint);
      margin: -0.3rem 0 0.9rem 0;
      line-height: 1.4;
    }

    .auth-error {
      background: rgba(224, 80, 80, 0.1);
      border: 1px solid rgba(224, 80, 80, 0.3);
      color: #ff8888;
      padding: 0.55rem 0.75rem;
      border-radius: 7px;
      font-size: 0.85rem;
      margin-bottom: 0.9rem;
      display: none;
    }

    .auth-error.show {
      display: block;
    }

    .auth-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.4rem;
    }

    .auth-actions button {
      flex: 1;
      min-height: 42px;
    }

    .auth-modal-close {
      position: absolute;
      top: 0.7rem;
      right: 0.8rem;
      background: none;
      border: none;
      color: var(--mute);
      cursor: pointer;
      font-size: 1.4rem;
      line-height: 1;
      padding: 0.3rem 0.5rem;
      border-radius: 6px;
      transition: background 0.12s, color 0.12s;
    }

    .auth-modal-close:hover {
      background: var(--panel2);
      color: var(--text);
    }

    .auth-modal {
      position: relative;
    }

    /* Light Mode Overrides */
    body.light-mode {
      --bg: #f0f4f8;
      --panel: #ffffff;
      --panel2: #e8eef5;
      --line: #c0cce0;
      --accent: #2563eb;
      --teal: #059669;
      --text: #1e293b;
      --mute: #64748b;
      --hint: #94a3b8;
    }

    /* 1. Keep Top Nav Banner Dark */
    body.light-mode .site-header {
      background: #090d16;
      border-bottom: 1px solid #1d2e48;
    }

    body.light-mode .nav a {
      color: #8ca0c0;
    }

    body.light-mode .nav a:hover,
    body.light-mode .nav a[aria-current="page"] {
      color: #dde6f8;
    }

    body.light-mode .account-btn {
      background: #0e1520;
      color: #dde6f8;
      border-color: #1d2e48;
    }

    /* 2. Fix Title Text Visibility */
    body.light-mode .maker-header h1 {
      background: linear-gradient(100deg, #1e293b 0%, #3b8eff 100%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    /* 3. Fix Section Hover Highlight */
    body.light-mode summary.group-header:hover {
      background: #dce4ef;
    }

    /* 4. Fix 3D Preview Canvas Background */
    body.light-mode .canvas-panel {
      background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #cbd5e1 65%);
    }

    /* 5. Fix Overlay Controls (View & Tools dropdown + measure states) */
    body.light-mode #viewToolsBtn,
    body.light-mode #viewToolsPanel,
    body.light-mode #cameraToggleBtn,
    body.light-mode #rulerBtn,
    body.light-mode #exitMeasureBtn {
      background: rgba(255, 255, 255, 0.9) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    body.light-mode .shader-btn:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    body.light-mode .plate-btn[data-plate="off"] {
      color: var(--mute) !important;
    }

    body.light-mode #exitMeasureBtn {
      background: rgba(224, 80, 80, 0.15) !important;
      color: #e05050 !important;
    }

    body.light-mode #plateSizeMenu {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: var(--line) !important;
    }

    body.light-mode .plate-size-opt {
      color: var(--text) !important;
    }

    body.light-mode .plate-size-opt:hover {
      background: rgba(37, 99, 235, 0.1) !important;
      color: var(--accent) !important;
    }

    /* 6. Fix Freeform Grid Workspace */
    body.light-mode .ff-workspace {
      background: #f8fafc;
      border-color: var(--line);
    }

    body.light-mode .edge-btn {
      background: #ffffff;
      border-color: var(--line);
      color: var(--text);
    }

    body.light-mode .edge-btn:hover {
      background: rgba(37, 99, 235, 0.1);
      border-color: var(--accent);
    }

    body.light-mode #ffGridContainer div {
      border-color: rgba(0, 0, 0, 0.1) !important;
      background-color: #ffffff !important;
      color: #a32a7e !important;
    }

    body.light-mode #ffGridContainer div[style*="rgba(212, 56, 162"] {
      background-color: rgba(212, 56, 162, 0.18) !important;
      border-color: rgba(212, 56, 162, 0.6) !important;
      color: #8c1c68 !important;
    }

    /* 7. Fix Saved Racks Hover & Orbit Text */
    body.light-mode .save-slot {
      background: var(--panel);
      border-color: var(--line);
    }

    body.light-mode .save-slot:hover {
      background: #dce4ef;
      border-color: var(--accent);
    }

    body.light-mode .orbit-text {
      color: #334155 !important;
      opacity: 0.85 !important;
    }

    /* Theme Switch UI */
    .theme-switch {
      position: relative;
      display: inline-block;
      width: 54px;
      height: 28px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .theme-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .theme-slider-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--panel);
      border: 1px solid var(--line);
      border-radius: 30px;
      transition: .3s;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .theme-icon-sun,
    .theme-icon-moon {
      font-size: 13px;
      z-index: 1;
      pointer-events: none;
    }

    .theme-knob {
      position: absolute;
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background-color: var(--text);
      border-radius: 50%;
      transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      z-index: 2;
    }

    .theme-switch input:checked+.theme-slider-bg {
      background-color: var(--accent);
      border-color: var(--accent);
    }

    .theme-switch input:checked+.theme-slider-bg .theme-knob {
      transform: translateX(26px);
      background-color: #fff;
    }

    /* ─── Section icon chips next to group header labels ─── */
    .section-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      font-size: 0.85rem;
      margin-right: 0.6rem;
      flex-shrink: 0;
      background: rgba(59, 142, 255, 0.1);
      border: 1px solid rgba(59, 142, 255, 0.2);
    }

    .section-num {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      flex: 1;
    }

    /* Dim readout stat items */
    .dim-readout span {
      position: relative;
    }

    .dim-readout span:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -0.75rem;
      top: 15%;
      height: 70%;
      width: 1px;
      background: var(--line);
    }

  /* ─── Saved Racks UI styles ─────────────────────────────── */
    /* Save slot styling */
    .save-slot {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 0.55rem 0.7rem;
      transition: border-color 0.12s, background 0.12s;
    }

    .save-slot:hover {
      border-color: rgba(59, 142, 255, 0.4);
      background: #131c2a;
    }

    .save-slot .slot-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .save-slot .slot-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .save-slot .slot-meta {
      font-size: 0.72rem;
      color: var(--hint);
    }

    .save-slot .slot-actions {
      display: flex;
      gap: 0.3rem;
      flex-shrink: 0;
    }

    .slot-btn {
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--mute);
      border-radius: 6px;
      padding: 0.35rem 0.55rem;
      cursor: pointer;
      font-size: 0.78rem;
      transition: all 0.12s;
      white-space: nowrap;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .slot-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .slot-btn.danger:hover {
      border-color: #e05050;
      color: #ff7878;
    }

    .slot-btn:disabled {
      opacity: 0.5;
      cursor: wait;
    }

    .saves-status-info {
      background: rgba(56, 212, 184, 0.1);
      border: 1px solid rgba(56, 212, 184, 0.3);
      color: var(--teal);
    }

    .saves-status-error {
      background: rgba(224, 80, 80, 0.1);
      border: 1px solid rgba(224, 80, 80, 0.3);
      color: #ff8888;
    }
/* ─── Phase Carousel ───────────────────────────────────── */
.phase-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.6rem 0 0.4rem 0;
  padding: 0.4rem 0.2rem;
}

.phase-arrow {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
}

.phase-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}

.phase-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.phase-title {
  flex: 1;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.phase-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}

.phase-dot:hover {
  background: var(--hint);
  transform: scale(1.2);
}

.phase-dot.active {
  background: var(--accent);
  transform: scale(1.25);
}

.phase-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.phase-track {
  position: relative;
  width: 100%;
  min-height: 200px;
}

/* Each phase is absolutely stacked; the active one is the one rendered.
   Inactive phases are hidden but kept in the DOM so their inputs stay live. */
.phase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(40px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;
}

.phase.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  position: relative;   /* takes height in the layout */
  pointer-events: auto;
}

/* When sliding OUT to the left (going to next phase) */
.phase.is-leaving-left {
  opacity: 0;
  transform: translateX(-40px);
}

/* When sliding OUT to the right (going to previous phase) */
.phase.is-leaving-right {
  opacity: 0;
  transform: translateX(40px);
}

/* Incoming from the right (right arrow clicked) — already the default offset */
/* Incoming from the left (left arrow clicked) — flip the offset */
.phase.is-incoming-left {
  transform: translateX(-40px);
}

/* ─── Phase Header (sticky nav + dots) ─────────────────── */
.phase-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  /* Soft gradient fade at the bottom so scrolling content doesn't visibly
     touch the nav strip */
  padding-bottom: 0.2rem;
  margin-bottom: 0.4rem;
  box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.6);
}

/* The phase-nav and phase-dots already exist; reset their old margins
   since the sticky wrapper now controls spacing */
.phase-header .phase-nav {
  margin: 0.4rem 0 0.3rem 0;
}

.phase-header .phase-dots {
  margin-bottom: 0;
}

/* Scrollable phase viewport: gives the phase content a vertical scroll
   when it would otherwise be clipped. The exact height is computed so the
   bottom of the viewport sits just above the page footer. */
.phase-viewport {
  /* Subtract: header (~260px to top of carousel) + nav strip + footer */
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.3rem;   /* breathing room next to the scrollbar */
}

.phase-viewport::-webkit-scrollbar {
  width: 8px;
}

.phase-viewport::-webkit-scrollbar-track {
  background: transparent;
}

.phase-viewport::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
  transition: background 0.18s;
}

.phase-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--hint);
}

/* ─── Feature Card Groupings ───────────────────────────── */
.feature-card {
  background: linear-gradient(180deg,
    rgba(59, 142, 255, 0.025) 0%,
    rgba(14, 21, 32, 0.4) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 0.95rem 0.8rem 0.95rem;
  margin-bottom: 0.9rem;
  transition: border-color 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}

/* Subtle accent stripe along the top of each card */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(59, 142, 255, 0.4) 30%,
    rgba(56, 212, 184, 0.4) 70%,
    transparent 100%);
  opacity: 0.7;
}

.feature-card:hover {
  border-color: rgba(59, 142, 255, 0.35);
}

/* Each card cycles through the 3 accent tints — first child = blue,
   second = teal, third = pink. The :nth-child() lets us color them
   in order without extra classes. */
.feature-card:nth-of-type(1)::before {
  background: linear-gradient(90deg, transparent 0%, rgba(59, 142, 255, 0.55) 50%, transparent 100%);
}
.feature-card:nth-of-type(2)::before {
  background: linear-gradient(90deg, transparent 0%, rgba(56, 212, 184, 0.55) 50%, transparent 100%);
}
.feature-card:nth-of-type(3)::before {
  background: linear-gradient(90deg, transparent 0%, rgba(212, 56, 162, 0.55) 50%, transparent 100%);
}

.feature-card-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(29, 46, 72, 0.6);
}

.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.95rem;
  background: rgba(59, 142, 255, 0.12);
  border: 1px solid rgba(59, 142, 255, 0.25);
  flex-shrink: 0;
}

.feature-card:nth-of-type(2) .feature-card-icon {
  background: rgba(56, 212, 184, 0.12);
  border-color: rgba(56, 212, 184, 0.28);
}

.feature-card:nth-of-type(3) .feature-card-icon {
  background: rgba(212, 56, 162, 0.12);
  border-color: rgba(212, 56, 162, 0.28);
}

.feature-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.92;
}

/* Tighten toggle rows inside a card, since the card itself provides spacing */
.feature-card .toggle-row {
  padding: 0.45rem 0;
}

.feature-card .toggle-row + .toggle-row {
  border-top: 1px solid rgba(29, 46, 72, 0.5);
}

/* When a sub-options panel (e.g. #titleOpts, #lidOpts) is expanded inside
   a card, give it a touch more breathing room. */
.feature-card > [id$="Opts"] {
  margin-bottom: 0.5rem;
}

/* ─── Wall Cutout Selector ─────────────────────────────── */
/* Visual top-down layout: Back on top, Left|Rack|Right in center, Front at bottom */
.cutout-wall-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
}

.cutout-wall-center {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cutout-rack-icon {
  width: 44px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 142, 255, 0.08);
  border: 1px dashed rgba(59, 142, 255, 0.3);
  border-radius: 6px;
  font-size: 1rem;
  color: var(--hint);
  opacity: 0.7;
  flex-shrink: 0;
}

.cutout-wall-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  min-width: 68px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--mute);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.cutout-wall-btn input[type="checkbox"] {
  display: none;
}

.cutout-wall-btn:has(input:checked) {
  background: rgba(59, 142, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 8px rgba(59, 142, 255, 0.15);
}

.cutout-wall-btn:hover {
  border-color: rgba(59, 142, 255, 0.5);
}

.cutout-all-toggle {
  background: rgba(255, 179, 230, 0.05);
  border: 1px solid rgba(255, 179, 230, 0.15);
  border-radius: 8px;
  padding: 0.35rem 0.7rem !important;
}

/* Edge shape disclosure */
.cutout-edge-details {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(14, 21, 32, 0.4);
}

.cutout-edge-summary {
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hint);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s;
}

.cutout-edge-summary:hover {
  color: var(--text);
}

.cutout-edge-summary::before {
  content: '▸';
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.cutout-edge-details[open] > .cutout-edge-summary::before {
  transform: rotate(90deg);
}

/* Remove default marker */
.cutout-edge-summary::-webkit-details-marker {
  display: none;
}

.cutout-edge-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem 0.8rem 0.8rem;
  border-top: 1px solid var(--line);
}

.cutout-edge-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cutout-edge-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.85;
  margin-bottom: 0.1rem;
}

/* Generated from former inline style attributes to keep HTML validation clean. */
.vr-inline-001 { text-decoration:none; gap:0.35rem; }
.vr-inline-002 { font-size:1rem; }
.vr-inline-003 { width: 100%; display: flex; justify-content: space-between; }
.vr-inline-004 { display: flex; align-items: center; gap: 1.2rem; }
.vr-inline-005 { display: flex; align-items: center; gap: 0.8rem; }
.vr-inline-006 { display: flex; align-items: center; gap: 0.7rem; }
.vr-inline-007 { position:relative; }
.vr-inline-008 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--hint); margin-bottom:0.2rem; }
.vr-inline-009 { width: 100%; min-height: 70px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem; color: var(--text); font-size: 0.9rem; resize: vertical; box-sizing: border-box; }
.vr-inline-010 { width: 100%; }
.vr-inline-011 { font-size: 0.8rem; color: var(--mute); text-align: center; display: none; }
.vr-inline-012 { margin-top: 0.3rem; background: rgba(9, 13, 22, 0.4); }
.vr-inline-013 { font-size: 0.82rem; padding: 0.5rem 0.8rem; color: var(--hint); }
.vr-inline-014 { padding: 0.6rem 0.8rem; }
.vr-inline-015 { display: flex; gap: 0.5rem; }
.vr-inline-016 { flex: 1; border-color: #d438a2; color: #d438a2; }
.vr-inline-017 { flex: 1; }
.vr-inline-018 { font-size: 0.75rem; color: var(--hint); text-align: center; margin-top: 0.3rem; }
.vr-inline-019 { flex-shrink:0; }
.vr-inline-020 { text-align:center; padding: 0.3rem 0; }
.vr-inline-021 { color: var(--mute); font-size: 0.84rem; margin: 0 0 0.6rem 0; line-height:1.5; }
.vr-inline-022 { width:100%; }
.vr-inline-023 { display:none; }
.vr-inline-024 { display:flex; gap:0.5rem; margin-bottom:0.6rem; }
.vr-inline-025 { flex:1; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.85rem; min-height: 36px; }
.vr-inline-026 { white-space:nowrap; }
.vr-inline-027 { display:none; font-size: 0.82rem; padding: 0.4rem 0.6rem; border-radius: 7px; margin-bottom: 0.5rem; line-height: 1.4; }
.vr-inline-028 { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.3rem; }
.vr-inline-029 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--hint); }
.vr-inline-030 { background:none; border:none; color: var(--hint); cursor:pointer; font-size: 0.76rem; padding: 0.15rem 0.3rem; border-radius: 5px; }
.vr-inline-031 { display:flex; flex-direction:column; gap:0.3rem; max-height: 200px; overflow-y: auto; padding-right: 4px; }
.vr-inline-032 { display:none; text-align:center; padding: 0.6rem 0; font-size: 0.82rem; }
.vr-inline-033 { margin-bottom: 0; }
.vr-inline-034 { display: none; }
.vr-inline-035 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.vr-inline-036 { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.vr-inline-037 { padding: 0.2rem 0.6rem; font-size: 0.76rem; }
.vr-inline-038 { display: flex; flex-direction: column; gap: 0.8rem; background: rgba(212, 56, 162, 0.08); padding: 1rem; border-radius: 10px; border: 1px solid rgba(212, 56, 162, 0.35); margin-bottom: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.vr-inline-039 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.vr-inline-040 { display: flex; flex-direction: column; gap: 0.15rem; }
.vr-inline-041 { font-size: 0.95rem; font-weight: 700; color: #d438a2; letter-spacing: 0.01em; }
.vr-inline-042 { font-size: 0.78rem; color: var(--hint); }
.vr-inline-043 { display: flex; gap: 0.6rem; align-items: center; }
.vr-inline-044 { color: #d438a2; }
.vr-inline-045 { font-size: 1.2rem; color: #d438a2; font-weight: bold; width: 22px; text-align: center; }
.vr-inline-046 { height: 1px; background: rgba(212, 56, 162, 0.2); width: 100%; }
.vr-inline-047 { margin-bottom: 0.8rem; }
.vr-inline-048 { color:var(--teal); }
.vr-inline-049 { color:#e05050; }
.vr-inline-050 { display: grid; gap: 4px; }
.vr-inline-051 { display:flex; gap:0.5rem; margin-top: 0.5rem; }
.vr-inline-052 { flex:1; border: 1px solid var(--accent); }
.vr-inline-053 { flex:0.5; }
.vr-inline-054 { background: rgba(59, 142, 255, 0.04); border: 1px solid rgba(59, 142, 255, 0.2); border-radius: 12px; padding: 1.2rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 1.2rem; box-shadow: inset 0 2px 10px rgba(0,0,0,0.1); }
.vr-inline-055 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: -0.5rem; }
.vr-inline-056 { font-size: 1.2rem; color: var(--accent); }
.vr-inline-057 { font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.vr-inline-058 { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; }
.vr-inline-059 { font-size: 0.9rem; font-weight: 600; }
.vr-inline-060 { font-size: 0.78rem; color: var(--hint); font-weight: normal; text-transform: none; }
.vr-inline-061 { height: 1px; background: linear-gradient(90deg, rgba(59,142,255,0.3) 0%, transparent 100%); width: 100%; }
.vr-inline-062 { margin-bottom:0.2rem; font-size: 0.9rem; font-weight: 600; }
.vr-inline-063 { margin-top:0; margin-bottom:0.8rem; }
.vr-inline-064 { margin-top: 1rem; border-color: rgba(56, 212, 184, 0.3); }
.vr-inline-065 { font-size: 0.85rem; padding: 0.6rem 1rem; color: var(--teal); }
.vr-inline-066 { padding: 0.8rem 1rem; }
.vr-inline-067 { margin-bottom: 0.5rem; }
.vr-inline-068 { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.vr-inline-069 { display:none; }
.vr-inline-070 { display:none; flex-direction:column; gap:0.6rem; margin-top: 0.8rem; padding: 0.8rem; background: rgba(59,142,255,0.05); border: 1px solid rgba(59,142,255,0.2); border-radius: 8px; }
.vr-inline-071 { color:var(--accent); margin-bottom:0.2rem; }
.vr-inline-072 { border-top: 1px solid var(--line); margin: 0.8rem 0; }
.vr-inline-073 { display:none;color:#e09040; }
.vr-inline-074 { margin:0; }
.vr-inline-075 { display:none; flex-direction:column; gap:0.8rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }
.vr-inline-076 { margin-bottom:0.4rem; }
.vr-inline-077 { margin-bottom:0; }
.vr-inline-078 { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }
.vr-inline-079 { font-size:0.82rem; color:#ffb3e6; font-weight: 500; }
.vr-inline-080 { margin-bottom:0.3rem; }
.vr-inline-081 { display:none; flex-direction:column; gap:0.4rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }
.vr-inline-082 { margin-bottom:0.2rem; font-size: 0.85rem; color: var(--text); }
.vr-inline-083 { flex: 1 1 45%; }
.vr-inline-084 { display:none; flex-direction:column; gap:0.6rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }
.vr-inline-085 { font-size: 0.85rem; color: var(--text); margin-bottom: 0.3rem; }
.vr-inline-086 { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.9rem; box-sizing: border-box; }
.vr-inline-087 { margin-top:0.2rem; }
.vr-inline-088 { font-size:0.86rem; color:var(--text); }
.vr-inline-089 { font-size: 0.76rem; color: var(--hint); }
.vr-inline-090 { display:none; gap: 0.3rem; margin-top: 0.3rem; flex-direction: column; }
.vr-inline-091 { padding-left: 1rem; }
.vr-inline-092 { font-size:0.82rem; color:var(--hint); }
.vr-inline-093 { font-size:0.76rem; color:var(--hint); }
.vr-inline-094 { margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.vr-inline-095 { margin-top: 0.2rem; }
.vr-inline-096 { position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 10; background: linear-gradient(135deg, #38d4b8 0%, #2ba891 100%); color: #fff; border: none; box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 2px 8px rgba(56, 212, 184, 0.25); }
.vr-inline-097 { position:absolute; top:1rem; right:1.2rem; z-index:11; }
.vr-inline-098 { background:rgba(9,13,22,0.85); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:0.45rem 0.7rem; font-size:0.82rem; cursor:pointer; display:flex; align-items:center; gap:0.4rem; transition: border-color 0.15s, color 0.15s; }
#viewToolsBtn:hover { border-color:var(--accent); }
.vr-inline-099 { font-size:0.62rem; opacity:0.7; transition: transform 0.15s; }
.vr-inline-100 { display:none; position:absolute; top:calc(100% + 6px); right:0; background:rgba(9,13,22,0.96); border:1px solid var(--line); border-radius:10px; padding:0.7rem; min-width:240px; max-width:calc(100vw - 2rem); box-shadow:0 8px 24px rgba(0,0,0,0.55); flex-direction:column; gap:0.7rem; }
.vr-inline-101 { font-size:0.66rem; color:var(--hint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.35rem; }
.vr-inline-102 { display:inline-flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
.vr-inline-103 { width: 1px; height: 20px; background: var(--line); margin: 0 0.2rem; }
.vr-inline-104 { cursor:pointer; width:24px; height:24px; padding:0; border:none; border-radius:4px; background:transparent; }
.vr-inline-105 { display:inline-flex; gap:0.4rem; align-items:center; }
.vr-inline-106 { background: transparent; border: 1px solid transparent; border-radius:6px; cursor:pointer; padding:0.2rem 0.5rem; font-size:0.78rem; color:var(--mute); transition: all 0.2s; }
.vr-inline-107 { background: rgba(59,142,255,0.2); border: 1px solid var(--accent); border-radius:6px; cursor:pointer; padding:0.2rem 0.5rem; font-size:0.78rem; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:0.3rem; }
.vr-inline-108 { font-size:0.7rem; opacity:0.85; }
.vr-inline-109 { font-size:0.6rem; opacity:0.7; }
.vr-inline-110 { display:none; position:absolute; top:calc(100% + 4px); right:0; background:rgba(9,13,22,0.96); border:1px solid var(--line); border-radius:8px; padding:0.3rem; min-width:130px; box-shadow:0 4px 14px rgba(0,0,0,0.5); z-index: 12; }
.vr-inline-111 { display:block; width:100%; text-align:left; background:transparent; border:none; color:var(--text); padding:0.4rem 0.6rem; border-radius:5px; cursor:pointer; font-size:0.78rem; }
.vr-inline-112 { width:100%; background:rgba(9,13,22,0.6); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:0.35rem 0.6rem; font-size:0.82rem; cursor:pointer; line-height:1; transition:all 0.15s; text-align:left; }
#cameraToggleBtn:hover { border-color:var(--accent); color:var(--accent); }
.vr-inline-113 { width:100%; padding: 0.4rem 0.7rem; font-size: 0.82rem; text-align:left; }
.vr-inline-114 { width:100%; background:rgba(224,80,80,0.85); color:#fff; border-color:#e05050; padding: 0.4rem 0.7rem; font-size: 0.82rem; display:none; text-align:left; }
.vr-inline-115 { position:absolute; bottom:164px; right:1.2rem; font-size:0.7rem; color:var(--mute); pointer-events:none; opacity:0.7; max-width:110px; text-align:right; line-height:1.3; }
.vr-inline-116 { position:absolute; display:none; background:var(--accent); color:#fff; padding:5px 10px; border-radius:5px; font-size:0.85rem; pointer-events:none; font-weight:bold; z-index:10; transform: translate(-50%, -50%); box-shadow: 0 3px 10px rgba(0,0,0,0.5); }
.vr-inline-117 { align-items: center; }
.vr-inline-118 { margin-right: 0.8rem; }
.vr-inline-119 { font-size:0.85rem; color:var(--text); font-weight:600; }
.vr-inline-120 { display:none; cursor:pointer; width:24px; height:24px; padding:0; border:none; border-radius:4px; background:transparent; margin-left:0.5rem; }
.vr-inline-121 { text-align: center; padding: 2rem 1.25rem; color: var(--mute); font-size: 0.8rem; line-height: 1.5; border-top: 1px solid var(--line); margin-top: 2rem; }
.vr-inline-122 { margin: 0 0 0.4rem 0; font-weight: 500; color: var(--text); }
.vr-inline-123 { margin: 0; max-width: 550px; margin-left: auto; margin-right: auto; }
.vr-inline-124 { display: flex; align-items: center; margin: 1.5rem 0; gap: 0.8rem; }
.vr-inline-125 { flex: 1; height: 1px; background: var(--line); }
.vr-inline-126 { font-size: 0.75rem; color: var(--hint); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }