.settings-form {
  display: flex;

  flex-direction: column;

  gap: 15px;
}

.settings-form label {
  color: #aaa;

  font-size: 14px;
}

.settings-form input {
  width: 100%;

  padding: 12px;

  background: #111933;

  border: none;

  border-radius: 10px;

  color: white;
}

.settings-btn {
  background: #dc2626;

  border: none;

  padding: 12px;

  border-radius: 10px;

  color: white;

  cursor: pointer;
}

.settings-btn:hover {
  background: #b91c1c;
}

.support-code {
  font-size: 28px;

  letter-spacing: 4px;

  text-align: center;

  background: #020617;

  padding: 20px;

  border-radius: 12px;

  color: #3b82f6;
}

.danger-box {
  border: 1px solid #dc2626;

  padding: 20px;

  border-radius: 12px;
}
/* =========================
   HUD PERSONALIZATION
========================= */

.hud-tool-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
}

.hud-option {
  display: flex;
  align-items: center;

  background: #0f172a;

  border: 1px solid #243047;
  border-radius: 12px;

  padding: 15px;

  cursor: pointer;

  color: white;

  transition: 0.2s ease;
}

.hud-option:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
}

.hud-option input {
  margin-right: 10px;

  width: 18px;
  height: 18px;
}

/* =========================
   HUD PREVIEW AREA
========================= */

.hud-preview-container {
  margin-top: 30px;
}

.hud-preview-header {
  font-size: 18px;

  font-weight: bold;

  margin-bottom: 15px;

  color: white;
}

.hud-preview-window {
  background: #0b132b;

  border: 1px solid #334155;

  border-radius: 16px;

  padding: 20px;

  min-height: 420px;

  position: relative;

  overflow: hidden;

  display: flex;

  flex-wrap: wrap;

  align-content: flex-start;

  gap: 15px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Preview title */

.hud-preview-window::before {
  content: "Ranch HUD Preview";

  position: absolute;

  top: 10px;

  left: 15px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 1px;
}

/* Empty state */

.preview-placeholder {
  width: 100%;

  text-align: center;

  color: #94a3b8;

  padding-top: 120px;

  font-style: italic;
}

/* Generated HUD Cards */

.preview-hud-item {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 12px;

  padding: 12px 18px;

  color: white;

  font-weight: 600;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

  transition: 0.2s ease;
}

.preview-hud-item:hover {
  transform: translateY(-3px);

  border-color: #3b82f6;
}

.preview-hud-item span {
  display: block;

  font-size: 12px;

  color: #94a3b8;

  margin-top: 4px;
}

/* =========================
   FUTURE TOP/BOTTOM HUD ZONES
========================= */

.preview-top-hud {
  width: 100%;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  padding-top: 25px;
}

.preview-bottom-hud {
  position: absolute;

  bottom: 15px;

  left: 15px;

  right: 15px;

  display: flex;

  justify-content: center;

  gap: 10px;
}
/* =========================
   HUD PREVIEW TOGGLE
========================= */

.hud-preview-toggle {
  display: flex;

  gap: 10px;

  margin-bottom: 15px;
}

.preview-mode-btn {
  background: #0f172a;

  border: 1px solid #334155;

  color: white;

  padding: 10px 18px;

  border-radius: 10px;

  cursor: pointer;

  transition: 0.2s ease;
}

.preview-mode-btn:hover {
  border-color: #3b82f6;
}

.preview-mode-btn.active {
  background: #2563eb;

  border-color: #2563eb;
}

/* =========================
   HUD PREVIEW WINDOW
========================= */

.hud-preview-window {
  background: #0b132b;

  border: 1px solid #334155;

  border-radius: 16px;

  padding: 20px;

  min-height: 420px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  transition: 0.3s ease;
}

/* Desktop Mode */

.hud-preview-window.desktop-mode {
  width: 100%;
}

/* Mobile Mode */

.hud-preview-window.mobile-mode {
  width: 390px;

  max-width: 100%;

  min-height: 600px;

  margin: auto;

  border-radius: 30px;

  border: 5px solid #020617;
}

/* =========================
   TOP HUD
========================= */

.preview-top-hud {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  padding-top: 25px;

  width: 100%;
}

/* =========================
   MAIN RANCH AREA
========================= */

.preview-main-area {
  height: 220px;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* =========================
   PLACEHOLDER
========================= */

.preview-placeholder {
  color: #94a3b8;

  text-align: center;

  font-style: italic;
}

/* =========================
   HUD CARDS
========================= */

.preview-hud-item {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 12px;

  padding: 12px 18px;

  color: white;

  font-weight: 600;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);

  transition: 0.2s ease;
}

.preview-hud-item:hover {
  transform: translateY(-3px);

  border-color: #3b82f6;
}

.preview-hud-item span {
  display: block;

  color: #94a3b8;

  font-size: 12px;

  margin-top: 4px;
}

/* =========================
   BOTTOM MOBILE HUD
========================= */

.preview-bottom-hud {
  position: absolute;

  bottom: 15px;

  left: 15px;

  right: 15px;

  display: flex;

  justify-content: center;

  gap: 10px;
}

.mobile-mode .preview-bottom-hud {
  background: #020617;

  padding: 12px;

  border-radius: 18px;

  border: 1px solid #334155;
}

/* Hide mobile bar on desktop preview */

.desktop-mode .preview-bottom-hud {
  display: none;
}
/* HUD BUILDER SLOT CONTROLS */

.hud-option-builder {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;
}

.hud-option-content {
  width: 100%;
}

.hud-option-title {
  color: white;

  font-weight: 600;

  margin-bottom: 8px;
}

.hud-slot-control {
  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  color: #94a3b8;
}

.hud-slot-select {
  background: #020617;

  border: 1px solid #334155;

  color: white;

  border-radius: 8px;

  padding: 5px 10px;
}