:root{
  --wine-900:#4A0408;
  --wine-800:#5F060C;
  --wine-700:#7A0A12;
  --wine-600:#A70808;

  --blush-100:#F6E7E8;
  --ink-900:#0E0E10;
  --muted:#6b7280;

  --shadow: 0 18px 55px rgba(14,14,16,.08);
}

body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink-900); background:#fff; }
.radius-18{ border-radius:18px; }
.divider{ height:1px; background: rgba(0,0,0,.08); }

.portal-bg{
  background: linear-gradient(180deg, rgba(246,231,232,.55), #fff);
  min-height:100vh;
}

.portal-topbar{
  background: var(--wine-900);
  color:#fff;
  padding: 10px 0;
}

.brand-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--wine-600);
  box-shadow: 0 0 0 4px rgba(167,8,8,.25);
}

.brand-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  background: rgba(95,6,12,.08);
  border: 1px solid rgba(95,6,12,.18);
  color: var(--wine-800);
  font-weight:700;
  font-size:13px;
}

.form-control{
  border-radius:14px;
  min-height:48px;
  border:1px solid rgba(0,0,0,.12);
}
.form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(95,6,12,.12);
  border-color: rgba(95,6,12,.35);
}

.btn-brand{
  background: var(--wine-800);
  border:1px solid var(--wine-800);
  color:#fff;
  border-radius:999px;
  padding: 12px 16px;
  transition: .2s ease;
}
.btn-brand:hover{
  background: var(--wine-700);
  border-color: var(--wine-700);
  transform: translateY(-1px);
  color:#fff;
}

.btn-soft{
  background: rgba(95,6,12,.08);
  border: 1px solid rgba(95,6,12,.15);
  color: var(--wine-800);
  border-radius:999px;
  padding: 12px 16px;
  transition:.2s ease;
}
.btn-soft:hover{
  background: rgba(95,6,12,.12);
  transform: translateY(-1px);
  color: var(--wine-900);
}