.codemnation-layout {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 0;
      padding: 0;
      height: calc(100vh - 60px); /* Adjust based on header height */
      overflow: hidden;
      --control-scale: 0.5;
      --control-border-color: rgba(118, 236, 187, 0.5);
      --control-inner-shadow-color: rgba(0, 0, 0, 0.4);
      --control-base-shadow: 0 calc(12px * var(--control-scale)) 0 rgba(0,0,0,0.35);
      --codemnation-tartan: repeating-linear-gradient(
          45deg,
          transparent,
          transparent calc(2px * var(--control-scale)),
          rgba(0, 0, 0, 0.4) calc(2px * var(--control-scale)),
          rgba(0, 0, 0, 0.4) calc(4px * var(--control-scale))
        ),
        repeating-linear-gradient(
          -45deg,
          transparent,
          transparent calc(2px * var(--control-scale)),
          rgba(0, 0, 0, 0.4) calc(2px * var(--control-scale)),
          rgba(0, 0, 0, 0.4) calc(4px * var(--control-scale))
        );
    }

    /* Left Sidebar Layout */
    .codemnation-sidebar {
      display: flex;
      flex-direction: column;
      background-color: rgba(12, 26, 23, 0.95);
      background-image: var(--codemnation-tartan);
      border-right: calc(6px * var(--control-scale)) solid var(--control-border-color);
      height: 100%;
      overflow: hidden;
    }

    .codemnation-toolbar {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      padding: 1rem;
      border-bottom: calc(6px * var(--control-scale)) solid var(--control-border-color);
    }

    .codemnation-toolbar-row {
      display: flex;
      gap: 0.5rem;
    }

    .codemnation-button {
      flex: 1;
      border-radius: 0;
      border: calc(6px * var(--control-scale)) solid var(--control-border-color);
      background-color: rgba(14, 32, 28, 0.85);
      background-image: var(--codemnation-tartan);
      color: rgba(236, 255, 248, 0.92);
      padding: 0.5rem 0.5rem;
      font-family: "Mac's Extended Minecraft", monospace;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: var(--control-base-shadow);
      text-transform: uppercase;
    }

    .codemnation-button:hover {
      background-color: rgba(20, 48, 40, 0.95);
      border-color: rgba(118, 236, 187, 0.9);
      color: #fff;
      transform: translateY(calc(-2px * var(--control-scale)));
      box-shadow: var(--control-base-shadow);
    }

    .codemnation-button:active {
      transform: translateY(calc(2px * var(--control-scale)));
      box-shadow: inset 0 0 0 calc(4px * var(--control-scale)) var(--control-inner-shadow-color),
          0 calc(10px * var(--control-scale)) 0 rgba(0, 0, 0, 0.35);
    }

    .codemnation-button input[type="file"] {
      display: none;
    }

    .codemnation-codes-container {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .codemnation-section-title {
      font-family: "Mac's Extended Minecraft", monospace;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(118, 236, 187, 0.8);
      border-bottom: 1px solid rgba(118, 236, 187, 0.3);
      padding-bottom: 4px;
      margin-bottom: 8px;
    }

    .codemnation-code-item {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.6rem;
      background-color: rgba(6, 18, 14, 0.6);
      background-image: var(--codemnation-tartan);
      border: calc(6px * var(--control-scale)) solid var(--control-border-color);
      border-radius: 0;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: "Mac's Extended Minecraft", monospace;
      font-size: 0.75rem;
      color: #fff;
      position: relative;
    }

    .codemnation-code-item:hover {
      background-color: rgba(20, 48, 40, 0.8);
      border-color: rgba(118, 236, 187, 0.6);
    }

    .codemnation-code-item.is-active {
      background-color: rgba(118, 236, 187, 0.15);
      border-color: rgba(118, 236, 187, 1);
      transform: translateY(calc(2px * var(--control-scale)));
      box-shadow: inset 0 0 0 calc(4px * var(--control-scale)) var(--control-inner-shadow-color),
          0 calc(10px * var(--control-scale)) 0 rgba(0, 0, 0, 0.35);
    }

    .codemnation-code-top-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
    }

    .codemnation-code-category {
      background-color: rgba(12, 26, 23, 0.95);
      background-image: var(--codemnation-tartan);
      border: calc(6px * var(--control-scale)) solid var(--control-border-color);
      color: rgba(118, 236, 187, 0.9);
      font-family: "Mac's Extended Minecraft", monospace;
      font-size: 0.65rem;
      padding: 0.2rem;
      border-radius: 0;
      width: 100%;
      outline: none;
      cursor: pointer;
    }

    .codemnation-code-category:focus {
      border-color: rgba(118, 236, 187, 1);
    }

    .codemnation-code-swatch {
      width: 20px;
      height: 20px;
      border-radius: 0;
      border: calc(6px * var(--control-scale)) solid rgba(255,255,255,0.5);
      flex-shrink: 0;
      padding: 0;
      background: none;
      cursor: pointer;
      overflow: hidden;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .codemnation-code-swatch::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    .codemnation-code-swatch::-webkit-color-swatch {
      border: none;
      border-radius: 0;
    }

    .codemnation-code-swatch::-moz-color-swatch {
      border: none;
      border-radius: 0;
    }

    .codemnation-code-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .codemnation-code-actions {
      display: flex;
      gap: 4px;
    }

    .codemnation-code-action-btn {
      background: transparent;
      border: none;
      color: rgba(118, 236, 187, 0.6);
      cursor: pointer;
      font-size: 0.8rem;
      padding: 2px 4px;
    }

    .codemnation-code-action-btn:hover {
      color: rgba(118, 236, 187, 1);
    }

    .codemnation-code-input {
      background: transparent;
      border: none;
      color: #fff;
      font-family: inherit;
      font-size: inherit;
      width: 100%;
      outline: none;
      border-bottom: 1px dashed rgba(118, 236, 187, 0.5);
    }

    .codemnation-code-memo {
      background-color: rgba(0, 0, 0, 0.2);
      background-image: var(--codemnation-tartan);
      border: calc(6px * var(--control-scale)) solid rgba(118, 236, 187, 0.2);
      border-radius: 0;
      color: rgba(255, 255, 255, 0.8);
      font-family: inherit;
      font-size: 0.65rem;
      width: 100%;
      padding: 4px;
      outline: none;
      resize: vertical;
      min-height: 40px;
    }

    .codemnation-code-memo:focus {
      border-color: rgba(118, 236, 187, 0.8);
    }

    .codemnation-auto-code-input {
      flex: 2;
      background-color: rgba(0, 0, 0, 0.2);
      background-image: var(--codemnation-tartan);
      border: calc(6px * var(--control-scale)) solid var(--control-border-color);
      border-radius: 0;
      color: #fff;
      padding: 0.4rem;
      font-family: inherit;
      font-size: 0.7rem;
      outline: none;
    }

    .codemnation-auto-code-input:focus {
      border-color: rgba(118, 236, 187, 1);
    }

    /* Main Canvas Stage */
    .codemnation-stage {
      display: flex;
      flex-direction: column;
      position: relative;
      background: rgba(9, 20, 17, 0.78);
      overflow: hidden;
    }

    .codemnation-view-toggles {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background-color: rgba(12, 26, 23, 0.95);
      background-image: var(--codemnation-tartan);
      border-bottom: calc(6px * var(--control-scale)) solid var(--control-border-color);
      z-index: 5;
    }

    .codemnation-view-toggles .codemnation-button {
      flex: 0 0 auto;
      padding: 0.5rem 1rem;
    }

    .codemnation-btn-active {
      background: rgba(20, 48, 40, 0.95);
      border-color: rgba(118, 236, 187, 0.9);
      color: #fff;
      box-shadow: 0 0 5px rgba(118, 236, 187, 0.4) inset;
    }

    .codemnation-map-hint {
      font-family: "Mac's Extended Minecraft", monospace;
      font-size: 0.65rem;
      color: rgba(118, 236, 187, 0.6);
      margin-left: auto;
    }

    .codemnation-canvas-container {
      position: absolute;
      top: 40px; /* Offset for toggles */
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: calc(100% - 40px);
      overflow: auto; /* Allow scrolling the text canvas */
      padding: 2rem;
    }

    .codemnation-canvas {
      display: block;
      /* Background pattern */
      background:
        linear-gradient(90deg, rgba(118, 236, 187, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(118, 236, 187, 0.04) 1px, transparent 1px);
      background-size: 24px 24px;
      cursor: text;
    }

    #net-canvas {
      cursor: grab;
      width: 100%;
      height: 100%;
    }

    #net-canvas:active {
      cursor: grabbing;
    }

    #network-container {
      overflow: hidden; /* No scrolling in network view */
      padding: 0;
    }

    .codemnation-data-view {
      padding: 2rem;
      overflow-y: auto;
      background-color: rgba(12, 26, 23, 0.95);
      background-image: var(--codemnation-tartan);
    }

    .codemnation-data-group {
      margin-bottom: 2rem;
    }

    .codemnation-data-header {
      font-family: "Mac's Extended Minecraft", monospace;
      font-size: 1rem;
      color: rgba(118, 236, 187, 1);
      border-bottom: 2px solid rgba(118, 236, 187, 0.3);
      padding-bottom: 0.5rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .codemnation-data-snippet {
      background: rgba(20, 48, 40, 0.5);
      border-left: 4px solid var(--snippet-color, rgba(118, 236, 187, 0.8));
      padding: 1rem;
      margin-bottom: 1rem;
      font-family: "Mac's Extended Minecraft", "Belanidi Serif", serif;
      font-size: 1rem;
      color: rgba(236, 255, 248, 0.9);
      line-height: 1.5;
    }

    .codemnation-text-input-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(9, 20, 17, 0.9);
      z-index: 10;
    }

    .codemnation-text-textarea {
      width: 80%;
      height: 60%;
      background-color: rgba(12, 26, 23, 0.95);
      background-image: var(--codemnation-tartan);
      border: calc(6px * 0.5) solid var(--control-border-color);
      border-radius: 0;
      color: #fff;
      padding: 1.5rem;
      font-family: "Mac's Extended Minecraft", "Belanidi Serif", serif;
      font-size: 1.2rem;
      line-height: 1.6;
      resize: none;
      outline: none;
    }

    .codemnation-text-textarea:focus {
      border-color: rgba(118, 236, 187, 1);
    }

    .codemnation-overlay-buttons {
      position: absolute;
      bottom: 15%;
      display: flex;
      gap: 1rem;
    }

    @media (max-width: 800px) {
      .codemnation-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 250px 1fr;
      }
      .codemnation-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(118, 236, 187, 0.2);
      }
    }

/* Utility Classes */
.hidden {
  display: none !important;
}

.codemnation-mt-sm {
  margin-top: 0.5rem;
}

.codemnation-checkbox-label {
  color: rgba(118, 236, 187, 0.8);
  font-family: "Mac's Extended Minecraft", monospace;
  font-size: 0.7rem;
  cursor: pointer;
}

.codemnation-checkbox {
  vertical-align: middle;
}

.codemnation-hero-btn {
  padding: 1rem 2rem;
  font-size: 0.9rem;
}

/* Custom Modal */
.codemnation-modal {
  background-color: rgba(12, 26, 23, 0.95);
  background-image: var(--codemnation-tartan);
  border: calc(6px * 0.5) solid rgba(118, 236, 187, 0.8);
  border-radius: 0;
  color: #fff;
  padding: 1.5rem;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  font-family: "Mac's Extended Minecraft", monospace;
  margin: auto; /* Centers the dialog */
}

.codemnation-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

.codemnation-modal-title {
  font-size: 1rem;
  color: rgba(118, 236, 187, 1);
  margin-bottom: 1rem;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(118, 236, 187, 0.3);
  padding-bottom: 0.5rem;
}

.codemnation-modal-body {
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: rgba(236, 255, 248, 0.9);
}

.codemnation-modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.codemnation-button--danger {
  border-color: rgba(236, 118, 118, 0.8);
  color: rgba(236, 118, 118, 1);
}

.codemnation-button--danger:hover {
  background: rgba(236, 118, 118, 0.2);
  border-color: rgba(236, 118, 118, 1);
  color: #fff;
}

/* Toast Notifications */
.codemnation-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
}

.codemnation-toast {
  background-color: rgba(236, 118, 118, 0.95);
  background-image: var(--codemnation-tartan);
  color: #fff;
  padding: 1rem 1.5rem;
  border: calc(6px * 0.35) solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  font-family: "Mac's Extended Minecraft", monospace;
  font-size: 0.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  animation: codemnation-toast-in 0.3s ease forwards, codemnation-toast-out 0.3s ease forwards 3s;
}

@keyframes codemnation-toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes codemnation-toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}