/* ==========================================
   DONASI HUB SAHABAT KITA — UI v1.1
   ========================================== */

:root {
  --primary    : #166534;
  --primary-dk : #14532d;
  --primary-md : #16a34a;
  --primary-lt : #dcfce7;
  --primary-xs : #f0fdf4;
  --border     : #e5e7eb;
  --border-dk  : #d1d5db;
  --text-main  : #111827;
  --text-sub   : #6b7280;
  --text-xs    : #9ca3af;
  --bg-page    : #f3f4f6;
  --bg-card    : #ffffff;
  --sidebar-w  : 240px;
  --topbar-h   : 56px;
  --radius     : 10px;
  --shadow-sm  : 0 1px 2px rgba(0,0,0,.05);
  --shadow-md  : 0 4px 12px rgba(0,0,0,.08);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size   : 14px;
  background  : var(--bg-page);
  color       : var(--text-main);
  margin      : 0;
  -webkit-font-smoothing: antialiased;
}

/* ── TOPBAR ─────────────────────────────── */
.topbar {
  position        : fixed;
  top             : 0; left: 0; right: 0;
  height          : var(--topbar-h);
  background      : var(--primary);
  display         : flex;
  align-items     : center;
  padding         : 0 20px;
  z-index         : 1040;
  box-shadow      : 0 1px 4px rgba(0,0,0,.2);
}

.topbar .brand {
  color           : #fff;
  font-weight     : 700;
  font-size       : .95rem;
  letter-spacing  : -.01em;
  text-decoration : none;
  display         : flex;
  align-items     : center;
  gap             : 10px;
}

.topbar .brand-icon {
  width           : 30px;
  height          : 30px;
  background      : rgba(255,255,255,.15);
  border-radius   : 7px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : .85rem;
  flex-shrink     : 0;
}

/* Logo gambar di topbar — proporsional, tinggi tetap */
.topbar .brand-logo {
  height          : 28px;
  width           : auto;
  max-width       : 120px;
  object-fit      : contain;
  object-position : left center;
  border-radius   : 4px;
  display         : block;
  flex-shrink     : 0;
}

/* Preview area di halaman settings */
.logo-preview-wrap {
  background      : var(--primary);
  border-radius   : 8px;
  padding         : 10px 16px;
}

.logo-preview-topbar {
  display         : flex;
  align-items     : center;
  gap             : 10px;
}

.logo-preview-img {
  height          : 28px;
  width           : auto;
  max-width       : 120px;
  object-fit      : contain;
  object-position : left center;
  border-radius   : 4px;
  display         : block;
}

.brand-icon-demo {
  width           : 30px;
  height          : 30px;
  background      : rgba(255,255,255,.15);
  border-radius   : 7px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : .85rem;
  color           : #fff;
  flex-shrink     : 0;
}

.logo-preview-appname {
  color           : #fff;
  font-weight     : 700;
  font-size       : .9rem;
  letter-spacing  : -.01em;
}

.topbar-right {
  margin-left : auto;
  display     : flex;
  align-items : center;
  gap         : 14px;
}

.topbar-date {
  color       : rgba(255,255,255,.55);
  font-size   : 12px;
}

.topbar-user {
  position    : relative;
}

.user-btn {
  background  : rgba(255,255,255,.12);
  border      : 1px solid rgba(255,255,255,.25);
  color       : #fff;
  padding     : 5px 12px;
  border-radius: 7px;
  cursor      : pointer;
  font-size   : 13px;
  font-weight : 500;
  display     : flex;
  align-items : center;
  gap         : 7px;
  transition  : background .15s;
}

.user-btn:hover { background: rgba(255,255,255,.2); }

.user-dropdown {
  position    : absolute;
  right       : 0;
  top         : calc(100% + 8px);
  background  : #fff;
  border      : 1px solid var(--border);
  border-radius: var(--radius);
  min-width   : 180px;
  box-shadow  : var(--shadow-md);
  z-index     : 999;
  overflow    : hidden;
}

.user-dropdown-header {
  padding     : 10px 14px;
  font-size   : 11px;
  color       : var(--text-xs);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.user-dropdown a {
  display     : block;
  padding     : 9px 14px;
  color       : var(--text-main);
  text-decoration: none;
  font-size   : 13px;
  transition  : background .1s;
}

.user-dropdown a:hover { background: var(--bg-page); }
.user-dropdown a.danger { color: #dc2626; }
.user-dropdown a.danger:hover { background: #fef2f2; }

/* ── APP LAYOUT ──────────────────────────── */
.app-wrap {
  display     : flex;
  padding-top : var(--topbar-h);
  min-height  : 100vh;
}

/* ── SIDEBAR ─────────────────────────────── */
.sidebar {
  width         : var(--sidebar-w);
  background    : #fff;
  border-right  : 1px solid var(--border);
  position      : sticky;
  top           : var(--topbar-h);
  height        : calc(100vh - var(--topbar-h));
  display       : flex;
  flex-direction: column;
  overflow-y    : auto;
  flex-shrink   : 0;
  scrollbar-width: thin;
}

.sidebar-section {
  padding     : 14px 14px 4px;
}

.sidebar-section-label {
  font-size   : 10.5px;
  font-weight : 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color       : var(--text-xs);
}

.sidebar .nav-menu {
  list-style  : none;
  padding     : 4px 0;
  margin      : 0;
}

.sidebar .nav-link {
  display     : flex;
  align-items : center;
  gap         : 9px;
  padding     : 8px 12px;
  margin      : 1px 8px;
  color       : #374151;
  border-radius: 7px;
  font-weight : 500;
  cursor      : pointer;
  transition  : all .12s;
  text-decoration: none;
  font-size   : 13.5px;
}

.sidebar .nav-link:hover {
  background  : var(--primary-xs);
  color       : var(--primary);
}

.sidebar .nav-link.active {
  background  : var(--primary-lt);
  color       : var(--primary);
  font-weight : 600;
}

.sidebar .nav-link .nav-icon {
  width       : 16px;
  text-align  : center;
  font-size   : 13px;
  flex-shrink : 0;
  opacity     : .65;
  color       : inherit;
}

.sidebar .nav-link.active .nav-icon { opacity: 1; }

.sidebar-divider {
  height      : 1px;
  background  : var(--border);
  margin      : 6px 14px;
}

.sidebar-footer {
  margin-top  : auto;
  padding     : 12px 14px;
  border-top  : 1px solid var(--border);
}

.sidebar-user {
  display     : flex;
  align-items : center;
  gap         : 10px;
}

.avatar {
  width           : 32px;
  height          : 32px;
  background      : var(--primary);
  color           : #fff;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-weight     : 700;
  font-size       : 12px;
  flex-shrink     : 0;
}

.avatar-lg {
  width     : 56px;
  height    : 56px;
  font-size : 1.3rem;
}

/* ── MAIN CONTENT ────────────────────────── */
main.main-content {
  flex         : 1;
  padding      : 28px 28px 40px;
  overflow-x   : hidden;
  min-width    : 0;
}

/* ── PAGE HEADER ─────────────────────────── */
.page-header { margin-bottom: 22px; }

.page-title {
  font-size   : 1.35rem;
  font-weight : 700;
  color       : var(--text-main);
  margin      : 0;
  letter-spacing: -.02em;
}

.page-subtitle {
  color       : var(--text-sub);
  font-size   : 13px;
  margin      : 3px 0 0;
}

.breadcrumb {
  font-size   : 13px;
  margin-bottom: 4px;
  padding     : 0;
  background  : none;
}

.breadcrumb-item + .breadcrumb-item::before { content: '/'; padding: 0 6px; color: var(--text-xs); }
.breadcrumb-item a { color: var(--primary); text-decoration: none; }
.breadcrumb-item.active { color: var(--text-sub); }

/* ── CARDS ───────────────────────────────── */
.card {
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-sm);
}

.card-header {
  padding       : 14px 18px;
  border-bottom : 1px solid var(--border);
  font-weight   : 600;
  font-size     : 13.5px;
  background    : var(--bg-card);
  border-radius : var(--radius) var(--radius) 0 0;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  color         : var(--text-main);
}

.card-body { padding: 18px; }

.card-footer {
  padding       : 12px 18px;
  border-top    : 1px solid var(--border);
  background    : var(--bg-card);
  border-radius : 0 0 var(--radius) var(--radius);
}

/* ── KPI CARDS ───────────────────────────── */
.kpi-card {
  border-radius : var(--radius);
  padding       : 20px;
  color         : #fff;
  position      : relative;
  overflow      : hidden;
}

.kpi-card .kpi-bg-icon {
  position      : absolute;
  right         : 14px;
  top           : 14px;
  font-size     : 2rem;
  opacity       : .12;
}

.kpi-card .kpi-label {
  font-size     : 11px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity       : .85;
}

.kpi-card .kpi-value {
  font-size     : 1.55rem;
  font-weight   : 700;
  line-height   : 1.2;
  margin-top    : 6px;
  letter-spacing: -.02em;
}

.kpi-card .kpi-sub {
  font-size     : 12px;
  opacity       : .75;
  margin-top    : 4px;
}

.kpi-green  { background: linear-gradient(135deg, #166534, #16a34a); }
.kpi-blue   { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.kpi-amber  { background: linear-gradient(135deg, #92400e, #d97706); }
.kpi-violet { background: linear-gradient(135deg, #5b21b6, #7c3aed); }

/* ── TABLES ──────────────────────────────── */
.table {
  width         : 100%;
  border-collapse: collapse;
  font-size     : 13.5px;
}

.table th {
  font-size     : 11px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color         : var(--text-sub);
  background    : #f9fafb;
  padding       : 10px 12px;
  white-space   : nowrap;
  border-bottom : 1px solid var(--border);
}

.table td {
  padding       : 10px 12px;
  vertical-align: middle;
  border-bottom : 1px solid #f3f4f6;
  color         : var(--text-main);
}

.table tbody tr:last-child td { border-bottom: none; }

.table-hover tbody tr:hover td { background: #fafafa; }

/* ── BADGES ──────────────────────────────── */
.badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 4px;
  padding       : 3px 9px;
  border-radius : 5px;
  font-size     : 11px;
  font-weight   : 600;
  letter-spacing: .02em;
  white-space   : nowrap;
}

.badge-verified  { background: #dcfce7; color: #166534; }
.badge-pending   { background: #fef3c7; color: #92400e; }
.badge-failed    { background: #fee2e2; color: #991b1b; }
.badge-cancelled { background: #f3f4f6; color: #4b5563; }
.badge-refunded  { background: #e0f2fe; color: #075985; }

.badge-new     { background: #dbeafe; color: #1e40af; }
.badge-repeat  { background: #dcfce7; color: #166534; }
.badge-loyal   { background: #fef3c7; color: #92400e; }
.badge-dormant { background: #f3f4f6; color: #6b7280; }

/* ── BUTTONS ─────────────────────────────── */
.btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 6px;
  padding         : 7px 14px;
  border-radius   : 7px;
  font-size       : 13.5px;
  font-weight     : 500;
  cursor          : pointer;
  border          : 1px solid transparent;
  transition      : all .12s;
  text-decoration : none;
  white-space     : nowrap;
}

.btn-primary,
.btn-primary-green {
  background  : var(--primary);
  border-color: var(--primary);
  color       : #fff;
}
.btn-primary:hover,
.btn-primary-green:hover {
  background  : var(--primary-dk);
  border-color: var(--primary-dk);
  color       : #fff;
}
.bg-primary-green {
  background-color: var(--primary) !important;
}
.text-primary-green {
  color: var(--primary) !important;
}

.btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; color: #fff; }

.btn-danger  { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger:hover  { background: #b91c1c; color: #fff; }

.btn-warning { background: #d97706; border-color: #d97706; color: #fff; }
.btn-warning:hover { background: #b45309; color: #fff; }

.btn-outline-primary {
  background  : transparent;
  border-color: var(--primary);
  color       : var(--primary);
}
.btn-outline-primary:hover {
  background  : var(--primary-lt);
  color       : var(--primary);
}

.btn-outline-secondary {
  background  : transparent;
  border-color: var(--border-dk);
  color       : #374151;
}
.btn-outline-secondary:hover { background: #f3f4f6; }

.btn-outline-danger {
  background  : transparent;
  border-color: #fca5a5;
  color       : #dc2626;
}
.btn-outline-danger:hover { background: #fee2e2; }

.btn-outline-success {
  background  : transparent;
  border-color: #86efac;
  color       : #166534;
}
.btn-outline-success:hover { background: #dcfce7; }

.btn-outline-warning {
  background  : transparent;
  border-color: #fcd34d;
  color       : #92400e;
}
.btn-outline-warning:hover { background: #fef3c7; }

.btn-sm  { padding: 5px 10px; font-size: 12.5px; border-radius: 6px; }
.btn-lg  { padding: 10px 20px; font-size: 15px; }
.btn-xs  { padding: 3px 8px; font-size: 11.5px; border-radius: 5px; }
.btn-icon{ padding: 6px 8px; }

.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── FORMS ───────────────────────────────── */
.form-label {
  font-weight : 500;
  font-size   : 13px;
  color       : #374151;
  display     : block;
  margin-bottom: 5px;
}

.form-control, .form-select {
  display     : block;
  width       : 100%;
  padding     : 8px 12px;
  font-size   : 14px;
  border      : 1px solid var(--border-dk);
  border-radius: 7px;
  background  : #fff;
  color       : var(--text-main);
  transition  : border-color .12s, box-shadow .12s;
  outline     : none;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow  : 0 0 0 3px rgba(22,101,52,.12);
}

textarea.form-control { resize: vertical; min-height: 70px; }

.input-group {
  display     : flex;
}

.input-group-text {
  padding     : 8px 12px;
  background  : #f9fafb;
  border      : 1px solid var(--border-dk);
  border-right: none;
  border-radius: 7px 0 0 7px;
  font-weight : 600;
  color       : var(--text-sub);
  font-size   : 14px;
}

.input-group .form-control {
  border-radius: 0 7px 7px 0;
}

.input-amount {
  font-size   : 1.15rem;
  font-weight : 600;
  text-align  : right;
}

/* ── LOGIN ───────────────────────────────── */
.login-page {
  min-height      : 100vh;
  width           : 100%;
  background      : linear-gradient(135deg, #052e16 0%, #166534 55%, #16a34a 100%);
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.login-card {
  background    : #fff;
  border-radius : 16px;
  padding       : 40px;
  width         : 100%;
  max-width     : 400px;
  box-shadow    : 0 24px 64px rgba(0,0,0,.22);
}

.login-logo {
  width           : 52px;
  height          : 52px;
  background      : var(--primary-lt);
  border-radius   : 12px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 1.5rem;
  color           : var(--primary);
  margin          : 0 auto 16px;
}

.login-title   { font-size: 1.4rem; font-weight: 700; color: var(--text-main); text-align: center; }
.login-tagline { color: var(--text-sub); font-size: 13px; text-align: center; margin-top: 4px; }

/* ── PROGRESS BAR ────────────────────────── */
.progress-wrap {
  background  : #e5e7eb;
  border-radius: 4px;
  height      : 7px;
  overflow    : hidden;
}

.progress-fill {
  height      : 100%;
  border-radius: 4px;
  background  : var(--primary);
  transition  : width .4s ease;
  min-width   : 2px;
}

.progress-fill-sm { background: var(--primary-md); }

/* ── STAT MINI ───────────────────────────── */
.stat-mini {
  background    : #f9fafb;
  border-radius : 8px;
  padding       : 10px 12px;
  text-align    : center;
}

.stat-mini .val {
  font-weight   : 700;
  font-size     : .95rem;
  color         : var(--text-main);
}

.stat-mini .lbl {
  font-size     : 10.5px;
  color         : var(--text-xs);
  margin-top    : 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── UPLOAD ZONE ─────────────────────────── */
.upload-zone {
  border        : 2px dashed var(--border-dk);
  border-radius : 10px;
  padding       : 28px;
  text-align    : center;
  cursor        : pointer;
  background    : #fafafa;
  transition    : all .15s;
}

.upload-zone:hover, .upload-zone.dragover {
  border-color  : var(--primary);
  background    : var(--primary-xs);
}

/* ── DONOR AVATAR ────────────────────────── */
.donatur-avatar {
  width           : 72px;
  height          : 72px;
  background      : var(--primary);
  color           : #fff;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 1.8rem;
  font-weight     : 700;
}

/* ── ALERTS ──────────────────────────────── */
.alert {
  padding       : 12px 16px;
  border-radius : 8px;
  font-size     : 13.5px;
  border        : 1px solid transparent;
  display       : flex;
  align-items   : flex-start;
  gap           : 10px;
}

.alert-success { background: #f0fdf4; border-color: #86efac; color: #166534; }
.alert-danger  { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.alert-info    { background: #f0f9ff; border-color: #7dd3fc; color: #0369a1; }

.alert-dismissible { position: relative; }
.alert-dismiss-btn {
  position    : absolute;
  right       : 12px;
  top         : 10px;
  background  : none;
  border      : none;
  cursor      : pointer;
  color       : inherit;
  opacity     : .5;
  font-size   : 16px;
  line-height : 1;
  padding     : 0;
}
.alert-dismiss-btn:hover { opacity: 1; }

/* ── CHART TABS ──────────────────────────── */
.chart-tabs {
  display     : flex;
  gap         : 4px;
}

.chart-tab {
  padding     : 4px 10px;
  border-radius: 6px;
  font-size   : 12px;
  font-weight : 500;
  cursor      : pointer;
  border      : 1px solid var(--border-dk);
  background  : #fff;
  color       : var(--text-sub);
  transition  : all .12s;
}

.chart-tab:hover  { background: #f3f4f6; }
.chart-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── PROOF THUMB ─────────────────────────── */
.proof-thumb {
  width         : 80px;
  height        : 60px;
  object-fit    : cover;
  border-radius : 6px;
  cursor        : pointer;
  border        : 1px solid var(--border);
  transition    : border-color .15s;
}

.proof-thumb:hover { border-color: var(--primary); }

/* ── PROGRAM OPTION ──────────────────────── */
.prog-opt {
  border        : 1px solid var(--border-dk);
  border-radius : 7px;
  padding       : 9px 10px;
  cursor        : pointer;
  transition    : all .12s;
}

.prog-opt:hover { background: var(--primary-xs); border-color: var(--primary); }
.prog-opt.selected { border: 2px solid var(--primary); background: var(--primary-lt); }

/* ── DONOR LOCKED BOX ────────────────────── */
.donatur-locked {
  background    : #f0fdf4;
  border        : 1px solid #86efac;
  border-radius : 8px;
  padding       : 12px 14px;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
}
.donatur-locked-avatar {
  width       : 40px;
  height      : 40px;
  border-radius: 50%;
  background  : var(--primary);
  color       : #fff;
  font-weight : 700;
  font-size   : 16px;
  display     : flex;
  align-items : center;
  justify-content: center;
  flex-shrink : 0;
}

/* ── MISC ────────────────────────────────── */
.text-success   { color: #166534 !important; }
.text-danger    { color: #dc2626 !important; }
.text-warning   { color: #d97706 !important; }
.text-muted     { color: var(--text-sub) !important; }
.text-xs        { color: var(--text-xs) !important; }
.fw-bold        { font-weight: 700 !important; }
.fw-semibold    { font-weight: 600 !important; }
.font-mono      { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: .9em; }

.gap-1 { gap: 4px; }  .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.d-flex { display: flex; } .align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; } .flex-grow-1 { flex: 1; }
.ms-auto { margin-left: auto; }
.w-100 { width: 100%; }
.mb-0 { margin-bottom: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.p-0 { padding: 0; } .px-3 { padding-left: 12px; padding-right: 12px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.text-center { text-align: center; } .text-end { text-align: right; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.border-bottom { border-bottom: 1px solid var(--border) !important; }
.border-top    { border-top: 1px solid var(--border) !important; }
.rounded-3 { border-radius: 8px !important; }
.bg-light { background: #f9fafb !important; }
.small { font-size: 12.5px !important; }
.me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position    : fixed;
    left        : -100%;
    top         : var(--topbar-h);
    z-index     : 1030;
    height      : calc(100vh - var(--topbar-h));
    transition  : left .25s;
  }
  .sidebar.open { left: 0; }
  main.main-content { padding: 16px; }
  .kpi-value { font-size: 1.2rem !important; }
}

/* ── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── PAGINATION ──────────────────────────── */
.pagination { display: flex; gap: 3px; list-style: none; padding: 0; margin: 0; }
.page-item .page-link {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-dk);
  font-size: 13px; color: var(--text-main); text-decoration: none; background: #fff;
  transition: all .1s;
}
.page-item .page-link:hover { background: #f3f4f6; }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-item.disabled .page-link { opacity: .4; cursor: not-allowed; }

/* ── MODAL ───────────────────────────────── */
.modal-content  { border-radius: 12px; border: 1px solid var(--border); }
.modal-header   { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-body     { padding: 20px; }
.modal-footer   { border-top: 1px solid var(--border); padding: 14px 20px; }
.modal-title    { font-weight: 700; font-size: 1rem; }

/* ── SEPARATOR ───────────────────────────── */
.or-divider {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  color: var(--text-xs); font-size: 12px;
}
.or-divider::before, .or-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}