:root {
  --bg-dark: #1e1e2f;
  --bg-light: #282a36;
  --border-color: #44475a;
  --text-main: #f8f8f2;
  --text-secondary: #bd93f9;
  --text-accent: #6272a4;
  --accent-main: #50fa7b;
  --accent-hover: #44c868;
  --btn-bg: #bd93f9;
  --btn-hover: #a580e0;
  --btn-red: #ff5555;
  --btn-red-hover: #d64747;
  --btn-green: #50fa7b;
  --btn-green-hover: #44c868;
}

body {
  background-color: #121212;
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow-x: hidden;
  margin: 0;
  height: 100vh;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgba(255,255,255,0.05);

  /* Use base64-encoded image instead of external URL */
  -webkit-mask-image: url('data:image/png;base64,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'); 
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 48px 48px;

  pointer-events: none;
  z-index: -1;
}

/* First grid row */
body::before {
  -webkit-mask-position: 0 0;
}

/* Second grid row (staggered) */
body::after {
  -webkit-mask-position: 24px 24px; /* half of 48px to stagger */
}

textarea {
  resize: none !important;
}

.bg-dark {
  background-color: var(--bg-dark);
}

.bg-dark-light {
  background-color: var(--bg-light);
}

.border-dark {
  border-color: var(--border-color);
}

.text-indigo-custom {
  color: var(--text-secondary);
}

.text-indigo-custom-light {
  color: var(--text-accent);
}

.btn-indigo {
  background-color: var(--btn-bg);
  color: #1e1e2f;
  font-weight: 600;
}

.btn-indigo:hover {
  background-color: var(--btn-hover);
}

.btn-green {
  background-color: var(--btn-green);
  color: #1e1e2f;
  font-weight: 600;
}

.btn-green:hover {
  background-color: var(--btn-green-hover);
}

.btn-red {
  background-color: var(--btn-red);
  color: #1e1e2f;
  font-weight: 600;
}

.btn-red:hover {
  background-color: var(--btn-red-hover);
}

.tab-btn {
  cursor: pointer;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-accent);
  background-color: transparent;
  transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover {
  color: var(--text-main);
}

.tab-btn.active {
  color: var(--text-secondary);
  border-bottom-color: var(--text-secondary);
}

/* Remove outline/focus effect for tab buttons */
.tab-btn:focus {
  outline: none;
  box-shadow: none;
}

textarea::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

textarea::-webkit-scrollbar-thumb {
  background-color: var(--btn-bg);
  border-radius: 4px;
}

textarea,
input,
button {
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: 'IBM Plex Mono', monospace;
  transition: all 0.2s ease-in-out;
}

textarea:focus,
input:focus {
  outline: none;
  border-color: var(--text-secondary);
  box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.3);
  background-color: var(--bg-dark);
}

/* REMOVED: button:focus { outline: none; box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.4); } */
button:focus {
  outline: none;
  box-shadow: none; /* Explicitly remove any default focus shadow */
}

pre#verifyResult {
  background-color: var(--bg-dark-light);
  color: var(--accent-main);
}

.alert-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 50;
  width: 100%;
  max-width: 24rem;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translate(-50%, -100%);
  opacity: 0;
}

.alert-container.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.alert-success {
  background-color: #22c55e;
  color: #1a202c;
}

.alert-error {
  background-color: #ff5555;
  color: #1a202c;
}

.progress-bar-container {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: white;
  animation: progress-countdown 3s linear forwards;
}

@keyframes progress-countdown {
  from { width: 100%; }
  to { width: 0; }
}

input, textarea, select, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}