@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-primary:   #070a0d;
  --bg:           #070a0d;
  --bg-secondary: #0b1015;
  --bg-card:      #101820;
  --bg-card2:     #14202a;
  --bg-hover:     #172530;
  --surface:      rgba(148,163,184,0.06);
  --surface-2:    rgba(148,163,184,0.10);
  --accent:       #14b8a6;
  --accent-hover: #0f766e;
  --accent-light: #5eead4;
  --accent-dim:   rgba(20,184,166,0.12);
  --accent-dim2:  rgba(20,184,166,0.22);
  --accent-2:     #0ea5e9;
  --cyan:         #38bdf8;
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,0.12);
  --red:          #fb7185;
  --yellow:       #f59e0b;
  --yellow-dim:   rgba(245,158,11,0.15);
  --text-primary: #f5f8fb;
  --text:         #f5f8fb;
  --text-secondary: #b9c5d1;
  --text-muted:   #8091a3;
  --text-dim:     #536475;
  --border:       rgba(148,163,184,0.14);
  --border-2:     rgba(148,163,184,0.24);
  --border-light: rgba(148,163,184,0.08);
  --radius:       8px;
  --radius-sm:    6px;
  --radius-lg:    8px;
  --grad-primary: linear-gradient(135deg, #0f766e, #0ea5e9);
  --ease:         cubic-bezier(.22,.61,.36,1);
}

* {
  letter-spacing: 0 !important;
}

body {
  font-family: 'IBM Plex Sans Hebrew', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: #070a0d !important;
  background-image:
    radial-gradient(ellipse 70% 52% at 18% 0%, rgba(20,184,166,0.14), transparent 60%),
    radial-gradient(ellipse 64% 50% at 84% 10%, rgba(14,165,233,0.10), transparent 58%),
    radial-gradient(ellipse 54% 42% at 50% 100%, rgba(245,158,11,0.07), transparent 54%) !important;
  color: var(--text-primary) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(20,184,166,.52) !important;
  outline-offset: 3px;
  border-radius: 8px;
}

.nav,
.legal-nav,
.sidebar {
  background: rgba(7,10,13,.86) !important;
  border-color: var(--border) !important;
  backdrop-filter: blur(18px) saturate(120%);
}

.brand-mark,
.verify-icon-wrap,
.vbtn-primary,
.btn-primary,
.btn-auth,
.version-badge,
.nav-item.active {
  background: linear-gradient(135deg, #0f766e, #0ea5e9) !important;
  color: #fff !important;
}

.brand-mark,
.logo-icon,
.legal-logo-mark,
.verify-card img[alt="PropEdge"] {
  filter: drop-shadow(0 8px 18px rgba(20,184,166,.26)) !important;
}

.auth-logo .logo-icon img {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}

.logo-text,
.verify-title,
.auth-logo h1,
h1 {
  background: linear-gradient(90deg, #fff 0%, #5eead4 58%, #fbbf24 140%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.card,
.legal-card,
.verify-card,
.auth-card,
.timeline-card,
.faq-item,
.step-card,
.changelog-card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.24) !important;
}

.card:hover,
.legal-card:hover,
.timeline-card:hover,
.faq-item:hover {
  border-color: rgba(20,184,166,.30) !important;
}

.hero-badge,
.legal-eyebrow,
.pill,
.nav-link {
  border-color: rgba(20,184,166,.28) !important;
  background: rgba(20,184,166,.10) !important;
  color: #99f6e4 !important;
}

.nav-link:hover,
.back-link:hover,
a:hover {
  color: var(--accent-light) !important;
}

h2::before,
.timeline::before {
  background: linear-gradient(180deg, var(--accent), var(--cyan), var(--yellow)) !important;
}

.btn,
.vbtn,
.btn-auth,
.form-input,
input,
select,
textarea {
  border-radius: 8px !important;
}

.btn-primary,
.vbtn-primary,
.btn-auth {
  box-shadow: 0 12px 28px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.btn-ghost,
.vbtn-ghost {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text-primary) !important;
}

.form-input,
input,
select,
textarea {
  background: rgba(7,10,13,.58) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,.18) !important;
}

.card-value,
.timeline-date,
.timeline-value,
.version-badge {
  font-variant-numeric: tabular-nums;
}

.verify-shell::before {
  background: linear-gradient(135deg, rgba(20,184,166,.34), rgba(14,165,233,.20), rgba(245,158,11,.16)) !important;
}

.verify-icon-wrap.success,
.pill.ok {
  background: rgba(34,197,94,.12) !important;
  color: #86efac !important;
}

.verify-icon-wrap.error {
  background: rgba(251,113,133,.14) !important;
  color: #fecdd3 !important;
}

.main {
  background: transparent !important;
}

@media (max-width: 820px) {
  .main {
    margin-right: 0 !important;
    padding-inline: 22px !important;
  }

  h1 {
    font-size: 36px !important;
  }
}

/* Black Label public pages layer */
:root {
  --bg-primary:   #04060a;
  --bg:           #04060a;
  --bg-secondary: #080c13;
  --bg-card:      #0d1320;
  --bg-card2:     #121b2b;
  --bg-hover:     #192437;
  --surface:      rgba(248,250,252,0.055);
  --surface-2:    rgba(248,250,252,0.095);
  --accent:       #f59e0b;
  --accent-hover: #d97706;
  --accent-light: #fbbf24;
  --accent-dim:   rgba(245,158,11,0.13);
  --accent-dim2:  rgba(245,158,11,0.24);
  --accent-2:     #F7B731;
  --cyan:         #22d3ee;
  --green:        #14f195;
  --red:          #ff4d6d;
  --yellow:       #fbbf24;
  --text-primary: #f8fafc;
  --text:         #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted:   #8a99ad;
  --text-dim:     #56657a;
  --border:       rgba(148,163,184,0.18);
  --border-2:     rgba(248,250,252,0.28);
  --border-light: rgba(148,163,184,0.10);
  --radius:       6px;
  --radius-sm:    4px;
  --radius-lg:    6px;
  --grad-primary: linear-gradient(135deg, #f59e0b, #fbbf24 48%, #F7B731 125%);
}

body {
  background-color: #04060a !important;
  background-image:
    linear-gradient(115deg, rgba(245,158,11,.09) 0 1px, transparent 1px 26px),
    linear-gradient(90deg, rgba(34,211,238,.055) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #04060a 0%, #070b12 42%, #04060a 100%) !important;
}

.nav,
.legal-nav,
.sidebar {
  background: rgba(4,6,10,.90) !important;
  border-color: rgba(245,158,11,.18) !important;
}

.brand-mark,
.verify-icon-wrap,
.vbtn-primary,
.btn-primary,
.btn-auth,
.version-badge,
.nav-item.active {
  background: linear-gradient(135deg, #f59e0b, #fbbf24 48%, #F7B731 125%) !important;
  color: #111827 !important;
}

.brand-mark,
.logo-icon,
.legal-logo-mark,
.verify-card img[alt="PropEdge"] {
  filter: drop-shadow(0 12px 24px rgba(245,158,11,.24)) drop-shadow(0 0 14px rgba(34,211,238,.18)) !important;
}

.logo-text,
.verify-title,
.auth-logo h1,
h1 {
  background: linear-gradient(90deg, #fff 0%, #fef3c7 38%, #f59e0b 70%, #22d3ee 128%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.card,
.legal-card,
.verify-card,
.auth-card,
.timeline-card,
.faq-item,
.step-card,
.changelog-card {
  border-radius: 6px !important;
  background:
    linear-gradient(135deg, rgba(245,158,11,.095), transparent 28%),
    linear-gradient(315deg, rgba(34,211,238,.06), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.016)) !important;
  border-color: rgba(248,250,252,.16) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.card:hover,
.legal-card:hover,
.timeline-card:hover,
.faq-item:hover {
  border-color: rgba(245,158,11,.42) !important;
}

.hero-badge,
.legal-eyebrow,
.pill,
.nav-link {
  border-radius: 5px !important;
  border-color: rgba(245,158,11,.34) !important;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(247,183,49,.12)) !important;
  color: #fef3c7 !important;
}

h2::before,
.timeline::before {
  background: linear-gradient(180deg, var(--accent), var(--cyan), var(--accent-2)) !important;
}

.btn,
.vbtn,
.btn-auth,
.form-input,
input,
select,
textarea {
  border-radius: 5px !important;
}

.btn-primary,
.vbtn-primary,
.btn-auth {
  box-shadow: 0 16px 38px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.btn-ghost,
.vbtn-ghost {
  background: rgba(248,250,252,.075) !important;
  border-color: rgba(248,250,252,.20) !important;
}

.form-input,
input,
select,
textarea {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  border-color: rgba(248,250,252,.18) !important;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-light) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.18), 0 0 28px rgba(245,158,11,.10) !important;
}