:root {
  /* Color Palette - Enhanced for darker 5,5,5 scheme */
  --primary-color: rgb(5, 5, 5); /* Very dark gray as requested */
  --secondary-color: rgb(30, 30, 30); /* Darker gray for accents (replacing blue) */
  --background-light: rgb(20, 20, 20); /* Darker background for body */
  --surface-light: rgb(15, 15, 15); /* Near-black for card backgrounds */
  --text-dark: rgb(200, 200, 200); /* Light gray for primary text (contrast) */
  --text-light: rgb(120, 120, 120); /* Mid-gray for secondary text */
  --border-color: rgb(50, 50, 50); /* Dark gray for borders */
  --shadow-color: rgba(0, 0, 0, 0.4); /* Stronger shadow for depth */

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-sm: calc(var(--spacing-unit) * 1.5);
  --spacing-md: calc(var(--spacing-unit) * 2.5);
  --spacing-lg: calc(var(--spacing-unit) * 4);

  /* Typography */
  --font-body: 'Inter', 'Arial', sans-serif;
  --font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Border Radius */
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
}

body {
  font-family: var(--font-body);
  background-color: var(--background-light);
  margin: 0;
  padding: var(--spacing-md);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 800px;
  margin: var(--spacing-md) auto;
  background: var(--surface-light);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 20px var(--shadow-color);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px var(--shadow-color);
}

.video-container {
  margin: var(--spacing-lg) 0;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background-color: var(--primary-color); /* Matches 5,5,5 */
  border-radius: var(--border-radius-sm);
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

#generate-btn {
  background-color: var(--primary-color);
  color: var(--text-dark); /* Light gray text for contrast */
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-lg);
  transition: background-color 0.3s ease, transform 0.2s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#generate-btn:hover:not(:disabled) {
  background-color: rgb(25, 25, 25); /* Slightly lighter for hover */
  transform: translateY(-1px);
}

#generate-btn:active:not(:disabled) {
  background-color: rgb(0, 0, 0); /* Pure black for active */
  transform: translateY(0);
}

#generate-btn:disabled {
  background-color: var(--border-color);
  color: var(--text-light);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.key-box {
  background-color: var(--background-light); /* Darker background */
  border: 1px dashed var(--primary-color); /* Matches 5,5,5 */
  padding: var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  margin: var(--spacing-lg) 0;
  border-radius: var(--border-radius-sm);
  word-break: break-all;
  color: var(--text-dark);
  text-align: left;
  overflow-x: auto;
}