@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  font-size: 11px;
  overflow: hidden;
  cursor: default;
  user-select: none;
}

.control-panel-window {
  background: #ECE9D8;
  border: 2px outset #D4D0C8;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0;
}

.title-bar {
  background: linear-gradient(to bottom, #0A5ADB 0%, #0A5ADB 3%, #0D5FDC 6%, #1266DE 8%, #166CE0 10%, #1A72E2 12%, #1E78E4 15%, #227EE6 18%, #2684E8 20%, #2A8AEA 23%, #2E90EC 26%, #3296EE 28%, #3B9CF0 31%, #3FA2F2 34%, #43A8F4 36%, #47AEF6 39%, #4BB4F8 42%, #4FBAFA 44%, #53C0FC 47%, #57C6FE 50%);
  border-bottom: 1px solid #1A5DAD;
  font-weight: bold;
}

.window-control {
  background: transparent;
  border: 1px outset #D4D0C8;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.window-control:hover {
  background: rgba(255, 255, 255, 0.1);
  border: 1px inset #D4D0C8;
}

.toolbar-button {
  background: #F0F0F0;
  border: 1px outset #D4D0C8;
  font-family: 'Tahoma', sans-serif;
}

.toolbar-button:hover {
  border: 1px inset #D4D0C8;
}

.toolbar-button:active {
  border: 1px inset #D4D0C8;
  background: #E0E0E0;
}

.control-panel-item {
  transition: background-color 0.1s ease;
  border: 1px solid transparent;
}

.control-panel-item:hover {
  background: #E6F3FF !important;
  border: 1px solid #A0C8FF;
}

.control-panel-item.selected {
  background: #316AC5 !important;
  color: white;
  border: 1px dotted white;
}

.start-button {
  background: linear-gradient(to bottom, #73B358 0%, #5AA03A 50%, #4A8C2A 100%);
  border: 1px outset #8BC36A;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.start-button:hover {
  background: linear-gradient(to bottom, #7BB85F 0%, #62A841 50%, #52932F 100%);
  border: 1px inset #8BC36A;
}

.modal-window {
  background: #ECE9D8;
  border: 2px outset #D4D0C8;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

.modal-window .title-bar {
  background: linear-gradient(to bottom, #0A5ADB 0%, #3296EE 100%);
  border-bottom: 1px solid #1A5DAD;
}

.close-button {
  background: transparent;
  border: 1px outset #D4D0C8;
  font-size: 16px;
  font-weight: bold;
}

.close-button:hover {
  background: #FF4444;
  border: 1px inset #D4D0C8;
}

.text-shadow {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Scrollbar styling for authentic XP look */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #ECE9D8;
  border: 1px inset #D4D0C8;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #F0F0F0 0%, #D0D0D0 100%);
  border: 1px outset #D4D0C8;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #E0E0E0 0%, #C0C0C0 100%);
}

::-webkit-scrollbar-button {
  background: #ECE9D8;
  border: 1px outset #D4D0C8;
  height: 16px;
}

::-webkit-scrollbar-button:hover {
  background: #F0F0F0;
  border: 1px inset #D4D0C8;
}

/* Input field styling */
input[type="text"] {
  background: white;
  border: 1px inset #D4D0C8;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
}

input[type="text"]:focus {
  outline: none;
  border: 1px inset #316AC5;
}

/* Button styling */
button {
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
}

/* Make images crisp for that authentic pixel look */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}