:root,
body[data-theme="green"] {
  --accent: #1bff80;
  --accent-dim: #0d7d40;
  --accent-border: #1bff80;
}
body[data-theme="amber"] {
  --accent: #ffb641;
  --accent-dim: #b37a1e;
  --accent-border: #ffb641;
}
body[data-theme="blue"] {
  --accent: #2ecfff;
  --accent-dim: #1a8fb8;
  --accent-border: #2ecfff;
}
body[data-theme="white"] {
  --accent: #d9ffff;
  --accent-dim: #9ad4d4;
  --accent-border: #d9ffff;
}
body[data-theme="magenta"] {
  --accent: #ff07ff;
  --accent-dim: #7a1a7a;
  --accent-border: #ff00ff;
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  font-family: "Space Mono", monospace;
  color: var(--accent);
  overflow: hidden;
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
}

.crt-screen {
  position: fixed;
  inset: 14px;
  border-radius: 32px 36px 32px 36px / 28px 32px 28px 32px;
  clip-path: inset(0 round 32px 36px 32px 36px / 28px 32px 28px 32px);
  overflow: hidden;
  box-shadow:
    inset 0 0 80px 12px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 1;
}
#root { height: 100%; min-height: 0; }

.crt-overlay {
  position: fixed;
  inset: 14px;
  border-radius: 32px 36px 32px 36px / 28px 32px 28px 32px;
  clip-path: inset(0 round 32px 36px 32px 36px / 28px 32px 28px 32px);
  z-index: 9999;
  pointer-events: none;
}
.crt-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.12) 2px,
      rgba(0,0,0,0.12) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.04) 2px,
      rgba(0,0,0,0.04) 4px
    );
  animation: crt-flicker 8s infinite;
}
.crt-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 85% 80% at 50% 50%,
    transparent 0%,
    transparent 45%,
    rgba(0,0,0,0.25) 85%,
    rgba(0,0,0,0.6) 100%
  );
  box-shadow: inset 0 0 120px 20px rgba(0,0,0,0.15);
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.97; }
  25%, 75% { opacity: 0.99; }
}

.layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.layout.layout-immersive {
  grid-template-columns: 1fr;
}
.layout > * {
  min-height: 0;
}

.terminal {
  padding: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent-border);
  margin: 8px;
  min-height: 0;
  overflow: hidden;
}

.terminal .output {
  flex: 1;
  min-height: 0;
  white-space: pre-wrap;
  overflow-y: auto;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-border) #0a0a0a;
  position: relative;
}

.pong-terminal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.terminal .prompt {
  display: flex;
  flex-shrink: 0;
}

.terminal-tabs {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.terminal-tab-btn {
  width: auto;
  flex: 0 0 16.666%;
  padding: 6px 8px;
  font-size: 0.8em;
  margin-bottom: 0;
}

.terminal-tab-btn.active {
  background: var(--accent-dim);
  box-shadow: 0 0 3px var(--accent);
}

.output::-webkit-scrollbar {
  width: 10px;
}
.output::-webkit-scrollbar-track {
  background: #0a0a0a;
}
.output::-webkit-scrollbar-thumb {
  background: var(--accent-border);
  border-radius: 2px;
}
.output::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: #0a0a0a; }
.sidebar::-webkit-scrollbar-thumb { background: var(--accent-border); border-radius: 2px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.prompt { display: flex; }

input {
  background: none;
  border: none;
  outline: none;
  color: var(--accent);
  font-family: inherit;
  flex: 1;
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
}
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar {
  border-left: 1px solid var(--accent-border);
  padding: 12px;
  box-shadow: inset 0 0 6px rgba(27, 255, 128, .025);
  min-height: 0;
  overflow-y: auto;
}
body[data-theme="amber"] .sidebar { box-shadow: inset 0 0 6px rgba(255, 182, 65, .025); }
body[data-theme="blue"] .sidebar { box-shadow: inset 0 0 6px rgba(46, 207, 255, .025); }
body[data-theme="white"] .sidebar { box-shadow: inset 0 0 6px rgba(192, 255, 255, .025); }

button {
  width: 100%;
  margin-bottom: 6px;
  background: #000;
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: inherit;
  cursor: pointer;
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  box-shadow: 0 0 2px rgba(27, 255, 128, .05);
}
body[data-theme="amber"] button { box-shadow: 0 0 2px rgba(255, 182, 65, .05); }
body[data-theme="blue"] button { box-shadow: 0 0 2px rgba(46, 207, 255, .05); }
body[data-theme="white"] button { box-shadow: 0 0 2px rgba(192, 255, 255, .05); }

button:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 3px var(--accent), 0 0 6px var(--accent);
}

[data-tooltip] {
  position: relative;
  z-index: 0;
}
[data-tooltip]:hover {
  z-index: 100;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.8);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.85em;
  max-width: 240px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 10001;
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  box-shadow: 0 0 2px rgba(27, 255, 128, .05);
}
body[data-theme="amber"] [data-tooltip]::after { box-shadow: 0 0 2px rgba(255, 182, 65, .05); }
body[data-theme="blue"] [data-tooltip]::after { box-shadow: 0 0 2px rgba(46, 207, 255, .05); }
body[data-theme="white"] [data-tooltip]::after { box-shadow: 0 0 2px rgba(192, 255, 255, .05); }
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}
[data-tooltip].disabled:hover::after,
[data-tooltip][disabled]:hover::after {
  opacity: 1;
  visibility: visible;
}

.small { font-size: .85em; opacity: .8; }

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Mono", monospace;
}

.settings-panel {
  background: #0a0a0a;
  border: 2px solid var(--accent-border);
  color: var(--accent);
  padding: 20px;
  min-width: 280px;
  max-width: 90vw;
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  box-shadow: 0 0 5px var(--accent), 0 0 10px rgba(27, 255, 128, .06);
}
body[data-theme="amber"] .settings-panel { box-shadow: 0 0 5px var(--accent), 0 0 10px rgba(255, 182, 65, .06); }
body[data-theme="blue"] .settings-panel { box-shadow: 0 0 5px var(--accent), 0 0 10px rgba(46, 207, 255, .06); }
body[data-theme="white"] .settings-panel { box-shadow: 0 0 5px var(--accent), 0 0 10px rgba(192, 255, 255, .06); }

.settings-panel h2 {
  margin: 0 0 16px 0;
  font-size: 1em;
  font-weight: normal;
  opacity: .9;
}

.settings-panel .theme-row {
  margin-bottom: 12px;
}

.settings-panel .theme-label {
  display: block;
  font-size: .85em;
  opacity: .8;
  margin-bottom: 6px;
}

.settings-panel .theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-panel .theme-btn {
  width: auto;
  min-width: 64px;
  margin: 0;
  padding: 8px 12px;
  font-size: .9em;
}

.settings-panel .theme-btn.active {
  background: var(--accent-dim);
  box-shadow: 0 0 2px var(--accent);
}

.settings-panel .reset-btn {
  margin-top: 16px;
  margin-bottom: 0;
}
.settings-panel .reset-btn:hover {
  background: var(--accent-dim);
}
.settings-panel .close-btn {
  margin-top: 8px;
  margin-bottom: 0;
}
.settings-panel .close-btn:hover {
  background: var(--accent-dim);
}

.settings-panel .credits-btn {
  margin-top: 8px;
  margin-bottom: 0;
}
.settings-panel .credits-btn:hover {
  background: var(--accent-dim);
}

.volume-slider {
  width: 100%;
  margin-top: 8px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #0a0a0a;
  border: 1px solid var(--accent-border);
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 1px solid var(--accent-border);
  cursor: pointer;
  box-shadow: 0 0 3px var(--accent);
  transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  background: var(--accent);
  box-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent);
  transform: scale(1.1);
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 1px solid var(--accent-border);
  cursor: pointer;
  box-shadow: 0 0 3px var(--accent);
  transition: all 0.2s ease;
}

.volume-slider::-moz-range-thumb:hover {
  background: var(--accent);
  box-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent);
  transform: scale(1.1);
}

.volume-slider::-moz-range-track {
  height: 4px;
  background: #0a0a0a;
  border: 1px solid var(--accent-border);
}

.credits-panel {
  max-width: 500px;
}

.credits-content {
  margin-bottom: 16px;
  line-height: 1.6;
}

.credits-content p {
  margin: 8px 0;
  font-size: 0.9em;
  opacity: 0.9;
}

.credits-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 2px;
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  transition: all 0.2s ease;
  cursor: pointer;
}

.credits-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  text-shadow: 0 0 2px var(--accent), 0 0 4px var(--accent), 0 0 6px var(--accent);
  opacity: 1;
}

.credits-link:visited {
  color: var(--accent-dim);
  text-decoration-color: var(--accent-dim);
}

.credits-link:visited:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.credits-footer {
  margin-top: 16px !important;
  padding-top: 16px;
  border-top: 1px solid var(--accent-border);
  opacity: 0.7 !important;
  font-size: 0.85em !important;
}

.sidebar .settings-btn {
  margin-top: 12px;
}

.sidebar .sidebar-heading {
  font-size: 0.8em;
  opacity: 0.9;
  margin: 12px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent-border);
}

.sidebar-heading-software {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-heading-software .sidebar-heading-label {
  flex: 0 0 auto;
}

.software-filters {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  flex: 1 1 auto;
}

.software-filter-btn {
  flex: 1;
  width: auto;
  margin-bottom: 0;
  font-size: 0.75em;
  padding: 4px 6px;
}

.software-filter-btn.active {
  background: var(--accent-dim);
  box-shadow: 0 0 3px var(--accent);
}

.sidebar .upgrade-btn {
  font-size: 0.85em;
  padding: 6px 8px;
}
.sidebar .upgrade-btn.disabled,
.sidebar button:disabled {
  position: relative;
  cursor: not-allowed;
}
.sidebar .upgrade-btn.disabled::before,
.sidebar button:disabled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  pointer-events: none;
}
.sidebar .upgrade-btn.disabled:hover,
.sidebar button:disabled:hover {
  background: #000;
  box-shadow: 0 0 2px rgba(27, 255, 128, .05);
}
body[data-theme="amber"] .sidebar .upgrade-btn.disabled:hover { box-shadow: 0 0 2px rgba(255, 182, 65, .05); }
body[data-theme="blue"] .sidebar .upgrade-btn.disabled:hover { box-shadow: 0 0 2px rgba(46, 207, 255, .05); }
body[data-theme="white"] .sidebar .upgrade-btn.disabled:hover { box-shadow: 0 0 2px rgba(192, 255, 255, .05); }

/* Splash Screen */
.splash-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: #000;
  animation: splashFadeIn 0.5s ease-in;
}

.splash-logo {
  text-align: center;
  animation: splashPulse 2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-image {
  max-width: 80%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 20px var(--accent));
}

.orion-image {
  filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 20px var(--accent));
}

/* Colorize white images to match theme - convert white to accent color */
body[data-theme="green"] .orion-image {
  filter: 
    brightness(0) 
    saturate(100%) 
    invert(0) 
    sepia(100%) 
    saturate(2000%) 
    hue-rotate(90deg)
    drop-shadow(0 0 3px var(--accent)) 
    drop-shadow(0 0 0px var(--accent));
}

body[data-theme="amber"] .orion-image {
  filter: 
    brightness(0) 
    saturate(100%) 
    invert(.0) 
    sepia(50%) 
    saturate(650%) 
    hue-rotate(340deg)
    drop-shadow(0 0 3px var(--accent)) 
    drop-shadow(0 0 0px var(--accent));
}

body[data-theme="blue"] .orion-image {
  filter: 
    brightness(0) 
    saturate(100%) 
    invert(0) 
    sepia(100%) 
    saturate(2000%) 
    hue-rotate(180deg)
    drop-shadow(0 0 3px var(--accent)) 
    drop-shadow(0 0 0px var(--accent));
}

body[data-theme="white"] .orion-image {
  filter: 
    brightness(0) 
    saturate(100%) 
    invert(0) 
    sepia(100%) 
    saturate(2000%) 
    hue-rotate(150deg)
    drop-shadow(0 0 3px var(--accent)) 
    drop-shadow(0 0 0px var(--accent));
}

body[data-theme="magenta"] .orion-image {
  filter: 
    brightness(0) 
    saturate(100%) 
    invert(0) 
    sepia(100%) 
    saturate(2000%) 
    hue-rotate(270deg)
    drop-shadow(0 0 3px var(--accent)) 
    drop-shadow(0 0 0px var(--accent));
}

@keyframes splashFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes splashPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}

/* Login Screen */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: #000;
  animation: loginFadeIn 0.5s ease-in;
}

.login-terminal {
  width: 90%;
  max-width: 500px;
  border: 2px solid var(--accent-border);
  background: #0a0a0a;
  padding: 24px;
  box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(27, 255, 128, .1);
  animation: loginSlideIn 0.5s ease-out;
}

body[data-theme="amber"] .login-terminal { box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(255, 182, 65, .1); }
body[data-theme="blue"] .login-terminal { box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(46, 207, 255, .1); }
body[data-theme="white"] .login-terminal { box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(192, 255, 255, .1); }

.login-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--accent-border);
}

.login-title {
  font-size: 1.8em;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  opacity: 0.7;
}

.login-content {
  margin-bottom: 24px;
  min-height: 60px;
  font-family: "Space Mono", monospace;
}

.login-prompt {
  display: inline-block;
  color: var(--accent);
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  margin-right: 8px;
}

.login-text {
  display: inline-block;
  color: var(--accent);
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  opacity: 0.8;
  animation: loginBlink 1.5s infinite;
}

@keyframes loginBlink {
  0%, 50% { opacity: 0.8; }
  51%, 100% { opacity: 0.3; }
}

.login-buttons {
  display: flex;
  gap: 12px;
}

.login-btn {
  flex: 1;
  padding: 12px 20px;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: #000;
  border: 2px solid var(--accent-border);
  color: var(--accent);
  cursor: pointer;
  text-shadow: 0 0 1.5px var(--accent), 0 0 3px var(--accent);
  box-shadow: 0 0 3px rgba(27, 255, 128, .1);
  transition: all 0.2s ease;
}

body[data-theme="amber"] .login-btn { box-shadow: 0 0 3px rgba(255, 182, 65, .1); }
body[data-theme="blue"] .login-btn { box-shadow: 0 0 3px rgba(46, 207, 255, .1); }
body[data-theme="white"] .login-btn { box-shadow: 0 0 3px rgba(192, 255, 255, .1); }

.login-btn:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent);
  transform: translateY(-1px);
}

.login-btn:active {
  transform: translateY(0);
}

@keyframes loginFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Pong Game */
.pong-terminal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 20px;
  overflow: hidden;
}

.pong-canvas {
  border: 2px solid var(--accent-border);
  background: #000;
  box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(27, 255, 128, 0.2);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: calc(100% - 60px);
  width: auto;
  height: auto;
}

body[data-theme="amber"] .pong-canvas { box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(255, 182, 65, 0.2); }
body[data-theme="blue"] .pong-canvas { box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(46, 207, 255, 0.2); }
body[data-theme="white"] .pong-canvas { box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(192, 255, 255, 0.2); }