/* REDBOT / REDFLAG visual layer. Existing behaviour and markup stay intact. */
:root {
  --bg: #0a0b0e;
  --surface: #15171b;
  --surface-raised: #1c1f24;
  --surface-soft: #23262b;
  --line: #34383e;
  --line-strong: #51565c;
  --text: #f4f5f6;
  --muted: #b7b9bd;
  --faint: #92969d;
  --red: #aa1827;
  --red-bright: #f04455;
  --red-soft: #39151d;
  --bone: #d8dbe0;
  --green: #68d7a5;
  --green-soft: #18372d;
  --radius: 15px;
  --shadow: 0 18px 38px rgba(0,0,0,.35);
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

html { scrollbar-color: #666a70 var(--bg); }
body {
  background: radial-gradient(ellipse 100% 490px at 50% 0, #2b1017 0%, transparent 75%), var(--bg);
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
body::after { display: none; }
::selection { background: #a82231; color: white; }

.hero {
  height: clamp(222px, 43vw, 288px);
  border-bottom: 1px solid #6e2932;
  background: #101114;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  z-index: 1;
  background: linear-gradient(#3b0d15, #e32f41 54%, #50131e);
  box-shadow: 2px 0 18px rgba(223,32,54,.35);
}
.hero-art {
  object-position: 66% 32%;
  filter: contrast(1.08) brightness(.85);
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(8,9,12,.91) 0%, rgba(9,10,13,.65) 38%, rgba(10,10,12,.08) 76%),
    linear-gradient(0deg, #0a0b0e 0%, transparent 52%),
    linear-gradient(145deg, transparent 58%, rgba(170,21,37,.12));
}
.brand { gap: 16px; bottom: 43px; }
.brand-avatar {
  width: 63px;
  height: 63px;
  border-radius: 13px;
  border: 1px solid #93969b;
  box-shadow: 0 0 0 4px rgba(11,12,15,.72), 0 12px 25px rgba(0,0,0,.5);
}
.brand h1 { line-height: 1; }
.brand-wordmark {
  display: block;
  width: clamp(190px, 52vw, 272px);
  height: auto;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,.75));
}
.brand p { margin-top: 9px; color: #d7d8da; font-size: 12px; letter-spacing: .015em; }
.hero-status {
  top: 17px;
  left: max(18px, calc((100% - 720px)/2 + 18px));
  padding: 8px 11px;
  border: 1px solid rgba(215,218,222,.23);
  border-radius: 999px;
  background: rgba(12,14,17,.76);
  color: #e3e5e7;
  font-size: 11px;
  letter-spacing: .025em;
  backdrop-filter: blur(10px);
}
.live-dot { box-shadow: 0 0 0 3px rgba(104,215,165,.12); }
#refresh {
  top: 17px;
  border-color: rgba(215,218,222,.35);
  border-radius: 11px;
  background: rgba(15,17,20,.78);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
#refresh:hover { border-color: #c4c7cc; background: #272a2f; }

main { padding: 20px 15px 30px; }
.discord-panel {
  margin: -51px 0 20px;
  padding: 15px;
  border: 1px solid #595e65;
  border-radius: 15px;
  background: linear-gradient(120deg, #24272d 0%, #17191e 58%, #14161a 100%);
  box-shadow: 0 19px 33px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.11);
}
.discord-mark { background: #323746; color: #d5d9f4; border: 1px solid #596078; }
.discord-label { color: #b1b5bd; }
.discord-panel strong { color: #f9fafb; }
.discord-panel button, .role-control button {
  border: 1px solid #818895;
  background: #393f4d;
  color: white;
  box-shadow: inset 0 1px rgba(255,255,255,.13);
}

.stats {
  margin-bottom: 23px;
  border-color: #454a51;
  background: linear-gradient(180deg,#23262b,#15171b);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 27px rgba(0,0,0,.2);
}
.stats div { padding: 17px 9px 16px; }
.stats div + div::before { background: #454a51; }
.stats strong { font-size: 27px; font-weight: 760; color: white; }
.stats span { font-size: 11px; color: #bdc0c5; }

.card, .quick-claim, .status-panel, .referrals-panel, .calculator-panel, .service-card, .user-card {
  border-color: #393e45;
  border-radius: 15px;
  background: linear-gradient(155deg,#1b1e23 0%,#14161a 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.18);
}
.card, .user-card { margin-bottom: 15px; }
.card-body, .quick-claim, .status-panel, .referrals-panel, .calculator-panel, .service-card, .user-card { padding: 18px; }
.profit-image { background: #101114; border-bottom-color: #454950; }
.row h2, .quick-claim h2, .section-heading h2, .services-title h2, .users-panel > h2 {
  color: #f7f8f9;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.012em;
}
.row h2 { line-height: 1.25; }
.value { color: #ff6674; font-weight: 750; }
.steam { color: #b5b8be; }
.owner, .referral-audit, .status-item, .access-row, .referral-people { border-color: #393d43; }
.tag, .user-badge, .service-state { border: 1px solid rgba(255,255,255,.12); }
.tag.green, .user-badge.approved, .service-state.active { border-color: #2b7658; }
.tag.orange, .user-badge.outside { border-color: #855f2b; }
.claim, .quick-claim button, .calculator-input-row button {
  min-height: 43px;
  border: 1px solid #f05d69;
  border-radius: 10px;
  background: linear-gradient(180deg,#c52c3c,#941722);
  box-shadow: inset 0 1px rgba(255,255,255,.17), 0 5px 12px rgba(115,12,26,.19);
  color: #fff;
  font-weight: 750;
  transition: filter .18s ease, transform .18s ease;
}
.claim:hover:not(:disabled), .quick-claim button:hover:not(:disabled), .calculator-input-row button:hover:not(:disabled) { filter: brightness(1.12); }
.claim.secondary { box-shadow: none; border-color: #60656c; background: #282b30; color: #edf0f2; }
input, select { accent-color: var(--red-bright); }
.quick-claim input, .calculator-input-row input, .role-control select {
  border-color: #51565e;
  background: #0e1013;
  color: white;
}
.quick-claim input::placeholder, .calculator-input-row input::placeholder { color: #a1a4aa; }

.referral-code-card, .referral-rules div, .referral-stats div, .calculator-results div {
  border-color: #444950;
  background: #111317;
}
.referral-code-card strong, .calculator-results strong { color: #f1f3f5; }
.referral-code-card button { border-color: #a04550; color: #ffb4bc; }
.service-actions button, .access-toggle { border-color: #51565e; background: #25282e; }
.service-actions button[data-service-action="start"], .access-toggle.on { border-color: #2b7658; }
.service-actions button[data-service-action="stop"] { border-color: #96434b; }
.delete-profit, .danger-actions button { border-color: #9a424d; }
.user-avatar, .user-head img { border-radius: 11px; }

#main-nav {
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 7px;
  gap: 2px;
  border: 1px solid #555a62;
  border-radius: 17px;
  background: rgba(23,25,29,.98);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.62);
}
#main-nav button {
  min-height: 60px;
  border-radius: 11px;
  color: #b7bac0;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
#main-nav button svg { width: 21px; height: 21px; }
#main-nav button.active {
  color: #fff;
  background: linear-gradient(180deg,#55212b,#38171e);
  box-shadow: inset 0 1px rgba(255,255,255,.1), inset 0 -2px #e74658;
}
#main-nav button.active svg { color: #ff8b98; }
#main-nav button:hover:not(.active) { background: #292d33; color: white; }

button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #ff8290; outline-offset: 2px; }
button:disabled { cursor: not-allowed; }
.loading::before { background: linear-gradient(90deg,#24272c,#565b62,#24272c); background-size: 200% 100%; }

@media (max-width: 420px) {
  .hero { height: 228px; }
  .hero-art { object-position: 50% 32%; }
  .brand { bottom: 45px; }
  .brand-avatar { width: 56px; height: 56px; }
  .brand-wordmark { width: clamp(188px, 53vw, 225px); }
  .brand p { font-size: 11px; }
  .discord-panel { grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; padding: 12px; }
  .discord-mark { width: 38px; height: 38px; }
  .discord-panel button { padding: 9px; }
  .stats span { font-size: 10px; }
  .card-body, .quick-claim, .status-panel, .referrals-panel, .calculator-panel, .service-card, .user-card { padding: 16px; }
}

@media (min-width: 760px) {
  .hero { height: 288px; }
  .brand { bottom: 69px; }
  .brand-avatar { width: 70px; height: 70px; }
  .brand-wordmark { width: 280px; }
  .discord-panel { margin-top: -57px; }
}