/* SafeZone unified visual theme. Keep this file lightweight so old pages stay stable. */
:root {
  --sz-bg: #090604;
  --sz-bg-2: #170d07;
  --sz-panel: rgba(24, 15, 9, .94);
  --sz-panel-soft: rgba(42, 27, 16, .76);
  --sz-card: rgba(255, 235, 179, .06);
  --sz-line: rgba(233, 185, 95, .34);
  --sz-line-soft: rgba(255, 232, 174, .16);
  --sz-gold: #f4c56a;
  --sz-gold-2: #ffe2a3;
  --sz-cream: #fff4cf;
  --sz-muted: #c9b28d;
  --sz-blue: #8bd8ff;
  --sz-red: #e4573d;
  --sz-green: #64d184;
  --sz-shadow: 0 24px 80px rgba(0, 0, 0, .58);
}

html,
body {
  min-height: 100%;
}

body {
  color: var(--sz-cream) !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(219, 151, 53, .22), transparent 30%),
    radial-gradient(circle at 85% 3%, rgba(116, 69, 255, .17), transparent 28%),
    radial-gradient(circle at 65% 95%, rgba(18, 120, 106, .18), transparent 26%),
    linear-gradient(135deg, var(--sz-bg) 0%, var(--sz-bg-2) 45%, #050403 100%) !important;
  background-attachment: fixed !important;
  font-family: Sarabun, Tahoma, Arial, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 0 38%, rgba(0,0,0,.48) 94%);
  background-size: 74px 74px, 74px 74px, 100% 100%;
}

body > * {
  position: relative;
  z-index: 1;
}

a {
  color: var(--sz-gold);
}

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

.btn,
button,
.ui.button {
  border-radius: 14px !important;
  font-weight: 800 !important;
}

.btn-dark,
.btn-primary,
.ui.primary.button,
.ui.blue.button {
  border: 1px solid rgba(255, 232, 174, .28) !important;
  background: linear-gradient(135deg, #ffe7ab, #f4c56a 48%, #b9792d) !important;
  color: #170b03 !important;
  box-shadow: 0 14px 34px rgba(244, 197, 106, .16) !important;
}

.btn-secondary,
.btn-default,
.ui.button:not(.primary):not(.negative):not(.red) {
  border: 1px solid rgba(233, 185, 95, .26) !important;
  background: rgba(0, 0, 0, .24) !important;
  color: var(--sz-cream) !important;
}

.btn-danger,
.ui.negative.button,
.ui.red.button {
  border: 1px solid rgba(228, 87, 61, .52) !important;
  background: linear-gradient(135deg, #ff8b79, #bd483a) !important;
  color: #fff !important;
}

.card,
.panel,
.box,
.well,
.ui.segment,
.ui.card,
.fxt-content,
.sf-form-card,
.sf-hero-card,
.rz-brand-card,
.rz-logout-card,
.rz-user-strip,
.rz-player-card,
.aa-panel {
  border: 1px solid var(--sz-line) !important;
  background: linear-gradient(145deg, var(--sz-panel), rgba(8, 5, 3, .9)) !important;
  color: var(--sz-cream) !important;
  box-shadow: var(--sz-shadow), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.card-header,
.box-header,
.panel-heading,
.ui.header,
h1,
h2,
h3,
h4 {
  color: var(--sz-gold-2) !important;
}

p,
small,
.text-muted,
.muted,
.help-block,
.form-text {
  color: var(--sz-muted) !important;
}

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
.ui.input > input {
  border: 1px solid rgba(233, 185, 95, .32) !important;
  background: rgba(5, 4, 3, .72) !important;
  color: var(--sz-cream) !important;
  border-radius: 14px !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus,
.ui.input > input:focus {
  border-color: var(--sz-gold) !important;
  box-shadow: 0 0 0 4px rgba(244, 197, 106, .12) !important;
}

table,
.table,
.dataTable {
  color: var(--sz-cream) !important;
}

.table th,
.table td,
table th,
table td {
  border-color: rgba(255, 232, 174, .16) !important;
}

.table-striped tbody tr:nth-of-type(odd),
table.dataTable tbody tr {
  background-color: rgba(255, 235, 179, .04) !important;
}

.alert {
  border-radius: 16px !important;
  border-color: rgba(233, 185, 95, .32) !important;
  background: rgba(244, 197, 106, .10) !important;
  color: var(--sz-cream) !important;
}

.fxt-sizemax {
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.fxt-sizemax .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px !important;
}

@media (max-width: 720px) {
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .btn,
  .ui.button {
    white-space: normal !important;
  }
}