:root {
  /* Base size: 14px */
  font-size: 14px;

  /* Colors in OKLCH */
  --color-primary: oklch(63% 0.12 240);
  --color-primary-dark: oklch(53% 0.12 240);
  --color-white: oklch(100% 0 0);
  --color-black: oklch(0% 0 0);
  --color-text-dark: oklch(25% 0 0);
  --color-border: oklch(87% 0 0);
  --color-bg-gray: oklch(92% 0 0);
  --color-disabled: oklch(50% 0 0);
  --color-terminal-bg: oklch(15% 0.02 0);
  --color-terminal-text: oklch(85% 0.15 145);
  --color-error-bg: oklch(70% 0.15 25 / 0.4);
  --color-selection: oklch(60% 0.15 250 / 0.3);
  --color-progress-text: oklch(40% 0 0);

  /* Rainbow gradient colors */
  --rainbow-crimson: oklch(55% 0.22 350);
  --rainbow-magenta: oklch(60% 0.18 320);
  --rainbow-purple: oklch(65% 0.2 280);
  --rainbow-blue: oklch(60% 0.18 240);
  --rainbow-azure: oklch(65% 0.18 220);
  --rainbow-cyan: oklch(65% 0.16 200);
  --rainbow-teal: oklch(65% 0.14 180);
  --rainbow-mint: oklch(65% 0.14 160);
  --rainbow-green: oklch(70% 0.12 140);
  --rainbow-coral: oklch(75% 0.15 20);
  --rainbow-pink: oklch(60% 0.2 340);

  /* Spacing (multiples of 14px = 1rem) */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-base: 1rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border radius */
  --border-radius: 0.25rem;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Transitions */
  --transition-fast: 0.3s;
  --transition-slow: 0.8s;
}

body {
  margin: 0;
  padding: var(--spacing-sm);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
}

/* =============================================================================
   dlAssets Page
   ============================================================================= */
.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.container h1 {
  color: var(--color-text-dark);
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1;
}

/* Input wrapper and highlighting */
.input-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

#highlightLayer {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  padding: 0;
  font-family: monospace;
  font-size: var(--font-size-base);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  pointer-events: none;
  color: var(--color-black);
  z-index: 1;
}

#numberInput {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 14rem;
  padding: var(--spacing-base);
  font-family: monospace;
  font-size: var(--font-size-base);
  line-height: 1.5;
  border: 0.2rem solid var(--color-border);
  border-radius: var(--border-radius);
  resize: vertical;
  background-color: transparent;
  caret-color: var(--color-black);
  z-index: 2;
}

#numberInput::selection {
  background-color: var(--color-selection);
}

#numberInput:focus {
  outline: none;
  border-color: var(--color-primary);
}

.invalid-text {
  background-color: var(--color-error-bg);
  padding: 0.2rem 0;
}

/* Progress bar */
.progress-container {
  width: 100%;
  overflow: hidden;
  transition: all 300ms;
  height: 0px;
  padding: 0px;
}

.progress-container.active {
  height: 5rem;
}

.progress-bar-wrapper {
  width: 100%;
  height: 2rem;
  background-color: var(--color-bg-gray);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  width: 0%;
  transition: width var(--transition-fast) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.progress-text {
  margin-top: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-progress-text);
  text-align: center;
}

/* =============================================================================
   Download Button (Shared)
   ============================================================================= */
.button-bar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.download-button {
  flex: 1;
  background: linear-gradient(45deg, var(--color-primary-dark), var(--color-primary));
  background-position: 0% 50%;
  color: var(--color-white);
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  cursor: pointer;
}

.download-button::before {
  content: '⬇ ';
  font-size: 1em;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 2s ease;
  background-size: 100% 10%;
  width: 100%;
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 0 0 var(--color-primary-dark);
}
.download-button:hover,
.download-button:focus {
  background: linear-gradient(
    45deg,
    var(--rainbow-crimson),
    var(--rainbow-magenta),
    var(--rainbow-purple),
    var(--rainbow-blue),
    var(--rainbow-azure),
    var(--rainbow-cyan),
    var(--rainbow-teal),
    var(--rainbow-mint),
    var(--rainbow-green),
    var(--rainbow-coral),
    var(--rainbow-pink)
  );
  background-size: 400% 100%;
  border-radius: 1rem;
  animation: rainbow-shift 3s ease-in-out infinite;
  outline: 0.2rem solid var(--color-primary);
}
.download-button:active {
  transform: scale(0.98);
}
.download-button:disabled {
  background: var(--color-disabled);
  padding: 0.2rem;
  color: var(--color-white);
}
@keyframes rainbow-shift {
  0%,
  100% {
    background-position: 0% 50%;
    border-radius: var(--border-radius);
    outline: 0 solid var(--color-white);
  }
  50% {
    background-position: 100% 10%;
  }
}

/* Status terminal */
#statusBox {
  width: 100%;
  box-sizing: border-box;
  min-height: 22rem;
  max-height: 36rem;
  background-color: var(--color-terminal-bg);
  color: var(--color-terminal-text);
  text-shadow: 0 0.1rem 0.25rem oklch(50% 0.15 145 / 0.5);
  padding: 1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius);
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#statusBox .errorlogline {
  color: oklch(64% 0.25 28.5);
}