/**
 * Copyright (c) 2026 Patched Reality, Inc.
 */

:root {
  /* Background layers (darkest to lightest) */
  --bg-base: #1a1a1a;
  --bg-panel: #252525;
  --bg-raised: #2d2d2d;
  --bg-hover: #3a3a3a;
  --bg-active: #454545;

  /* Borders */
  --border-subtle: #3a3a3a;
  --border-default: #4a4a4a;
  --border-focus: #666666;

  /* Text */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #707070;

  /* Accent (selection, focus) */
  --accent: #4a9eff;
  --accent-hover: #6ab0ff;
  --accent-dim: #2a5a9a;

  /* Node type colors */
  --node-rmroot: #ffd700;
  --node-rmcobject: #4a9eff;
  --node-rmtobject: #50c878;
  --node-rmpobject: #ff8c42;

  /* Terrestrial Node Types */
  --node-root: #ffd700;
  --node-water: #2266cc;
  --node-land: #4a9eff;
  --node-country: #9370db;
  --node-territory: #ff7f50;
  --node-state: #20b2aa;
  --node-county: #87ceeb;
  --node-city: #f08080;
  --node-community: #dda0dd;
  --node-sector: #98fb98;
  --node-parcel: #ffaa44;

  /* Celestial Node Types */
  --node-universe: #e0e0ff;
  --node-supercluster: #b8b8ff;
  --node-galaxycluster: #9090ff;
  --node-galaxy: #8080ff;
  --node-blackhole: #303030;
  --node-nebula: #ff80ff;
  --node-starcluster: #ffffaa;
  --node-constellation: #aaffff;
  --node-starsystem: #ffdd44;
  --node-star: #ffff00;
  --node-planetsystem: #44aaff;
  --node-planet: #44ff88;
  --node-moon: #cccccc;
  --node-debris: #666666;
  --node-satellite: #88ff88;
  --node-transport: #ff8800;
  --node-surface: #886644;

  /* Status colors */
  --status-connected: #50c878;
  --status-disconnected: #ff6b6b;
  --status-loading: #ffd700;

  /* Typography */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-lg: 13px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-normal: 150ms ease;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base body */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-base);
  height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-focus);
}

/* ============================================
   TOOLBAR
   ============================================ */
#toolbar {
  height: 36px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-sm);
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.toolbar-right {
  margin-left: auto;
}

.toolbar-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

#url-history {
  width: 140px;
}

#url-input {
  width: 320px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
#main-container {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ============================================
   PANELS
   ============================================ */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  overflow: hidden;
}

.panel-header {
  height: 28px;
  min-height: 28px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-icon {
  font-size: 14px;
  opacity: 0.7;
}

.panel-minimize {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-left: auto;
}

.panel-minimize:hover {
  color: var(--text-primary);
}

.panel-restore {
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 0;
  width: 32px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.panel-restore .panel-icon {
  font-size: 20px;
  opacity: 1;
}

.panel-restore:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

#restore-hierarchy {
  border-radius: 0 4px 4px 0;
  border-left: none;
}

#restore-inspector {
  border-radius: 4px 0 0 4px;
  border-right: none;
}

.panel.minimized {
  display: none;
}

.panel-content {
  flex: 1;
  overflow: auto;
  padding: var(--spacing-sm);
}

/* Panel sizes */
#hierarchy-panel {
  width: 285px;
  min-width: 150px;
  max-width: 450px;
  border-right: 1px solid var(--border-default);
}

#viewport-panel {
  flex: 1;
  min-width: 300px;
}

#inspector-panel {
  width: 280px;
  min-width: 200px;
  max-width: 450px;
  border-left: 1px solid var(--border-default);
}

/* Resize handles */
.resize-handle {
  width: 8px;
  background: transparent;
  cursor: col-resize;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  touch-action: none;
}

.resize-handle:hover,
.resize-handle.active {
  background: var(--accent-dim);
}

/* ============================================
   VIEWPORT
   ============================================ */
.viewport-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.viewport {
  flex: 1;
  background: var(--bg-base);
  position: relative;
  min-height: 200px;
  overflow: hidden;
}

.viewport-content.split-view {
  flex-direction: row;
}

.viewport-content.split-view .viewport {
  flex: 1;
  min-width: 200px;
}

.viewport-content.split-view #viewport-graph {
  border-right: 1px solid var(--border-default);
}

.viewport-content.split-view #viewport-bounds:not(:last-child) {
  border-right: 1px solid var(--border-default);
}

/* Triple view layout */
.viewport-content.triple-view {
  flex-direction: row;
}

.viewport-content.triple-view .viewport {
  flex: 1;
  min-width: 150px;
}

.viewport-content.triple-view #viewport-graph {
  border-right: 1px solid var(--border-default);
}

.viewport-content.triple-view #viewport-bounds {
  border-right: 1px solid var(--border-default);
}

/* Resource view status indicator */
.resource-status {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 4px 8px;
  background: var(--bg-panel);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  pointer-events: none;
}

.resource-status:empty {
  display: none;
}

.resource-status.loading {
  color: var(--status-loading);
}

.resource-status.error {
  color: var(--status-disconnected);
}

/* View tabs */
.viewport-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.type-filter {
  position: relative;
}

.filter-btn {
  padding: 2px 8px;
  font-size: var(--font-size-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
}

.filter-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 8px;
  z-index: 1000;
  min-width: 140px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.filter-dropdown.hidden {
  display: none;
}

.filter-dropdown label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.filter-dropdown label:hover {
  color: var(--text-primary);
}

.filter-dropdown input[type="checkbox"] {
  accent-color: var(--accent);
}

.type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.type-triangle {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid;
  flex-shrink: 0;
}

.type-square {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* Filter category tree */
.filter-category {
  margin-bottom: 8px;
}

.filter-category:last-child {
  margin-bottom: 0;
}

.filter-category-header {
  font-weight: 500;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px !important;
  margin-bottom: 4px;
}

.filter-category-items {
  padding-left: 16px;
}

.filter-category-items label {
  padding: 2px 0 !important;
}

.filter-orbits-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 !important;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  font-style: italic;
}

.filter-standalone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 500;
}

/* Bounds view toolbar */
.bounds-toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bounds-toolbar .type-filter {
  position: relative;
}

.bounds-toolbar .filter-dropdown {
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 4px;
}

.timescale-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-raised);
  padding: 4px 8px 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.timescale-control label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.timescale-control #timescale-label {
  color: var(--text-primary);
  min-width: 70px;
  display: inline-block;
}

.timescale-control input[type="range"] {
  -webkit-appearance: none;
  width: 100px;
  height: 20px;
  background: #3a3f4b;
  outline: none;
  border: none;
  padding: 0;
}

.timescale-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4a9eff;
  cursor: pointer;
}

.timescale-control input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4a9eff;
  cursor: pointer;
}

.view-toggles {
  display: flex;
  gap: 4px;
}

.view-toggle {
  padding: 2px 10px;
  font-size: var(--font-size-sm);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.view-toggle:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.view-toggle.active {
  color: var(--text-primary);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ============================================
   HIERARCHY PANEL
   ============================================ */
.hierarchy-search-bar {
  padding: var(--spacing-sm);
  padding-bottom: 0;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
}

#hierarchy-tree {
  font-size: var(--font-size-sm);
}

/* Tree node styles */
.tree-node {
  padding: 2px 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tree-node-content {
  display: flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 2px;
  transition: background var(--transition-fast);
}

.tree-node-content:hover {
  background: var(--bg-hover);
}

.tree-node-content.selected {
  background: var(--accent-dim);
}

.tree-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
}

.tree-toggle:empty {
  visibility: hidden;
}

.tree-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex-shrink: 0;
}

.tree-label {
  white-space: nowrap;
}

.tree-children {
  margin-left: 16px;
}

.tree-node.hidden {
  display: none;
}

.tree-node.search-match > .tree-node-content {
  background: var(--accent-dim);
}

.tree-loading {
  color: var(--text-muted);
  font-style: italic;
  padding: 2px 4px;
  margin-left: 16px;
}

.tree-context-menu {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 4px 0;
  z-index: 1000;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.tree-context-menu-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.tree-context-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.tree-context-menu-item:disabled {
  color: var(--text-muted);
  cursor: default;
}

.tree-context-menu-item:disabled:hover {
  background: none;
}

.tree-context-menu-separator {
  height: 1px;
  background: var(--border-default);
  margin: 4px 0;
}

/* Node type colors */
.tree-node[data-type="RMRoot"] .tree-icon { color: var(--node-rmroot); }
.tree-node[data-type="RMCObject"] .tree-icon { color: var(--node-rmcobject); }
.tree-node[data-type="RMTObject"] .tree-icon { color: var(--node-rmtobject); }
.tree-node[data-type="RMPObject"] .tree-icon { color: var(--node-rmpobject); }

/* Terrestrial Node Types */
.tree-node[data-nodetype="Root"] .tree-icon { color: var(--node-root); }
.tree-node[data-nodetype="Water"] .tree-icon { color: var(--node-water); }
.tree-node[data-nodetype="Land"] .tree-icon { color: var(--node-land); }
.tree-node[data-nodetype="Country"] .tree-icon { color: var(--node-country); }
.tree-node[data-nodetype="Territory"] .tree-icon { color: var(--node-territory); }
.tree-node[data-nodetype="State"] .tree-icon { color: var(--node-state); }
.tree-node[data-nodetype="County"] .tree-icon { color: var(--node-county); }
.tree-node[data-nodetype="City"] .tree-icon { color: var(--node-city); }
.tree-node[data-nodetype="Community"] .tree-icon { color: var(--node-community); }
.tree-node[data-nodetype="Sector"] .tree-icon { color: var(--node-sector); }
.tree-node[data-nodetype="Parcel"] .tree-icon { color: var(--node-parcel); }

/* Celestial Node Types */
.tree-node[data-nodetype="Universe"] .tree-icon { color: var(--node-universe); }
.tree-node[data-nodetype="Supercluster"] .tree-icon { color: var(--node-supercluster); }
.tree-node[data-nodetype="GalaxyCluster"] .tree-icon { color: var(--node-galaxycluster); }
.tree-node[data-nodetype="Galaxy"] .tree-icon { color: var(--node-galaxy); }
.tree-node[data-nodetype="BlackHole"] .tree-icon { color: var(--node-blackhole); }
.tree-node[data-nodetype="Nebula"] .tree-icon { color: var(--node-nebula); }
.tree-node[data-nodetype="StarCluster"] .tree-icon { color: var(--node-starcluster); }
.tree-node[data-nodetype="Constellation"] .tree-icon { color: var(--node-constellation); }
.tree-node[data-nodetype="StarSystem"] .tree-icon { color: var(--node-starsystem); }
.tree-node[data-nodetype="Star"] .tree-icon { color: var(--node-star); }
.tree-node[data-nodetype="PlanetSystem"] .tree-icon { color: var(--node-planetsystem); }
.tree-node[data-nodetype="Planet"] .tree-icon { color: var(--node-planet); }
.tree-node[data-nodetype="Moon"] .tree-icon { color: var(--node-moon); }
.tree-node[data-nodetype="Debris"] .tree-icon { color: var(--node-debris); }
.tree-node[data-nodetype="Satellite"] .tree-icon { color: var(--node-satellite); }
.tree-node[data-nodetype="Transport"] .tree-icon { color: var(--node-transport); }
.tree-node[data-nodetype="Surface"] .tree-icon { color: var(--node-surface); }

/* ============================================
   INSPECTOR PANEL
   ============================================ */
#inspector-content {
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inspector-empty {
  color: var(--text-muted);
  text-align: center;
  padding: var(--spacing-lg);
  font-style: italic;
}

.inspector-section {
  margin-bottom: var(--spacing-md);
}

.inspector-section-header {
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-subtle);
}

.inspector-row {
  display: flex;
  align-items: baseline;
  padding: 2px 0;
}

.inspector-label {
  width: 80px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.inspector-value {
  flex: 1;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.inspector-value.editable {
  background: var(--bg-raised);
  padding: 2px 4px;
  border-radius: 2px;
  cursor: text;
}

/* Vector display */
.inspector-vector {
  display: flex;
  gap: 4px;
}

.inspector-vector-component {
  flex: 1;
  background: var(--bg-raised);
  padding: 2px 4px;
  border-radius: 2px;
  text-align: center;
}

.inspector-vector-component::before {
  color: var(--text-muted);
  margin-right: 2px;
}

.inspector-vector-component.x::before { content: 'X'; color: #ff6b6b; }
.inspector-vector-component.y::before { content: 'Y'; color: #50c878; }
.inspector-vector-component.z::before { content: 'Z'; color: #4a9eff; }
.inspector-vector-component.w::before { content: 'W'; color: #ffd700; }

/* Raw JSON section */
.inspector-raw {
  margin-top: var(--spacing-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inspector-raw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-raised);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.inspector-copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-muted);
}

.inspector-copy-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.inspector-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 2px 4px;
  color: var(--text-muted);
  margin-right: 4px;
}

.inspector-toggle-btn:hover {
  color: var(--text-primary);
}

.inspector-raw-title {
  flex: 1;
}

.inspector-raw-content {
  background: var(--bg-base);
  padding: var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
  flex: 1;
  min-height: 0;
  margin: 0;
}

/* ============================================
   STATUS BAR
   ============================================ */
#status-bar {
  height: 24px;
  background: var(--bg-raised);
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
}

#status-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

#status-message::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-disconnected);
}

#status-message.connected::before {
  background: var(--status-connected);
}

#status-message.loading::before {
  background: var(--status-loading);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
input, select, button {
  font-family: inherit;
  font-size: var(--font-size-base);
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 2px;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

input::placeholder {
  color: var(--text-muted);
}

select {
  cursor: pointer;
}

button {
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

button:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
}

button:active {
  background: var(--bg-active);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

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

/* ============================================
   MODAL
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  padding: var(--spacing-lg);
  border-radius: 4px;
  min-width: 300px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.modal-content h3 {
  margin-bottom: var(--spacing-md);
  font-weight: 500;
  font-size: var(--font-size-lg);
}

.modal-content input {
  width: 100%;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
}

.modal-buttons {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-md);
}

.modal-content input:disabled,
.modal-buttons button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hidden {
  display: none !important;
}

.monospace {
  font-family: var(--font-mono);
}

.text-muted {
  color: var(--text-muted);
}

.text-secondary {
  color: var(--text-secondary);
}