@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap");

:root,
.dark {
  --bg: #090909 !important;
  --bg2: #111 !important;
  --text: #f7f7f7 !important;
  --text2: #c9c9c9 !important;
  --text3: #858585 !important;
  --panel: rgba(20, 20, 20, .78) !important;
  --panel-2: rgba(255, 255, 255, .055) !important;
  --glass: rgba(20, 20, 20, .72) !important;
  --glass-border: rgba(255, 255, 255, .115) !important;
  --card: rgba(17, 17, 17, .76) !important;
  --card-hover: rgba(34, 34, 34, .74) !important;
  --border: rgba(255, 255, 255, .105) !important;
  --input-bg: rgba(255, 255, 255, .055) !important;
  --switch-bg: rgba(255, 255, 255, .08) !important;
  --seg-active: #2f2f2f !important;
  --seg-bg: #141414 !important;
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  --shadow-panel: 0 30px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  --accent: #f4f4f4;
  --accent-hi: #fff;
  --accent-lo: #c8c8c8;
  --accent-rgb: 244, 244, 244;
  --accent-2: var(--accent) !important;
  --success: #f4f4f4 !important;
  --danger: #ff5f5f !important;
  --line: rgba(255, 255, 255, .1) !important;
  --line-strong: rgba(var(--accent-rgb), .5) !important;
  --muted: #9b9b9b !important;
}

html,
body {
  background: #090909 !important;
}

body,
button,
input,
textarea,
select {
  font-family: "Manrope", "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

.app-shell,
.auth-shell {
  background:
    radial-gradient(900px 540px at 76% -10%, rgba(var(--accent-rgb), .11), transparent 60%),
    radial-gradient(680px 520px at 10% 14%, rgba(255, 255, 255, .055), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 46px),
    linear-gradient(45deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 46px),
    #090909 !important;
  background-size: auto, auto, 46px 46px, 46px 46px, auto;
  background-attachment: fixed;
}

.app-main {
  padding: 26px 30px 30px 4px !important;
}

.sidebar {
  width: 274px !important;
  margin: 16px !important;
  border-radius: 24px !important;
  background: rgba(14, 14, 14, .82) !important;
  border-color: rgba(255, 255, 255, .105) !important;
  box-shadow: 0 26px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
}

.brand-mark,
.auth-logo-tile,
.sidebar-user-avatar {
  background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)) !important;
  color: #050505 !important;
  box-shadow: 0 16px 38px rgba(var(--accent-rgb), .18) !important;
}

.sidebar-user-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

.sidebar-brand-copy strong,
.page-header h2,
.auth-card-header h2,
.auth-showcase h1 {
  color: #fff !important;
  letter-spacing: -.04em !important;
}

.sidebar-brand-copy span,
.sidebar-section-title,
.page-subtitle,
.theme-color-label {
  color: #7c7c7c !important;
  letter-spacing: .06em !important;
}

.nav-item {
  min-height: 44px !important;
  border-radius: 14px !important;
  color: #b9b9b9 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  padding: 11px 13px !important;
}

.nav-item svg {
  color: #d8d8d8 !important;
  stroke-width: 2.4 !important;
}

.nav-item:hover {
  transform: none !important;
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

.nav-item.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .11)) !important;
  border-color: rgba(var(--accent-rgb), .34) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px rgba(var(--accent-rgb), .08) !important;
}

.nav-item.active:after {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14) !important;
}

.sidebar-user {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}

.sidebar-user-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.sidebar-user-role {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.main-panel,
.glass-panel,
.panel,
.hero,
.auth-card,
.auth-showcase,
.modal-box,
.bottom-nav {
  border-radius: 22px !important;
  background: rgba(18, 18, 18, .74) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}

.stat-card {
  border-radius: 16px !important;
  background: rgba(18, 18, 18, .74) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(20px) !important;
  transition: transform .16s ease, border-color .16s ease !important;
}

.stat-card:hover {
  border-color: rgba(var(--accent-rgb), .25) !important;
}

.data-table thead,
.data-table tbody tr:hover td {
  background: #151515 !important;
}

.data-table th {
  color: #888 !important;
  letter-spacing: .06em !important;
  padding: 11px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.data-table td {
  color: #e9e9e9 !important;
  padding: 10px 10px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

.desktop-table-scroll {
  overflow-x: auto !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.desktop-table-scroll::-webkit-scrollbar {
  height: 6px !important;
}

.desktop-table-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 999px !important;
}

.desktop-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
}

.desktop-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

.hwid-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.hwid-modal-content {
  width: 100% !important;
  max-width: 500px !important;
  background: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  padding: 26px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  position: relative !important;
  z-index: 1000000 !important;
}

.btn,
.auth-submit,
.discord-btn,
.topbar-btn,
.mode-pill,
.tab,
.tab-button,
.act-btn {
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.btn-blue,
.button-primary,
.auth-submit,
.topbar-btn.active,
.mode-pill.active,
.tab.active,
.tab-button.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #050505 !important;
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), .14) !important;
}

.btn-ghost,
.button-secondary,
.topbar-btn,
.mode-pill,
.tab,
.tab-button,
.act-btn {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #d8d8d8 !important;
}

.btn-ghost:hover,
.button-secondary:hover,
.topbar-btn:hover,
.mode-pill:hover,
.tab:hover,
.tab-button:hover,
.act-btn:hover {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  transform: none !important;
}

.form-input,
.search,
.search-wrap,
input,
textarea,
select {
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .28) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #f5f5f5 !important;
}

.form-input:focus,
.search:focus,
.search-wrap:focus-within {
  border-color: rgba(var(--accent-rgb), .58) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12) !important;
}

.badge,
.role-badge,
[class*="badge-"] {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .09) !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, .14) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  line-height: 1.2 !important;
  font-size: 11px !important;
  box-sizing: border-box !important;
}

.badge-green,
.live-dot {
  color: var(--accent) !important;
}

.badge-purple {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.38) !important;
}

.badge-amber,
.balance-chip,
.shop-item-price {
  color: var(--accent) !important;
}

.balance-chip {
  background: rgba(255, 255, 255, .065) !important;
  border-color: rgba(var(--accent-rgb), .28) !important;
  border-radius: 999px !important;
}

.mini-swatch {
  border-radius: 8px !important;
}

.mini-swatch.active,
.color-input {
  border-color: var(--accent) !important;
}

.color-pick-text {
  color: #f5f5f5 !important;
}

.mobile-avatar,
.auth-feature-icon {
  background: rgba(var(--accent-rgb), .16) !important;
  color: var(--accent) !important;
}

.card,
.user-card,
.shop-item,
.mobile-data-card {
  background: rgba(18, 18, 18, .78) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  border-radius: 14px !important;
}

.card:hover,
.user-card:hover,
.shop-item:hover {
  transform: none !important;
  background: rgba(255, 255, 255, .075) !important;
}

.eyebrow {
  color: var(--accent) !important;
  letter-spacing: .08em !important;
}

.sub,
.panel-sub,
.footer,
.thin {
  color: #8a8a8a !important;
}

.auth-showcase:after,
.blob {
  display: none !important;
}

.toast {
  background: #fff !important;
  color: #050505 !important;
  box-shadow: none !important;
}

.noir-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  flex: 0 0 auto;
  color: currentColor;
}

.noir-nav-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  color: currentColor !important;
  opacity: .96;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .06));
}

.bottom-nav-icon .noir-nav-icon {
  width: 21px !important;
  height: 21px !important;
  flex-basis: 21px !important;
}

.shell {
  color: #f7f7f7 !important;
}

.title-wrap h1,
.panel-title {
  color: #fff !important;
  letter-spacing: -.03em !important;
}

label {
  color: #8b8b8b !important;
  letter-spacing: .08em !important;
}

.button {
  border-radius: 10px !important;
  box-shadow: none !important;
  letter-spacing: .02em !important;
}

.button:hover {
  transform: none !important;
}

.button-danger {
  background: rgba(255, 95, 95, .12) !important;
  border-color: rgba(255, 95, 95, .22) !important;
  color: #ffb4b4 !important;
}

.table-wrap {
  border-radius: 14px !important;
  background: #0c0c0c !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

table {
  background: #0c0c0c !important;
}

th,
td {
  border-color: rgba(255, 255, 255, .08) !important;
}

th {
  background: #151515 !important;
  color: #8b8b8b !important;
  letter-spacing: .08em !important;
}

tr:hover td {
  background: #171717 !important;
}

code {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

.loading,
.empty-state,
.muted {
  color: #8d8d8d !important;
}

.error {
  background: rgba(255, 95, 95, .1) !important;
  border-color: rgba(255, 95, 95, .22) !important;
  color: #ffb4b4 !important;
}

.verdict {
  border-radius: 14px !important;
  background: #101010 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
}

.verdict .state {
  color: #fff !important;
  letter-spacing: -.02em !important;
}

.verdict .details {
  color: #aaa !important;
}

.verdict.accepted {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(var(--accent-rgb), .3) !important;
}

.verdict.rejected {
  background: rgba(255, 95, 95, .08) !important;
  border-color: rgba(255, 95, 95, .26) !important;
}

.verdict.review,
.verdict.yellow,
.verdict.orange,
.verdict.paused {
  background: rgba(var(--accent-rgb), .09) !important;
  border-color: rgba(var(--accent-rgb), .26) !important;
}

.verdict .match-block {
  border-top-color: rgba(255, 255, 255, .1) !important;
}

.verdict .match-title {
  color: #8b8b8b !important;
  letter-spacing: .08em !important;
}

.nick,
.owner-notice {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

.fact-grid {
  color: #bdbdbd !important;
}

.fact-grid .label {
  color: #8b8b8b !important;
}

.fact-grid .ok {
  color: #f4f4f4 !important;
}

.fact-grid .bad {
  color: #ff7777 !important;
}

.status-chip {
  background: #151515 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #bdbdbd !important;
}

.page-enter {
  gap: 16px !important;
}

.page-header {
  margin-bottom: 14px !important;
}

.page-header h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  line-height: .9 !important;
  letter-spacing: -.05em !important;
}

.page-subtitle {
  margin-top: 6px !important;
  font-size: 13px !important;
}

/* --- PROFILE PAGE STYLING --- */
.noir-profile-page {
  gap: 20px !important;
}

.noir-profile-card {
  border-radius: 20px !important;
  background: rgba(18, 18, 18, .78) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  padding: 24px 28px !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
}

.noir-profile-card > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

.noir-profile-card img[alt] {
  width: 72px !important;
  height: 72px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3) !important;
}

.noir-profile-card > div > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.noir-profile-card > div > div:last-child .stat-card {
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.noir-profile-stats {
  margin-top: 10px !important;
}

.noir-history-card {
  border-radius: 20px !important;
  background: rgba(18, 18, 18, .78) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  padding: 24px 28px !important;
  margin-top: 10px !important;
}

@media (max-width: 768px) {
  .app-main,
  .mobile-main {
    padding: 58px 12px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .bottom-nav {
    border-radius: 16px !important;
    background: #101010 !important;
  }

  .page-header h2 {
    font-size: 34px !important;
  }

  .noir-profile-card > div {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .noir-profile-card > div > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
  }
}
* { scrollbar-width: none !important; -ms-overflow-style: none !important; } ::-webkit-scrollbar { width: 0px !important; height: 0px !important; display: none !important; }

/* IFRAME SCROLL FIX */
iframe {
  width: 100% !important;
  height: calc(100vh - 60px) !important;
  min-height: calc(100vh - 60px) !important;
  border: none !important;
  display: block !important;
  border-radius: 24px !important;
}

.app-main {
  padding-bottom: 80px !important;
}