:root {
  --bg-main: #121214;
  --bg-card: #1a1a1e;
  --bg-card-alt: #161619;
  --accent-gold: #d4af37;
  --accent-gold-hover: #b8962e;
  --text-primary: #e2e2e5;
  --text-muted: #a0a0a5;
  --border: #2a2a30;
  --radius: 6px;
  --transition: all 0.3s ease-in-out;
  --danger: #c45c5c;
  --success: #5a9a6e;
}

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

body.monolithic-app {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: "Inter", "SF Pro Display", "Montserrat", system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-gold);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-gold-hover);
}

/* Header / navbar */
.monolithic-navbar {
  background-color: var(--bg-card-alt);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.monolithic-navbar .brand {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
}

.monolithic-navbar .easter-egg {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}

/* Cards */
.monolithic-app .card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: var(--transition);
}

.monolithic-app .card:hover {
  border-color: #33333a;
}

.panel-heading {
  font-weight: 600;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
}

.text-muted {
  color: var(--text-muted) !important;
}

/* Forms */
.monolithic-app .form-label {
  color: var(--text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.monolithic-app .form-control {
  background-color: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 0.625rem 0.875rem;
  transition: var(--transition);
}

.monolithic-app .form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.monolithic-app .form-control:focus {
  background-color: var(--bg-card-alt);
  border-color: var(--accent-gold);
  color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}

.monolithic-app .form-control:disabled {
  background-color: var(--bg-card-alt);
  opacity: 0.6;
}

.monolithic-app input[type="file"].form-control {
  padding: 0.5rem 0.75rem;
}

.monolithic-app input[type="file"].form-control::file-selector-button {
  background-color: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  margin-right: 0.75rem;
  transition: var(--transition);
}

.monolithic-app input[type="file"].form-control::file-selector-button:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

/* Buttons */
.monolithic-app .btn {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.625rem 1.25rem;
  transition: var(--transition);
}

.monolithic-app .btn-action {
  background-color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  color: var(--bg-main);
}

.monolithic-app .btn-action:hover,
.monolithic-app .btn-action:focus {
  background-color: var(--accent-gold-hover);
  border-color: var(--accent-gold-hover);
  color: var(--bg-main);
}

.monolithic-app .btn-action:disabled {
  background-color: var(--accent-gold-hover);
  border-color: var(--accent-gold-hover);
  color: var(--bg-main);
  opacity: 0.7;
}

.monolithic-app .btn-outline-secondary {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.monolithic-app .btn-outline-secondary:hover,
.monolithic-app .btn-outline-secondary:focus {
  background-color: var(--bg-card);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

/* Alerts / panels */
.monolithic-alert {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left-width: 3px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.monolithic-alert-danger {
  border-left-color: var(--danger);
}

.monolithic-alert-success {
  border-left-color: var(--success);
}

.monolithic-alert .alert-title {
  font-weight: 600;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.monolithic-alert hr {
  border-color: var(--border);
  opacity: 1;
  margin: 1rem 0;
}

/* Result / log panel */
.result-panel {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.result-panel .result-title {
  font-weight: 600;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.result-panel ul {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

/* Spinner */
.monolithic-app .spinner-gold {
  border-color: var(--accent-gold);
  border-right-color: transparent;
}