body {
  margin: 0;
  font-family: Arial, sans-serif;
  background:
    linear-gradient(rgba(8, 0, 20, 0.55), rgba(8, 0, 20, 0.62)),
    url("/images/senafix-bg.png") no-repeat center center fixed !important;
  background-size: cover !important;
  background-color: #0b0415;
  color: #111;
}

/* Main cards / panels */
.card,
.login-card,
.signup-card,
.form-card,
.wrap > .card,
.panel,
.box,
.stats-card {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 20px !important;
  color: #fff !important;
}

/* Inputs */
input,
select,
textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  outline: none;
  box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.72) !important;
}

/* Buttons */
button,
.btn,
input[type="submit"] {
  background: linear-gradient(135deg, #5b21b6, #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(91, 33, 182, 0.35) !important;
}

button:hover,
.btn:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  opacity: 0.96;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border-radius: 16px !important;
  overflow: hidden;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align: left;
}

/* Links */
a {
  color: #d8b4fe !important;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
label,
strong,
p,
span,
td,
th {
  color: inherit !important;
}

/* Login / signup special center card */
.auth-card,
.login-card,
.signup-card {
  max-width: 460px;
  margin: 60px auto;
  padding: 30px;
}

/* Small stat cards */
.grid .card,
.stats .card {
  min-height: 90px;
}

/* Mobile */
@media (max-width: 900px) {
  body {
    background-size: cover !important;
    background-attachment: scroll !important;
  }

  .wrap {
    padding: 14px !important;
  }

  .card,
  .login-card,
  .signup-card,
  .form-card {
    border-radius: 18px !important;
  }
}


/* === SENAFIX VISIBILITY FIX START === */

/* Background */
body {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Top page title */
.wrap > h1,
.page-title,
.top-title,
h1.page-title {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65) !important;
}

/* Nav links */
.wrap a,
nav a,
.nav a,
.menu a {
  color: #f5f5f5 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45) !important;
}

/* Glass cards */
.card,
.glass,
.panel,
.stats-card {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
}

/* Card headings and normal text */
.card h1, .card h2, .card h3, .card h4,
.card strong, .card label, .card p, .card div, .card span,
.glass h1, .glass h2, .glass h3, .glass h4,
.glass strong, .glass label, .glass p, .glass div, .glass span {
  color: #ffffff !important;
}

/* Inputs inside cards */
.card input,
.card textarea,
.card select,
.glass input,
.glass textarea,
.glass select,
input,
textarea,
select {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.75) !important;
}

/* Tables inside cards */
.card table,
.card th,
.card td,
.glass table,
.glass th,
.glass td {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* Status badges */
.badge {
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: none !important;
}

.badge.active {
  background: #22c55e !important;
  color: #052e16 !important;
}

.badge.inactive {
  background: #f59e0b !important;
  color: #3b2200 !important;
}

/* Buttons */
button,
.btn {
  font-weight: 700 !important;
}

/* Slightly better mobile readability */
@media (max-width: 700px) {
  .card,
  .glass,
  .panel,
  .stats-card {
    background: rgba(255,255,255,0.20) !important;
  }
}

/* === SENAFIX VISIBILITY FIX END === */


/* === LOGIN TOP BADGE FIX START === */
.portal-badge,
.auth-badge,
.top-badge,
.eyebrow,
.pill,
.badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f6e7b0, #f1d37a) !important;
  color: #4a2a00 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  text-shadow: none !important;
}

/* If the login page badge has no special class, this helps small labels too */
.auth-card span,
.login-card span {
  text-shadow: none;
}
/* === LOGIN TOP BADGE FIX END === */


/* === DASHBOARD MOBILE + TABLE POLISH START === */

.wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 24px !important;
}

.wrap > h1 {
  color: #ffffff !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.75) !important;
  font-size: 34px !important;
  margin-bottom: 18px !important;
}

.grid {
  gap: 16px !important;
}

.grid .card {
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.card {
  overflow: hidden !important;
}

.card h2 {
  font-size: 26px !important;
  margin-bottom: 18px !important;
}

.card p {
  line-height: 1.5 !important;
}

.table-wrap,
.table-scroll {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

table {
  min-width: 760px !important;
}

th {
  font-weight: 800 !important;
  background: rgba(255,255,255,0.10) !important;
}

td, th {
  white-space: nowrap !important;
}

input[readonly] {
  cursor: copy !important;
}

.whatsapp-btn {
  background: #22c55e !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(34,197,94,0.30) !important;
}

@media (max-width: 700px) {
  .wrap {
    padding: 14px !important;
  }

  .wrap > h1 {
    font-size: 24px !important;
    margin-top: 12px !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
  }

  .grid .card {
    min-height: 88px !important;
  }

  .card {
    padding: 18px !important;
  }

  .card h2 {
    font-size: 22px !important;
  }

  button,
  .btn,
  .whatsapp-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* === DASHBOARD MOBILE + TABLE POLISH END === */

/* === ADMIN STATUS BADGE FIX START === */
.badge,
span.badge,
td .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 64px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: lowercase !important;
  text-shadow: none !important;
}

.badge.active,
span.active,
td span.active {
  background: #22c55e !important;
  color: #052e16 !important;
}

.badge.inactive,
span.inactive,
td span.inactive {
  background: #f59e0b !important;
  color: #3b2200 !important;
}
/* === ADMIN STATUS BADGE FIX END === */

/* === SIGNUP BADGE + REFERRER VIVID COLORS START === */

.pill,
.free-join-badge {
  background: linear-gradient(135deg, #ffb000, #ff6a00) !important;
  color: #1b0b00 !important;
  font-weight: 900 !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 10px 28px rgba(255, 106, 0, 0.35) !important;
  text-shadow: none !important;
}

#referrerBox,
.ref-box {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 26px rgba(22, 163, 74, 0.32) !important;
  text-shadow: none !important;
}

#referrerError,
.ref-error {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 26px rgba(220, 38, 38, 0.28) !important;
  text-shadow: none !important;
}

/* === SIGNUP BADGE + REFERRER VIVID COLORS END === */

/* === SENAFIX MOBILE + TREE UPGRADE START === */

* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.wrap {
  width: 100%;
}

.card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.table-scroll,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Better buttons globally */
button,
.btn,
a.btn {
  border-radius: 12px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

/* Tree UI */
.tree-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}

.tree-toolbar input {
  flex: 1;
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(50,18,79,0.18);
}

.tree-toolbar button {
  padding: 12px 16px;
  background: #32124f;
  color: #fff;
  border: none;
}

.tree-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.tree-children {
  margin-left: 22px;
  padding-left: 18px;
  border-left: 3px solid rgba(109,40,217,0.22);
}

.tree-branch {
  margin: 12px 0;
}

.tree-branch summary {
  list-style: none;
}

.tree-branch summary::-webkit-details-marker {
  display: none;
}

.tree-node-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(50,18,79,0.13);
  border-left: 7px solid #f59e0b;
  border-radius: 18px;
  padding: 15px;
  box-shadow: 0 12px 30px rgba(17,24,39,0.09);
  transition: 0.2s ease;
}

.tree-node-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(17,24,39,0.12);
}

.tree-node-card.active {
  border-left-color: #16a34a;
}

.tree-node-card.inactive {
  border-left-color: #f59e0b;
}

.tree-node-card.blocked {
  border-left-color: #dc2626;
}

.tree-node-top {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 7px;
}

.tree-node-name {
  font-weight: 950;
  font-size: 16px;
  color: #111827;
}

.tree-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.tree-badge.active {
  background: #dcfce7;
  color: #166534;
}

.tree-badge.inactive {
  background: #fef3c7;
  color: #92400e;
}

.tree-badge.blocked {
  background: #fee2e2;
  color: #991b1b;
}

.tree-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.tree-meta-item {
  background: rgba(50,18,79,0.055);
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.tree-meta-item strong {
  display: block;
  color: #32124f;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.tree-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tree-actions a,
.tree-actions span {
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  background: #32124f;
  color: #fff;
}

.tree-actions span {
  background: #f59e0b;
  color: #1b0b00;
}

/* Phone layout */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
    background-position: center top !important;
  }

  .wrap {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .card {
    padding: 15px !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
  }

  h1 {
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important;
  }

  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .actions button,
  .actions a {
    width: 100% !important;
    text-align: center !important;
  }

  table {
    min-width: 850px !important;
  }

  th,
  td {
    font-size: 13px !important;
    padding: 9px !important;
  }

  .tree-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tree-toolbar input,
  .tree-toolbar button {
    width: 100%;
  }

  .tree-children {
    margin-left: 8px;
    padding-left: 12px;
  }

  .tree-node-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px;
  }

  .tree-actions {
    justify-content: stretch;
  }

  .tree-actions a,
  .tree-actions span {
    width: 100%;
    text-align: center;
  }

  .tree-meta {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 430px) {
  .wrap {
    padding: 9px !important;
  }

  .card {
    padding: 13px !important;
  }

  .tree-meta {
    grid-template-columns: 1fr;
  }

  table {
    min-width: 760px !important;
  }
}

/* === SENAFIX MOBILE + TREE UPGRADE END === */

/* === TREE READABILITY FIX === */

.tree-node-card {
  background: linear-gradient(135deg, rgba(35, 22, 48, 0.96), rgba(67, 50, 80, 0.94)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-left-width: 7px !important;
  color: #ffffff !important;
}

.tree-node-card.active {
  border-left-color: #22c55e !important;
}

.tree-node-card.inactive {
  border-left-color: #f59e0b !important;
}

.tree-node-card.blocked {
  border-left-color: #ef4444 !important;
}

.tree-node-name {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.tree-meta-item {
  background: rgba(255,255,255,0.11) !important;
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffffff !important;
}

.tree-meta-item strong {
  color: #fbbf24 !important;
}

.tree-actions a {
  background: #3b0764 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.18);
}

.tree-actions span {
  background: #f59e0b !important;
  color: #1b0b00 !important;
}

.tree-toolbar input {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

.tree-toolbar input::placeholder {
  color: rgba(255,255,255,0.75) !important;
}

.tree-toolbar button {
  background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

.tree-children {
  border-left-color: rgba(124,58,237,0.55) !important;
}

@media (max-width: 768px) {
  .tree-node-card {
    background: linear-gradient(135deg, rgba(35, 22, 48, 0.98), rgba(67, 50, 80, 0.96)) !important;
  }

  .tree-meta-item {
    font-size: 13px !important;
  }
}

/* === TREE READABILITY FIX END === */

/* === AFFILIATE PHONE TREE UPGRADE === */

.affiliate-tree-card {
  margin-top: 18px;
}

.tree-summary-mobile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.tree-summary-mobile > div {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 13px;
  border-radius: 16px;
}

.tree-summary-mobile strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 5px;
}

.tree-summary-mobile span {
  color: #ffffff;
  font-weight: 900;
  word-break: break-word;
}

.empty-tree {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 18px;
  color: #ffffff;
}

.empty-tree p {
  margin-bottom: 0;
  color: rgba(255,255,255,0.78);
}

@media (max-width: 768px) {
  .affiliate-tree-card {
    margin-top: 12px;
  }

  .tree-summary-mobile {
    grid-template-columns: 1fr;
  }

  .tree-node-card {
    grid-template-columns: 1fr !important;
  }

  .tree-node-top {
    gap: 6px !important;
  }

  .tree-node-name {
    width: 100%;
    font-size: 15px !important;
  }

  .tree-badge {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  .tree-meta {
    grid-template-columns: 1fr !important;
  }

  .tree-meta-item {
    word-break: break-word;
  }

  .tree-actions {
    width: 100%;
  }

  .tree-actions span {
    width: 100%;
  }
}

/* === AFFILIATE PHONE TREE UPGRADE END === */