:root {
  /* Colors - Material Design Dark Theme inspired */
  --background: #04000f;
  --bg-gradient-dark: linear-gradient(20deg, rgba(4, 0, 15, 1) 0%, rgba(133, 0, 97, 1) 86%, rgba(199, 44, 155, 1) 100%);
  --surface: #1e1e1e;
  --primary: #bb86fc;
  --primary-variant: #3700b3;
  --secondary: #03dac6;
  --error: #cf6679;
  --on-background: #e0e0e0;
  --on-surface: #e0e0e0;
  --on-primary: #000000;
  --on-secondary: #000000;
  --input-bg: #2c2c2c;
  --border-color: #333333;

  /* Spacing & Layout */
  --radius: 8px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --max-width: 900px;
}

/* Light theme overrides (applies when html has `light-theme` class) */
html.light-theme {
  --background: #c72c9b;
  --bg-gradient-light: linear-gradient(20deg, rgba(199, 44, 155, 1) 0%, rgba(255, 224, 245, 1) 44%, rgba(255, 255, 255, 1) 100%);
  --surface: #ffffff;
  --primary: #6200ee;
  --primary-variant: #3700b3;
  --secondary: #018786;
  --error: #b00020;
  --on-background: #121212;
  --on-surface: #121212;
  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --input-bg: #f0f0f0;
  --border-color: #e0e0e0;
}

/* Smooth theme transitions */
html, body { height: 100%; }
body {
  transition: color 0.2s ease;
  position: relative;
}

/* Cross-fade background layers using pseudo-elements */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

/* dark layer (default) */
body::before {
  background: var(--bg-gradient-dark, #04000f);
  opacity: 1;
}

/* light layer (fades in for light theme) */
body::after {
  background: var(--bg-gradient-light, #ffffff);
  opacity: 0;
}

/* When light theme active, fade layers */
html.light-theme body::before { opacity: 0; }
html.light-theme body::after { opacity: 1; }

/* Theme toggle button */
#themeToggle {
  background: #00000033;
  border: 1px solid var(--border-color);
  color: var(--on-surface);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

#themeToggle:hover {
  filter: brightness(1.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--background);
  color: var(--on-background);
  font-family: 'Roboto Mono', monospace;
  /* Keep the hacker/code vibe */
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

/* Page Layout */
.pageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--spacing-md);
}

.master_container {
  width: 100%;
  max-width: var(--max-width);
  margin-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Head / Header */
.head_container_master {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.head_container_master a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  color: var(--on-background);
}

.head_container_master img {
  height: 48px;
  width: auto;
}

.head_container_master h1 {
  margin: 0;
  font-size: 1.8rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Containers (Cards) */
.create_container_master,
.docs_container_master,
.footer_container_master {
  background-color: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
}

h2,
h4 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--primary);
}

/* Forms */
.createForm {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.createForm label {
  display: block;
  font-size: 0.9rem;
  color: var(--on-surface);
  margin-bottom: var(--spacing-sm);
  opacity: 0.8;
}

.createForm textarea,
.createForm input,
.createForm input:not([type]),
/* Fallback for inputs without type */
.createForm select {
  width: 100%;
  background-color: var(--input-bg);
  color: var(--on-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.createForm textarea:focus,
.createForm input[type="text"]:focus,
.createForm input:not([type]):focus,
.createForm select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.2);
}

.createForm textarea {
  min-height: 300px;
  resize: vertical;
}

/* Form Rows (Flex for desktop, stacked for mobile) */
.createFormPropertyRow {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

@media (min-width: 600px) {
  .createFormPropertyRow {
    flex-direction: row;
    align-items: center;
  }

  .createFormPropertyRowLeft {
    width: 200px;
    flex-shrink: 0;
  }

  .createFormPropertyRowRight {
    flex-grow: 1;
  }

  .createForm label {
    margin-bottom: 0;
    /* remove bottom margin in row layout */
  }
}

/* Buttons */
.createForm input[type=submit],
.createForm input[type=button] {
  background-color: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius);
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.1s, filter 0.2s;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.createForm input[type=submit]:hover,
.createForm input[type=button]:hover {
  filter: brightness(1.1);
}

.createForm input[type=submit]:active,
.createForm input[type=button]:active {
  transform: scale(0.98);
}

.createFormSubmitWrapper {
  margin-top: var(--spacing-md);
}

/* Footer */
.footer_container_master {
  background-color: transparent;
  /* Seamless footer */
  box-shadow: none;
  border: none;
  text-align: center;
  opacity: 0.7;
  padding-top: 0;
}

.footer_container_master h2,
.footer_container_master h4 {
  color: var(--on-surface);
  font-size: 1rem;
}

/* Utilities / Overrides */
#hiddenIcon {
  color: var(--secondary);
}

/* SweetAlert overrides */
.swal-modal {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
}

.swal-title {
  color: var(--on-surface);
}

.swal-text {
  color: var(--on-surface);
}

.swal-button {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
}