@import url('https://fonts.googleapis.com/css2?family=VT323&family=Pixelify+Sans&family=Press+Start+2P&display=swap');

:root {
  --win-bg: #c0c0c0;
  --win-border-light: #ffffff;
  --win-border-dark: #000000;
  --win-border-dark-gray: #808080;
  --win-border-light-gray: #dfdfdf;
  
  --dark-teal: #008080; /* Background */
  --yellow: #ffff00; /* Signature yellow */
  --term-black: #0a110a;
  --win-blue: #0000aa;
  
  --font-pixel: 'Pixelify Sans', 'VT323', monospace;
  --font-ui: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
}

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

body {
  background-color: var(--dark-teal);
  color: var(--win-border-dark);
  font-family: var(--font-ui);
  overflow-x: hidden;
  height: 100vh;
}

/* CRT scanline effect */
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
  z-index: 9999;
  background-size: 100% 3px;
  pointer-events: none;
}

/* Base Win95 Classes */
.win95-border {
  border-left: 2px solid var(--win-border-light);
  border-top: 2px solid var(--win-border-light);
  border-right: 2px solid var(--win-border-dark);
  border-bottom: 2px solid var(--win-border-dark);
  background-color: var(--win-bg);
}

.win95-border-inset {
  border-left: 2px solid var(--win-border-dark-gray);
  border-top: 2px solid var(--win-border-dark-gray);
  border-right: 2px solid var(--win-border-light);
  border-bottom: 2px solid var(--win-border-light);
}

.win95-button {
  background-color: var(--win-bg);
  border-left: 2px solid var(--win-border-light);
  border-top: 2px solid var(--win-border-light);
  border-right: 2px solid var(--win-border-dark);
  border-bottom: 2px solid var(--win-border-dark);
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font-pixel);
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
}
.win95-button:active {
  border-left: 2px solid var(--win-border-dark);
  border-top: 2px solid var(--win-border-dark);
  border-right: 2px solid var(--win-border-light);
  border-bottom: 2px solid var(--win-border-light);
  padding: 5px 7px 3px 9px;
}

/* Colors */
.yellow-bg { background-color: var(--yellow); color: black; }
.black-bg { background-color: black; }
.white-bg { background-color: white; }
.terminal-bg { 
  background-color: var(--term-black); 
  background-image: radial-gradient(circle at center, #112a11 0%, #000000 100%);
}
.yellow-text { color: var(--yellow); }
.white-text { color: white; }
.font-bold { font-weight: bold; }

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  margin: 10px 15px;
}
.nav-left { display: flex; align-items: center; gap: 10px; font-family: var(--font-pixel); font-weight: bold; font-size: 14px; }
.nav-logo { height: 24px; image-rendering: pixelated; }
.nav-center-title { font-family: 'Press Start 2P', monospace; font-size: 20px; color: var(--yellow); text-shadow: 2px 2px 0 black; text-align: center; margin:0; line-height:1; }
.nav-right { display: flex; gap: 8px; }

/* Layout */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.main-layout {
  display: flex;
  flex-direction: column;
  padding: 0 15px 15px 15px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.top-row {
  display: flex;
  gap: 15px;
  width: 100%;
}
.col-left { flex: 7; display: flex; flex-direction: column; gap: 10px; }
.col-right { flex: 3; display: flex; flex-direction: column; gap: 10px; }

/* Windows */
.window { display: flex; flex-direction: column; }
.window-titlebar {
  background-color: var(--win-blue);
  color: white;
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
}
.window-controls { display: flex; gap: 2px; }
.win-btn {
  background-color: var(--win-bg);
  border-left: 1px solid var(--win-border-light);
  border-top: 1px solid var(--win-border-light);
  border-right: 1px solid var(--win-border-dark);
  border-bottom: 1px solid var(--win-border-dark);
  width: 16px; height: 14px;
  font-size: 10px; font-weight: bold;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer;
  padding: 0;
}
.window-content { padding: 10px; font-family: var(--font-mono); }

/* Terminal Area */
.split-terminal { display: flex; justify-content: space-between; align-items: center; padding: 20px; min-height: 250px;}
.term-header { font-size: 16px; font-weight: bold; font-family: var(--font-pixel); letter-spacing: 1px; margin-bottom: 10px;}
.glow-text {
  font-family: var(--font-pixel);
  font-size: 80px;
  color: #fff;
  text-shadow: 0 0 20px var(--yellow), 0 0 40px var(--yellow);
  margin: 0;
  line-height: 1;
}
.center-spin-logo {
  width: 200px; height: 200px;
  animation: spin 5s linear infinite;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 15px var(--yellow));
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.dot-yellow { display: inline-block; width: 8px; height: 8px; background-color: var(--yellow); border-radius: 50%; box-shadow: 0 0 5px var(--yellow); margin-right: 5px;}

/* 3 Mini Boxes */
.mini-boxes { display: flex; gap: 10px; }
.mini-boxes > div { flex: 1; }
.mini-content { font-size: 11px; padding: 5px; min-height: 40px; }

/* Table */
.table-header-bar { background-color: var(--win-bg); display: flex; justify-content: space-between; padding: 5px; border-bottom: 2px solid var(--win-border-dark-gray); }
.basket-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--font-mono); background: white; }
.basket-table th { background-color: var(--win-blue); color: white; padding: 4px; text-align: left; }
.basket-table td { padding: 4px; border-bottom: 1px solid #ccc; font-weight: bold;}
.basket-table tr:nth-child(even) { background-color: #f0f0f0; }

/* Right Column Elements */
.hit-counter {
  display: flex; justify-content: center; gap: 2px;
}
.hit-counter span {
  background-color: black;
  color: #ffaa00;
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: bold;
  padding: 2px 6px;
  border: 1px solid #555;
  border-radius: 2px;
}
.contract-input {
  width: 100%;
  padding: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  background-color: white;
  border: none;
  outline: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--win-bg); border-left: 1px solid var(--win-border-dark-gray); }
::-webkit-scrollbar-thumb { background: var(--win-border-light-gray); border: 1px outset var(--win-border-light); }