:root {
  --qb-bg: #00007F;
  --qb-bg-dark: #000050;
  --qb-cyan: #00FFFF;
  --qb-yellow: #FFFF00;
  --qb-white: #FFFFFF;
  --qb-green: #00FF00;
  --qb-gray: #AAAAAA;
  --qb-darkgray: #555555;
  --qb-black: #000000;
  --qb-red: #FF5555;
  --qb-highlight: #0000AA;
}

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

body {
  background: var(--qb-bg-dark);
  color: var(--qb-white);
  font-family: 'VT323', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.08) 0px,
    rgba(0,0,0,0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}

.press-start { font-family: 'Press Start 2P', monospace; }
.vt323 { font-family: 'VT323', monospace; }

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s step-end infinite;
  display: inline-block;
}

.ascii-border {
  border: 2px solid var(--qb-cyan);
  position: relative;
}

.ascii-border::before {
  content: '╔' attr(data-title) '╗';
  position: absolute;
  top: -12px;
  left: 8px;
  background: var(--qb-bg-dark);
  padding: 0 4px;
  color: var(--qb-yellow);
  font-family: 'VT323', monospace;
  font-size: 16px;
}

.dos-button {
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 6px 16px;
  background: var(--qb-gray);
  color: var(--qb-black);
  border: none;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  cursor: pointer;
  transition: all 0.05s;
  user-select: none;
}

.dos-button:active {
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(1px, 1px);
}

.dos-button:hover {
  background: #ccc;
}

.dos-button.active {
  background: var(--qb-cyan);
  color: var(--qb-bg);
  font-weight: bold;
}

.drop-zone {
  border: 3px dashed var(--qb-cyan);
  background: rgba(0,0,127,0.3);
  transition: all 0.2s;
}

.drop-zone.drag-over {
  border-color: var(--qb-yellow);
  background: rgba(0,0,127,0.6);
  box-shadow: 0 0 20px rgba(0,255,255,0.3);
}

.hex-output {
  background: var(--qb-bg);
  color: var(--qb-yellow);
  font-family: 'VT323', monospace;
  border: 2px solid var(--qb-cyan);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.4;
  tab-size: 8;
}

.palette-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--qb-darkgray);
  cursor: pointer;
  transition: transform 0.1s;
}

.palette-swatch:hover {
  transform: scale(1.3);
  z-index: 10;
  position: relative;
  border-color: var(--qb-white);
}

.tab-active {
  background: var(--qb-cyan) !important;
  color: var(--qb-bg) !important;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--qb-bg-dark); }
::-webkit-scrollbar-thumb { background: var(--qb-darkgray); border: 1px solid var(--qb-bg-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--qb-gray); }

canvas { image-rendering: pixelated; }

@media (max-width: 768px) {
  .press-start { font-size: 10px !important; }
}