:root {
  --oric-orange: #F07000;
  --oric-orange-bright: #FF8C1A;
  --oric-dark: #0d0d1a;
  --oric-panel: rgba(16, 16, 32, 0.92);
  --oric-border: rgba(240, 112, 0, 0.3);
  --oric-glow: rgba(240, 112, 0, 0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--oric-dark);
  font-family: 'IBM Plex Mono', monospace;
  color: #c8c8d0;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(240,112,0,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,40,80,0.08) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(240,112,0,0.008) 3px, rgba(240,112,0,0.008) 4px);
  pointer-events: none;
  z-index: 0;
}

#root { position: relative; z-index: 1; }

.pixel-font { font-family: 'Press Start 2P', cursive; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* CRT Screen */
.crt-screen {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(240,112,0,0.15),
    0 0 80px rgba(240,112,0,0.05),
    inset 0 0 60px rgba(0,0,0,0.5);
}

.crt-screen::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 2;
}

.crt-screen canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.monitor-bezel {
  background: linear-gradient(145deg, #2a2a35, #1a1a25);
  border-radius: 18px;
  padding: 16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  border: 1px solid rgba(60,60,80,0.3);
}

/* Keyboard */
.kb-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 4px 6px;
  background: linear-gradient(180deg, #3a3a48, #2a2a35);
  border: 1px solid rgba(80,80,100,0.4);
  border-radius: 5px;
  color: #d0d0d8;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.08s ease;
  box-shadow:
    0 3px 0 #18181f,
    0 4px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}

.kb-key:hover {
  background: linear-gradient(180deg, #454555, #353545);
  border-color: rgba(240,112,0,0.4);
}

.kb-key.pressed, .kb-key:active {
  background: linear-gradient(180deg, #F07000, #cc5f00) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 #18181f,
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(2px);
  border-color: rgba(240,112,0,0.8);
}

.kb-key.special {
  background: linear-gradient(180deg, #4a3020, #3a2518);
  color: var(--oric-orange);
  border-color: rgba(240,112,0,0.25);
}

.kb-key.special:hover {
  background: linear-gradient(180deg, #5a3828, #4a2d20);
}

/* Panels */
.panel {
  background: var(--oric-panel);
  border: 1px solid var(--oric-border);
  border-radius: 10px;
  backdrop-filter: blur(8px);
}

.panel-header {
  font-family: 'Press Start 2P', cursive;
  font-size: 9px;
  color: var(--oric-orange);
  letter-spacing: 0.5px;
}

/* Buttons */
.btn-orange {
  background: linear-gradient(180deg, #F07000, #cc5f00);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(240,112,0,0.3);
}

.btn-orange:hover {
  background: linear-gradient(180deg, #FF8C1A, #F07000);
  box-shadow: 0 2px 16px rgba(240,112,0,0.5);
}

.btn-orange:active {
  transform: translateY(1px);
}

.btn-dark {
  background: linear-gradient(180deg, #2a2a38, #1e1e28);
  color: #c8c8d0;
  border: 1px solid rgba(80,80,100,0.3);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-dark:hover {
  border-color: var(--oric-orange);
  color: var(--oric-orange);
}

.btn-dark.active {
  background: rgba(240,112,0,0.15);
  border-color: var(--oric-orange);
  color: var(--oric-orange);
}

/* Status badges */
.badge-running {
  background: rgba(0,200,80,0.15);
  color: #00c850;
  border: 1px solid rgba(0,200,80,0.3);
  animation: pulse-badge 2s infinite;
}

.badge-stopped {
  background: rgba(200,40,40,0.15);
  color: #c82828;
  border: 1px solid rgba(200,40,40,0.3);
}

.badge-paused {
  background: rgba(240,200,0,0.15);
  color: #f0c800;
  border: 1px solid rgba(240,200,0,0.3);
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Drop zone */
.drop-zone {
  border: 2px dashed rgba(240,112,0,0.4);
  border-radius: 10px;
  transition: all 0.2s ease;
  background: rgba(240,112,0,0.03);
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--oric-orange);
  background: rgba(240,112,0,0.08);
  box-shadow: 0 0 20px rgba(240,112,0,0.1);
}

/* Register display */
.reg-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #00ff80;
  font-weight: 600;
}

.flag-set { color: #00ff80; font-weight: 700; }
.flag-clear { color: #404050; font-weight: 400; }

/* Hex dump */
.hex-byte {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 1px 3px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s;
}

.hex-byte:hover { background: rgba(240,112,0,0.2); }
.hex-byte.changed {
  background: rgba(240,112,0,0.4);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(20,20,40,0.5); }
::-webkit-scrollbar-thumb {
  background: rgba(240,112,0,0.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(240,112,0,0.6); }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--oric-panel);
  border: 1px solid var(--oric-orange);
  border-radius: 8px;
  padding: 12px 20px;
  color: #e0e0e8;
  font-size: 13px;
  z-index: 1000;
  animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Collapsible */
.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.collapsible-header::before {
  content: '▸';
  color: var(--oric-orange);
  font-size: 10px;
  transition: transform 0.2s;
}

.collapsible-header.open::before {
  transform: rotate(90deg);
}

/* Matrix info blocks */
.matrix-info-block {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(240,112,0,0.3);
}

.matrix-chip-badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.col-badge {
  background: rgba(240,112,0,0.2);
  color: #F07000;
  border: 1px solid rgba(240,112,0,0.4);
}

.row-badge {
  background: rgba(0,180,220,0.15);
  color: #22d3ee;
  border: 1px solid rgba(0,180,220,0.3);
}

.sense-badge {
  background: rgba(0,200,80,0.15);
  color: #4ade80;
  border: 1px solid rgba(0,200,80,0.3);
}

.matrix-signal-flow {
  padding: 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(60,60,80,0.3);
}

/* Matrix table */
.matrix-table-wrap {
  font-size: 12px;
}

.matrix-table {
  border-collapse: separate;
  border-spacing: 2px;
}

.matrix-table th,
.matrix-table td {
  padding: 5px 6px;
  text-align: center;
  white-space: nowrap;
}

.matrix-th-row {
  background: rgba(0,180,220,0.12);
  color: #22d3ee;
  border-radius: 4px;
  font-weight: 600;
  font-size: 10px;
}

.matrix-th-col {
  background: rgba(240,112,0,0.12);
  color: #F07000;
  border-radius: 4px;
  font-weight: 600;
  font-size: 10px;
}

.matrix-td-rownum {
  color: #22d3ee;
  font-weight: 600;
  background: rgba(0,180,220,0.06);
  border-radius: 4px;
}

.matrix-td-rowbits {
  color: rgba(34,211,238,0.5);
  font-size: 10px;
  background: rgba(0,180,220,0.04);
  border-radius: 4px;
}

.matrix-td-key {
  background: rgba(40,40,60,0.6);
  color: #c8c8d0;
  border-radius: 4px;
  border: 1px solid rgba(60,60,80,0.4);
  transition: all 0.15s ease;
  cursor: default;
  min-width: 50px;
}

.matrix-td-key:hover {
  border-color: rgba(240,112,0,0.5);
  background: rgba(240,112,0,0.08);
}

.matrix-cell-pressed {
  background: rgba(240,112,0,0.5) !important;
  color: #fff !important;
  border-color: rgba(240,112,0,0.8) !important;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(240,112,0,0.3);
}

.matrix-cell-scanned {
  border-color: rgba(0,180,220,0.6) !important;
  background: rgba(0,180,220,0.12) !important;
}

.matrix-cell-scanned.matrix-cell-pressed {
  background: rgba(240,112,0,0.6) !important;
  border-color: rgba(240,112,0,0.9) !important;
  box-shadow: 0 0 12px rgba(240,112,0,0.5);
}

.matrix-cell-empty {
  color: #404050;
  background: rgba(20,20,30,0.4) !important;
  border-color: rgba(40,40,50,0.3) !important;
}

.matrix-row-active td {
  border-color: rgba(0,180,220,0.25);
}

@media (max-width: 1024px) {
  .main-layout { flex-direction: column !important; }
  .left-panel, .right-panel { width: 100% !important; max-width: 100% !important; }
}