/* ===== Metbaber Design System — Phase 4 (v2, professional pass) ===== */

:root {
  /* Brand */
  --mb-red: #C8251E;
  --mb-red-dark: #9E1B16;
  --mb-red-darker: #7A140F;
  --mb-red-tint: #FBEAE9;
  --mb-red-tint-solid: #F7D9D7;

  /* Surfaces */
  --mb-cream: #FAF6F1;
  --mb-black: #171717;
  --mb-white: #FFFFFF;

  /* Status */
  --mb-success: #16A34A;
  --mb-success-tint: #DCFCE7;
  --mb-warning: #D97706;
  --mb-warning-tint: #FEF3C7;
  --mb-danger: #DC2626;
  --mb-danger-tint: #FBEAE9;
  --mb-info: #2563EB;
  --mb-info-tint: #DBEAFE;

  /* Neutrals */
  --mb-gray-900: #262626;
  --mb-gray-700: #404040;
  --mb-gray-600: #525252;
  --mb-gray-400: #A3A3A3;
  --mb-gray-300: #D4D4D4;
  --mb-gray-200: #E5E5E5;
  --mb-gray-100: #F5F5F5;

  /* Shape */
  --mb-radius-lg: 16px;
  --mb-radius: 12px;
  --mb-radius-sm: 8px;
  --mb-radius-xs: 6px;

  /* Elevation — layered shadows read as "professional" much more than a single flat one */
  --mb-shadow-xs: 0 1px 2px rgba(23,23,23,0.05);
  --mb-shadow-sm: 0 1px 2px rgba(23,23,23,0.04), 0 2px 6px rgba(23,23,23,0.06);
  --mb-shadow: 0 1px 2px rgba(23,23,23,0.04), 0 4px 12px rgba(23,23,23,0.08);
  --mb-shadow-lg: 0 4px 8px rgba(23,23,23,0.04), 0 12px 32px rgba(23,23,23,0.12);
  --mb-shadow-red: 0 4px 12px rgba(200,37,30,0.24);

  /* Motion */
  --mb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mb-fast: 120ms;
  --mb-normal: 200ms;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-feature-settings: 'cv11', 'ss01';
  background: var(--mb-cream);
  color: var(--mb-black);
  font-size: 15px;
  line-height: 1.55;
  padding-bottom: 76px; /* space for mobile bottom nav */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
}

/* Custom scrollbar — small detail, reads as polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mb-gray-300); border-radius: 999px; border: 2px solid var(--mb-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--mb-gray-400); }

a { color: inherit; }

h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--mb-gray-900); }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--mb-gray-900); }
h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--mb-gray-900); }
.mb-caption { font-size: 13px; color: var(--mb-gray-600); }
.mb-label { font-size: 12px; font-weight: 600; color: var(--mb-gray-600); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Layout ---- */
.mb-container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.mb-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .mb-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .mb-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .mb-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .mb-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ---- Page header row (title + optional actions, consistent across dashboards) ---- */
.mb-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}

/* ---- Card ---- */
.mb-card {
  background: var(--mb-white);
  border: 1px solid var(--mb-gray-100);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow-sm);
  padding: 18px;
  transition: box-shadow var(--mb-normal) var(--mb-ease), transform var(--mb-normal) var(--mb-ease), border-color var(--mb-normal) var(--mb-ease);
}
a.mb-card:hover, .mb-card.mb-card-hover:hover {
  box-shadow: var(--mb-shadow);
  border-color: var(--mb-gray-200);
  transform: translateY(-2px);
}
.mb-card h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }

/* Stat card number styling */
.mb-card .mb-label + h2 { margin-top: 6px; }

/* ---- Buttons ---- */
.mb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
  font-size: 15px; font-weight: 600; padding: 10px 20px;
  border-radius: var(--mb-radius-sm); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; min-height: 44px; line-height: 1;
  transition: background var(--mb-fast) var(--mb-ease), border-color var(--mb-fast) var(--mb-ease),
              box-shadow var(--mb-fast) var(--mb-ease), transform var(--mb-fast) var(--mb-ease), opacity var(--mb-fast) var(--mb-ease);
}
.mb-btn:active { transform: translateY(1px); }
.mb-btn:focus-visible { outline: 2px solid var(--mb-red); outline-offset: 2px; }

.mb-btn-primary { background: var(--mb-red); color: var(--mb-white); box-shadow: var(--mb-shadow-red); }
.mb-btn-primary:hover { background: var(--mb-red-dark); box-shadow: 0 6px 16px rgba(200,37,30,0.3); }
.mb-btn-primary:active { background: var(--mb-red-darker); }

.mb-btn-secondary { background: var(--mb-white); color: var(--mb-gray-900); border-color: var(--mb-gray-200); }
.mb-btn-secondary:hover { border-color: var(--mb-gray-300); background: var(--mb-gray-100); }

.mb-btn-danger { background: var(--mb-danger); color: var(--mb-white); }
.mb-btn-danger:hover { background: #B91C1C; }

.mb-btn-ghost { background: transparent; color: var(--mb-red); }
.mb-btn-ghost:hover { background: var(--mb-red-tint); }

.mb-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---- Forms ---- */
.mb-field { margin-bottom: 16px; }
.mb-input, .mb-select, .mb-textarea {
  width: 100%; font-family: inherit; font-size: 15px; padding: 10px 14px;
  border: 1.5px solid var(--mb-gray-200); border-radius: var(--mb-radius-sm);
  background: var(--mb-white); min-height: 44px; color: var(--mb-gray-900);
  transition: border-color var(--mb-fast) var(--mb-ease), box-shadow var(--mb-fast) var(--mb-ease);
}
.mb-input::placeholder, .mb-textarea::placeholder { color: var(--mb-gray-400); }
.mb-input:hover, .mb-select:hover, .mb-textarea:hover { border-color: var(--mb-gray-300); }
.mb-input:focus, .mb-select:focus, .mb-textarea:focus {
  outline: none; border-color: var(--mb-red); box-shadow: 0 0 0 3px var(--mb-red-tint);
}
.mb-textarea { min-height: 110px; resize: vertical; }
.mb-label { display: block; margin-bottom: 6px; }

/* ---- Status badges ---- */
.mb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; line-height: 1.4;
}
.mb-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mb-badge-gray  { background: var(--mb-gray-100); color: var(--mb-gray-600); }
.mb-badge-green { background: var(--mb-success-tint); color: var(--mb-success); }
.mb-badge-red   { background: var(--mb-danger-tint); color: var(--mb-danger); }
.mb-badge-amber { background: var(--mb-warning-tint); color: var(--mb-warning); }

/* ---- Nav: bottom (mobile) ---- */
.mb-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--mb-white); border-top: 1px solid var(--mb-gray-100);
  box-shadow: 0 -4px 16px rgba(23,23,23,0.06);
  display: flex; justify-content: space-around; padding: 8px 4px 10px;
  z-index: 50;
}
.mb-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 500; color: var(--mb-gray-400); text-decoration: none; flex: 1;
  padding: 4px 2px; border-radius: var(--mb-radius-xs);
  transition: color var(--mb-fast) var(--mb-ease);
}
.mb-bottom-nav a i { font-size: 18px; transition: transform var(--mb-fast) var(--mb-ease); }
.mb-bottom-nav a.active { color: var(--mb-red); }
.mb-bottom-nav a.active i { transform: translateY(-1px); }

/* ---- Nav: sidebar (desktop) ---- */
.mb-sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 24px;
}
.mb-sidebar-brand .mb-logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--mb-red), var(--mb-red-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--mb-white); font-weight: 800; font-size: 15px; flex: none;
  box-shadow: var(--mb-shadow-red);
}
.mb-sidebar-brand .mb-logo-text { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--mb-gray-900); }

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .mb-bottom-nav { display: none; }
  .mb-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 232px;
    background: var(--mb-white); border-right: 1px solid var(--mb-gray-100);
    padding: 20px 14px; overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .mb-sidebar a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--mb-radius-sm);
    color: var(--mb-gray-700); text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 2px;
    position: relative;
    transition: background var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
  }
  .mb-sidebar a i { width: 18px; text-align: center; font-size: 15px; color: var(--mb-gray-400); transition: color var(--mb-fast) var(--mb-ease); }
  .mb-sidebar a:hover { background: var(--mb-gray-100); color: var(--mb-gray-900); }
  .mb-sidebar a:hover i { color: var(--mb-gray-600); }
  .mb-sidebar a.active { background: var(--mb-red-tint); color: var(--mb-red-dark); font-weight: 600; }
  .mb-sidebar a.active i { color: var(--mb-red); }
  .mb-sidebar a.active::before {
    content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
    background: var(--mb-red); border-radius: 0 3px 3px 0;
  }
  .mb-sidebar a .mb-badge { margin-left: auto; }
  .mb-sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mb-gray-100); }
  .mb-with-sidebar { margin-left: 232px; }
}

/* ---- Empty / error states ---- */
.mb-empty-state {
  text-align: center; padding: 56px 20px; color: var(--mb-gray-600);
}
.mb-empty-state h2 { color: var(--mb-gray-900); margin-bottom: 6px; }
.mb-empty-state i.mb-empty-icon {
  font-size: 30px; color: var(--mb-gray-300); display: block; margin-bottom: 14px;
}

/* ---- Loading skeleton ---- */
.mb-skeleton {
  background: linear-gradient(90deg, var(--mb-gray-100) 25%, var(--mb-gray-200) 37%, var(--mb-gray-100) 63%);
  background-size: 400% 100%;
  animation: mb-skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--mb-radius-sm);
}
@keyframes mb-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Table -> card on mobile ---- */
.mb-table { width: 100%; border-collapse: collapse; }
.mb-table th {
  text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600;
  color: var(--mb-gray-600); text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1.5px solid var(--mb-gray-200);
}
.mb-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--mb-gray-100); font-size: 14px; }
.mb-table tbody tr { transition: background var(--mb-fast) var(--mb-ease); }
.mb-table tbody tr:hover { background: var(--mb-gray-100); }

@media (max-width: 767px) {
  .mb-table thead { display: none; }
  .mb-table, .mb-table tbody, .mb-table tr, .mb-table td { display: block; width: 100%; }
  .mb-table tr {
    margin-bottom: 12px; background: var(--mb-white); border: 1px solid var(--mb-gray-100);
    border-radius: var(--mb-radius-sm); padding: 10px 12px; box-shadow: var(--mb-shadow-xs);
  }
  .mb-table tbody tr:hover { background: var(--mb-white); }
  .mb-table td { border: none; padding: 5px 0; }
  .mb-table td::before {
    content: attr(data-label); font-weight: 600; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.03em; display: block; width: 100%; color: var(--mb-gray-400); margin-bottom: 1px;
  }
}

/* ================================================================
   Metbaber UI Refresh — Dashboard / Login presentation layer
   Backend, routes, forms and data contracts remain unchanged.
   ================================================================ */
:root {
  --mb-bg: #f6f4f1;
  --mb-surface: #ffffff;
  --mb-surface-soft: #fbfaf8;
  --mb-border: #ebe8e3;
  --mb-red-soft: #fff0ef;
  --mb-red-mid: #e14a43;
  --mb-ink: #171717;
  --mb-muted: #77736d;
  --mb-green: #176b4f;
  --mb-green-soft: #e9f5ef;
  --mb-yellow-soft: #fff6dc;
}

body { background: var(--mb-bg); }

.mb-sidebar {
  background: rgba(255,255,255,.96) !important;
  border-right: 1px solid var(--mb-border) !important;
}
.mb-sidebar-brand { padding: 8px 10px 30px !important; }
.mb-sidebar-brand .mb-logo-mark {
  width: 38px !important; height: 38px !important; border-radius: 12px !important;
  background: var(--mb-red) !important; box-shadow: 0 8px 18px rgba(200,37,30,.18) !important;
}
.mb-sidebar-brand .mb-logo-text { font-size: 19px !important; color: var(--mb-ink) !important; }
.mb-sidebar a { border-radius: 11px !important; padding: 11px 12px !important; color: #777 !important; }
.mb-sidebar a i { color: #aaa !important; }
.mb-sidebar a.active { background: var(--mb-red-soft) !important; color: var(--mb-red-dark) !important; }
.mb-sidebar a.active i { color: var(--mb-red) !important; }
.mb-sidebar a.active::before { width: 4px !important; border-radius: 0 5px 5px 0 !important; }
.mb-sidebar a:hover { background: #f7f5f2 !important; color: var(--mb-ink) !important; }

.mb-with-sidebar { min-height: 100vh; }
.mb-container { max-width: 1320px !important; padding: 0 28px 34px !important; }

/* Top application bar */
.mb-topbar {
  height: 78px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  border-bottom:1px solid var(--mb-border); margin:0 -28px 26px; padding:0 28px;
  background:rgba(246,244,241,.92); backdrop-filter: blur(10px); position:sticky; top:0; z-index:30;
}
.mb-topbar-search { flex:1; max-width:520px; position:relative; }
.mb-topbar-search i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#aaa; }
.mb-topbar-search input {
  width:100%; height:42px; border:1px solid var(--mb-border); background:#fff; border-radius:12px;
  padding:0 45px; font:inherit; color:var(--mb-ink); outline:none;
}
.mb-topbar-search input:focus { border-color:#d9b0ad; box-shadow:0 0 0 4px var(--mb-red-soft); }
.mb-topbar-search kbd { position:absolute; right:10px; top:9px; border:1px solid #e7e4df; border-radius:6px; padding:2px 6px; color:#aaa; font-size:11px; background:#fafafa; }
.mb-topbar-actions { display:flex; align-items:center; gap:10px; }
.mb-icon-btn {
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--mb-border); background:#fff; color:#555; border-radius:50%; text-decoration:none; position:relative;
}
.mb-icon-btn:hover { color:var(--mb-red); border-color:#e4c5c2; }
.mb-notification-dot { width:7px; height:7px; border-radius:50%; background:var(--mb-red); position:absolute; right:8px; top:8px; border:2px solid #fff; }
.mb-profile { display:flex; align-items:center; gap:10px; padding-left:8px; }
.mb-avatar {
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--mb-red-soft); color:var(--mb-red-dark); font-weight:800; font-size:13px; border:2px solid #fff;
}
.mb-profile-copy { line-height:1.15; }
.mb-profile-name { font-size:13px; font-weight:700; color:var(--mb-ink); }
.mb-profile-role { font-size:11px; color:#999; margin-top:4px; text-transform:capitalize; }

.mb-dashboard-title { margin:0 !important; font-size:32px !important; letter-spacing:-.04em !important; color:var(--mb-ink) !important; }
.mb-dashboard-subtitle { margin:4px 0 0; color:#96918a; font-size:13px; }
.mb-dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.mb-dashboard-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Screenshot-inspired stat cards */
.mb-stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.mb-stat-card {
  min-height:138px; padding:18px; border:1px solid var(--mb-border); background:#fff; border-radius:16px;
  box-shadow:0 2px 10px rgba(25,20,15,.035); position:relative; overflow:hidden;
}
.mb-stat-card.primary { background:linear-gradient(145deg,#b51f19,#d9362e); color:#fff; border-color:transparent; box-shadow:0 12px 25px rgba(200,37,30,.18); }
.mb-stat-card.primary .mb-stat-label, .mb-stat-card.primary .mb-stat-meta { color:rgba(255,255,255,.78); }
.mb-stat-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#f7f5f2; color:#777; margin-bottom:14px; }
.mb-stat-card.primary .mb-stat-icon { background:rgba(255,255,255,.16); color:#fff; }
.mb-stat-label { color:#77736d; font-size:12px; font-weight:600; }
.mb-stat-number { font-size:31px; line-height:1; font-weight:750; letter-spacing:-.04em; margin-top:8px; color:var(--mb-ink); }
.mb-stat-card.primary .mb-stat-number { color:#fff; }
.mb-stat-meta { font-size:11px; color:#aaa49d; margin-top:10px; }

.mb-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:16px; }
.mb-panel { background:#fff; border:1px solid var(--mb-border); border-radius:16px; box-shadow:0 2px 10px rgba(25,20,15,.035); padding:20px; }
.mb-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.mb-panel-title { margin:0; font-size:16px; font-weight:700; color:var(--mb-ink); }
.mb-panel-link { color:var(--mb-red); text-decoration:none; font-size:12px; font-weight:700; }
.mb-panel-link:hover { text-decoration:underline; }
.mb-module-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.mb-module {
  display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #eeeae5; border-radius:13px; text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mb-module:hover { transform:translateY(-2px); border-color:#dfd7d0; box-shadow:0 8px 20px rgba(25,20,15,.06); }
.mb-module-icon { width:38px; height:38px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--mb-red-soft); color:var(--mb-red); }
.mb-module h3 { margin:0 0 3px; font-size:13px; }
.mb-module p { margin:0; font-size:11px; color:#999; }
.mb-quick-list { display:grid; gap:10px; }
.mb-quick-item { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid #f1efec; }
.mb-quick-item:last-child { border-bottom:0; }
.mb-quick-icon { width:32px; height:32px; border-radius:9px; background:#f7f5f2; color:#777; display:flex; align-items:center; justify-content:center; }
.mb-quick-copy { min-width:0; flex:1; }
.mb-quick-copy strong { display:block; font-size:12px; color:#3d3a36; }
.mb-quick-copy span { display:block; font-size:11px; color:#aaa; margin-top:2px; }
.mb-chip { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; font-size:10px; font-weight:700; background:var(--mb-green-soft); color:var(--mb-green); }
.mb-chip.warning { background:var(--mb-yellow-soft); color:#a46d00; }

/* Keep existing cards attractive everywhere else */
.mb-card { border-color:var(--mb-border) !important; border-radius:15px !important; box-shadow:0 2px 10px rgba(25,20,15,.035) !important; }
.mb-card:hover { border-color:#ddd7d0 !important; }
.mb-btn-primary { background:var(--mb-red) !important; }
.mb-btn-primary:hover { background:var(--mb-red-dark) !important; }

/* Login */
.mb-login-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); background:#f5f1ec; }
.mb-login-brand {
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px 7vw 42px;
  background:linear-gradient(145deg,#191817 0%,#2a211f 58%,#9f201b 145%); color:#fff;
}
.mb-login-brand::before { content:''; position:absolute; width:520px; height:520px; border-radius:50%; border:1px solid rgba(255,255,255,.09); right:-180px; bottom:-200px; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.mb-login-brand::after { content:''; position:absolute; width:160px; height:160px; border-radius:50%; background:rgba(200,37,30,.26); filter:blur(4px); left:-70px; top:18%; }
.mb-login-logo { position:relative; z-index:2; display:flex; align-items:center; gap:11px; font-size:21px; font-weight:800; }
.mb-login-logo-mark { width:42px; height:42px; border-radius:13px; background:#fff; color:var(--mb-red); display:flex; align-items:center; justify-content:center; font-weight:900; }
.mb-login-hero { position:relative; z-index:2; max-width:520px; }
.mb-login-hero h1 { color:#fff; font-size:clamp(38px,5vw,64px); line-height:.98; letter-spacing:-.055em; margin:0 0 20px; }
.mb-login-hero h1 span { color:#ff6a62; }
.mb-login-hero p { color:rgba(255,255,255,.68); max-width:460px; font-size:15px; }
.mb-login-points { display:grid; gap:9px; margin-top:28px; }
.mb-login-point { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.82); font-size:12px; }
.mb-login-point i { color:#ff7169; }
.mb-login-footer { position:relative; z-index:2; color:rgba(255,255,255,.45); font-size:11px; }
.mb-login-form-side { display:flex; align-items:center; justify-content:center; padding:36px 6vw; }
.mb-login-box { width:min(100%,440px); }
.mb-login-box .mb-card { padding:30px; border-radius:20px !important; box-shadow:0 18px 50px rgba(30,22,18,.08) !important; }
.mb-login-heading { margin-bottom:24px; }
.mb-login-heading h2 { font-size:27px; letter-spacing:-.04em; margin-bottom:5px; color:var(--mb-ink); }
.mb-login-heading p { margin:0; color:#97918a; font-size:13px; }
.mb-login-input-wrap { position:relative; }
.mb-login-input-wrap > i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#aaa; pointer-events:none; }
.mb-login-input-wrap .mb-input { padding-left:42px; height:48px; border-radius:11px; }
.mb-login-submit { width:100%; min-height:48px; border-radius:11px; font-size:14px; }
.mb-login-help { text-align:center; margin-top:18px; font-size:12px; color:#999; }
.mb-login-help a { color:var(--mb-red); font-weight:700; text-decoration:none; }

@media (max-width: 1100px) {
  .mb-stat-grid { grid-template-columns:repeat(2,1fr); }
  .mb-dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width: 767px) {
  .mb-container { padding:0 15px 24px !important; }
  .mb-topbar { height:68px; margin:0 -15px 20px; padding:0 15px; }
  .mb-topbar-search { max-width:none; }
  .mb-topbar-search input { padding-left:38px; }
  .mb-topbar-search kbd { display:none; }
  .mb-topbar-actions { gap:6px; }
  .mb-topbar-actions .mb-icon-btn { width:38px; height:38px; }
  .mb-profile-copy { display:none; }
  .mb-profile { padding-left:2px; }
  .mb-avatar { width:38px; height:38px; }
  .mb-dashboard-head { align-items:flex-start; flex-direction:column; }
  .mb-dashboard-title { font-size:28px !important; }
  .mb-dashboard-actions { width:100%; }
  .mb-dashboard-actions .mb-btn { flex:1; }
  .mb-stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .mb-stat-card { min-height:125px; padding:14px; }
  .mb-stat-number { font-size:26px; }
  .mb-module-grid { grid-template-columns:1fr; }
  .mb-login-page { display:block; }
  .mb-login-brand { min-height:330px; padding:28px 24px 30px; }
  .mb-login-hero h1 { font-size:39px; }
  .mb-login-hero p, .mb-login-points { display:none; }
  .mb-login-form-side { padding:26px 16px 45px; }
  .mb-login-box .mb-card { padding:22px; }
}

/* ================================================================
   Metbaber final visual pass — reference-style shell
   Presentation only. No PHP/data/auth behavior changed.
   ================================================================ */
.mb-sidebar { width:252px !important; padding:24px 14px 14px !important; background:#fff !important; border-right:1px solid #eeeae5 !important; box-shadow:4px 0 24px rgba(22,18,14,.025); }
.mb-sidebar-brand { padding:0 10px 28px !important; gap:11px !important; }
.mb-sidebar-brand .mb-logo-mark { width:38px !important; height:38px !important; border-radius:50% !important; background:#fff !important; color:var(--mb-red) !important; border:2px solid var(--mb-red) !important; box-shadow:none !important; }
.mb-logo-text { line-height:1.05; }
.mb-logo-sub { font-size:9px; color:#aaa39c; margin-top:4px; }
.mb-nav-label { padding:0 12px 8px; font-size:9px; font-weight:700; letter-spacing:.12em; color:#aaa39c; }
.mb-nav-label-general { margin-top:24px; }
.mb-nav-list { display:grid; gap:4px; }
.mb-sidebar a { margin:0 !important; min-height:43px; padding:9px 12px !important; border-radius:10px !important; font-size:13px !important; }
.mb-sidebar a .mb-nav-icon { width:20px; display:inline-flex; justify-content:center; color:#aaa39c; }
.mb-sidebar a i { color:inherit !important; font-size:14px !important; }
.mb-sidebar a.active { background:var(--mb-red-tint) !important; color:var(--mb-red-dark) !important; font-weight:700 !important; }
.mb-sidebar a.active .mb-nav-icon { color:var(--mb-red) !important; }
.mb-sidebar a.active::before { left:-14px !important; top:9px !important; bottom:9px !important; width:4px !important; background:var(--mb-red) !important; }
.mb-sidebar-bottom { margin-top:auto; padding-top:16px; }
.mb-app-promo { margin:0 4px 12px; padding:14px; border-radius:14px; background:linear-gradient(145deg,#1c1614,#2a1613); color:#fff; overflow:hidden; position:relative; }
.mb-app-promo-art { position:absolute; right:-4px; top:-12px; font-size:62px; color:rgba(200,37,30,.22); transform:rotate(-12deg); }
.mb-app-promo strong,.mb-app-promo span { display:block; position:relative; z-index:1; }
.mb-app-promo strong { font-size:12px; margin-bottom:3px; }.mb-app-promo span { font-size:9px; color:rgba(255,255,255,.55); }
.mb-app-promo a { display:block; margin-top:11px; text-align:center; background:var(--mb-red); color:#fff !important; border-radius:8px; padding:8px; font-size:10px !important; transition:background var(--mb-fast) var(--mb-ease); }
.mb-app-promo a:hover { background:var(--mb-red-dark); }
.mb-sidebar .mb-logout { color:#7c7771 !important; margin:0 4px !important; }
.mb-with-sidebar { margin-left:252px !important; }
.mb-container { max-width:1400px !important; padding:0 28px 36px !important; }
.mb-topbar { height:76px !important; margin:0 -28px 28px !important; padding:0 28px !important; background:#fff !important; border-bottom:1px solid #eeeae5 !important; box-shadow:0 2px 12px rgba(25,20,15,.025); position:relative !important; }
.mb-topbar-search { max-width:500px !important; }.mb-topbar-search input { height:42px !important; border-color:#eeeae5 !important; background:#fafaf9 !important; }
.mb-topbar-actions { gap:9px !important; }.mb-icon-btn { background:#fff !important; border-color:#eeeae5 !important; width:42px !important; height:42px !important; }
.mb-profile { padding-left:9px !important; border-left:1px solid #eeeae5; margin-left:2px; }.mb-profile-chevron { color:#aaa39c; font-size:10px; margin-left:2px; }
.mb-dashboard-head { margin-bottom:22px !important; }.mb-dashboard-title { font-size:34px !important; }.mb-dashboard-subtitle { font-size:12px !important; }
.mb-mobile-bar { display:none; }

/* Premium login */
.mb-auth-body { margin:0 !important; background:#f7f4f0 !important; overflow-x:hidden; }
.mb-auth-page { min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr; position:relative; }
.mb-auth-showcase { position:relative; overflow:hidden; padding:42px clamp(35px,7vw,100px); background:linear-gradient(145deg,#171817 0%,#221d1b 58%,#7f1d18 150%); color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.mb-auth-showcase:before { content:""; position:absolute; width:650px; height:650px; border:1px solid rgba(255,255,255,.07); border-radius:50%; right:-250px; bottom:-300px; box-shadow:0 0 0 80px rgba(255,255,255,.02),0 0 0 160px rgba(255,255,255,.015); }
.mb-auth-showcase:after { content:""; position:absolute; width:280px; height:280px; border-radius:50%; left:-120px; top:42%; background:rgba(204,0,0,.17); filter:blur(20px); }
.mb-auth-brand,.mb-auth-showcase-content,.mb-auth-trust { position:relative; z-index:2; }
.mb-auth-brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:21px; font-weight:800; }
.mb-auth-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#cc0000; box-shadow:0 10px 24px rgba(204,0,0,.25); }
.mb-auth-showcase-content { max-width:590px; }.mb-auth-kicker { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.05); font-size:10px; color:rgba(255,255,255,.72); margin-bottom:20px; }
.mb-auth-showcase-content h1 { margin:0 0 18px; font-size:clamp(48px,6vw,76px); line-height:.94; letter-spacing:-.06em; }.mb-auth-showcase-content h1 em { color:#ff5c55; font-style:normal; }.mb-auth-showcase-content p { max-width:500px; color:rgba(255,255,255,.6); font-size:14px; line-height:1.7; }
.mb-auth-stat-row { display:flex; gap:32px; margin-top:34px; }.mb-auth-stat-row div { display:flex; flex-direction:column; gap:4px; }.mb-auth-stat-row strong { font-size:22px; }.mb-auth-stat-row span { font-size:9px; color:rgba(255,255,255,.45); }
.mb-auth-trust { color:rgba(255,255,255,.4); font-size:10px; }.mb-auth-trust i { color:#ff625b; margin-right:7px; }.mb-auth-trust span { padding:0 8px; }
.mb-auth-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px clamp(22px,6vw,85px); background:#f7f4f0; position:relative; }
.mb-auth-card { width:min(100%,440px); padding:34px; border:1px solid #e9e3dc; border-radius:22px; background:#fff; box-shadow:0 25px 70px rgba(32,24,18,.09); }
.mb-auth-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:27px; }.mb-auth-mini-logo { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#fff0ef; color:#cc0000; font-size:13px; font-weight:800; }.mb-auth-online { font-size:9px; color:#7d7770; }.mb-auth-online i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#159968; margin-right:5px; }
.mb-login-heading h2 { font-size:29px !important; margin:0 0 6px !important; letter-spacing:-.045em; }.mb-login-heading p { font-size:12px !important; color:#96908a !important; }
.mb-auth-alert { display:flex; gap:9px; align-items:center; padding:10px 12px; border-radius:10px; font-size:11px; margin:16px 0; }.mb-auth-alert.warning { background:#fff7df; color:#8a6400; }.mb-auth-alert.error { background:#fff0ef; color:#a51f1a; }
.mb-auth-field { margin-top:18px; }.mb-auth-field label { display:block; font-size:11px; font-weight:700; color:#49443f; margin-bottom:7px; }.mb-auth-label-row { display:flex; justify-content:space-between; }.mb-auth-label-row a { font-size:10px; color:#cc0000; font-weight:700; text-decoration:none; }
.mb-auth-control { position:relative; }.mb-auth-control > i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#aaa39c; z-index:1; font-size:13px; }.mb-auth-control input { width:100%; height:50px; box-sizing:border-box; border:1px solid #e5dfd8; border-radius:11px; background:#fbfaf8; padding:0 42px; font:inherit; font-size:13px; outline:none; transition:.2s; }.mb-auth-control input:focus { border-color:#cc0000; background:#fff; box-shadow:0 0 0 4px #fff0ef; }.mb-password-toggle { position:absolute; right:8px; top:7px; width:36px; height:36px; border:0; background:transparent; color:#aaa39c; cursor:pointer; }
.mb-auth-submit { width:100%; height:50px; margin-top:23px; border:0; border-radius:11px; background:#cc0000; color:#fff; font:700 13px 'Source Serif 4',Georgia,serif; cursor:pointer; box-shadow:0 10px 22px rgba(204,0,0,.18); }.mb-auth-submit:hover { background:#ae0000; }.mb-auth-submit i { margin-left:7px; }
.mb-auth-divider { display:flex; align-items:center; gap:10px; margin:24px 0 13px; color:#b0aaa3; font-size:9px; }.mb-auth-divider:before,.mb-auth-divider:after { content:""; height:1px; background:#eee9e3; flex:1; }.mb-auth-note { text-align:center; color:#aaa39c; font-size:9px; margin:0; }.mb-auth-note i { margin-right:5px; color:#159968; }.mb-auth-copyright { margin:18px 0 0; color:#aaa39c; font-size:9px; }
.mb-auth-footnote { text-align:center; margin:0; font-size:12px; color:#8a847d; }.mb-auth-footnote a { color:#cc0000; font-weight:700; text-decoration:none; }.mb-auth-footnote a:hover { text-decoration:underline; }
/* Generic alert banners used on admin pages (payments/users/settings/reports) */
.mb-alert { display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; }
.mb-alert.success { background:var(--mb-success-tint); color:var(--mb-success); }
.mb-alert.danger { background:var(--mb-danger-tint); color:var(--mb-danger); }
.mb-auth-decoration { display:none; }
@media (max-width:1023px) {
  .mb-sidebar { display:none !important; }
  .mb-with-sidebar { margin-left:0 !important; }
  .mb-mobile-bar { height:58px; display:flex; align-items:center; gap:12px; padding:0 15px; background:#fff; border-bottom:1px solid #eeeae5; font-size:13px; font-weight:700; position: sticky; top: 0; z-index: 40; }
  .mb-mobile-menu { width:36px; height:36px; border:1px solid #eeeae5; background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
  .mb-mobile-menu:active { background:#f7f5f2; }
  .mb-container { padding:0 15px 30px !important; }
  .mb-topbar { display:none !important; }

  /* Mobile drawer: the JS in footer.php toggles .is-open on .mb-sidebar and .mb-sidebar-backdrop */
  .mb-sidebar.is-open {
    display: flex !important;
    position: fixed; inset: 0 auto 0 0; left: 0; top: 0; bottom: 0;
    width: min(82vw, 300px); max-width: 300px; z-index: 1001;
    box-shadow: 12px 0 36px rgba(15,12,10,.22);
    animation: mbSidebarSlideIn .22s ease;
    overflow-y: auto;
  }
  .mb-sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15,12,10,.42);
    z-index: 1000; opacity: 0; transition: opacity .18s ease;
  }
  .mb-sidebar-backdrop.is-open { display: block; opacity: 1; }
  body.mb-nav-locked { overflow: hidden; }
}
@keyframes mbSidebarSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (max-width:767px) { .mb-auth-page { display:block; }.mb-auth-showcase { min-height:330px; padding:28px 24px; }.mb-auth-showcase-content h1 { font-size:43px; }.mb-auth-showcase-content p,.mb-auth-stat-row { display:none; }.mb-auth-panel { padding:0 16px 35px; margin-top:-1px; }.mb-auth-card { margin-top:-35px; padding:24px 20px; position:relative; z-index:5; border-radius:18px; }.mb-auth-brand { font-size:18px; }.mb-auth-trust { margin-top:25px; }.mb-auth-copyright { margin-bottom:10px; } }

/* ===== Responsive navigation hardening ===== */
.mb-mobile-drawer-head{display:none}
.mb-mobile-close{border:0;background:transparent;color:#777;width:38px;height:38px;border-radius:9px;cursor:pointer}
.mb-mobile-close:hover{background:#f5f2ef;color:#222}
@media(max-width:1023px){
  .mb-sidebar{display:none !important;}
  .mb-sidebar.is-open{display:flex !important;visibility:visible !important;opacity:1 !important;transform:translateX(0) !important;}
  .mb-mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 12px;border-bottom:1px solid #eeeae5;flex:none}
  .mb-mobile-drawer-head .mb-sidebar-brand{display:flex !important;align-items:center;gap:9px;margin:0 !important;padding:0 !important}
  .mb-mobile-drawer-head .mb-logo-mark{width:160px;height:60px}
  .mb-mobile-drawer-head .mb-logo-text{font-size:14px}
  .mb-mobile-drawer-head .mb-logo-sub{font-size:8px}
  .mb-sidebar.is-open .mb-mobile-close{display:grid;place-items:center}
  .mb-sidebar.is-open{padding-bottom:18px;}
  .mb-sidebar.is-open .mb-nav-label:first-of-type{margin-top:13px}
  .mb-sidebar-backdrop{touch-action:none;}
}
@media(min-width:1024px){.mb-mobile-close{display:none !important}}


/* Mobile sidebar visibility and layout fix */
@media (max-width: 1023px) {
  .mb-sidebar.is-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: min(86vw, 320px) !important;
    min-width: 280px !important;
    max-width: 320px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 14px 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
  }
  .mb-sidebar.is-open .mb-mobile-drawer-head {
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }
  .mb-sidebar.is-open .mb-nav-label {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .mb-sidebar.is-open .mb-nav-list,
  .mb-sidebar.is-open .mb-nav-group-items {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }
  .mb-sidebar.is-open .mb-nav-group {
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }
  .mb-sidebar.is-open .mb-nav-list a,
  .mb-sidebar.is-open .mb-nav-group-items a,
  .mb-sidebar.is-open .mb-nav-group summary {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .mb-sidebar.is-open .mb-sidebar-bottom {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
  }
  .mb-sidebar.is-open .mb-app-promo,
  .mb-sidebar.is-open .mb-logout {
    display: flex !important;
    visibility: visible !important;
  }
  .mb-sidebar.is-open .mb-app-promo {
    flex-direction: column !important;
  }
  .mb-sidebar.is-open .mb-logout {
    align-items: center !important;
  }
}

/* ================================================================
   Sidebar nav groups (collapsible <details> sections) + underline fix
   ================================================================ */

/* Underline fix: earlier mobile-breakpoint overrides never repeated
   the desktop-only text-decoration:none, so links showed the browser
   default underline on phones/tablets. This rule is not gated to a
   breakpoint, so it always wins regardless of screen size. */
.mb-sidebar a,
.mb-sidebar a:hover,
.mb-sidebar a:visited,
.mb-sidebar a:active,
.mb-nav-group summary,
.mb-nav-group summary:hover {
  text-decoration: none !important;
}

.mb-nav-list-top { margin-bottom: 6px; }

.mb-nav-group { margin-bottom: 2px; }
.mb-nav-group summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--mb-radius-sm);
  color: var(--mb-gray-600); font-size: 13px; font-weight: 600;
  transition: background var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
}
.mb-nav-group summary::-webkit-details-marker { display: none; }
.mb-nav-group summary::marker { content: ''; }
.mb-nav-group summary .mb-nav-icon { width: 20px; display: inline-flex; justify-content: center; color: var(--mb-gray-400); }
.mb-nav-group summary .mb-nav-group-chevron {
  margin-left: auto; font-size: 11px; color: var(--mb-gray-400);
  transition: transform var(--mb-fast) var(--mb-ease);
}
.mb-nav-group summary:hover { background: var(--mb-gray-100); color: var(--mb-gray-900); }
.mb-nav-group[open] > summary .mb-nav-group-chevron { transform: rotate(90deg); }
.mb-nav-group[open] > summary { color: var(--mb-gray-900); font-weight: 700; }

.mb-nav-group-items {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 6px; margin: 2px 0 6px;
}
.mb-nav-group-items a { font-size: 13.5px; }

/* Keep the same underline-free / hover / active treatment for group items */
.mb-nav-group-items a:hover { background: var(--mb-gray-100); color: var(--mb-gray-900); }
.mb-nav-group-items a.active { background: var(--mb-red-tint); color: var(--mb-red-dark); font-weight: 600; }
.mb-nav-group-items a.active i { color: var(--mb-red); }

@media (max-width: 1023px) {
  .mb-nav-group summary { padding: 11px 12px !important; }
  .mb-nav-group-items { padding-left: 8px; }
}

/* Custom brand logo support */
.mb-sidebar-logo{overflow:hidden;display:grid!important;place-items:center}.mb-sidebar-logo img{width:100%;height:100%;object-fit:contain;display:block}.mb-logo-fallback{display:none;place-items:center;width:100%;height:100%;font-weight:800}


/* ================================================================
   Pricing page
   ================================================================ */
.mb-pricing-section { margin-bottom: 44px; }
.mb-pricing-section:last-child { margin-bottom: 8px; }
.mb-pricing-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.mb-pricing-section-head h2 { margin:0 0 4px; font-size:20px; font-weight:800; color:var(--mb-ink); display:flex; align-items:center; gap:10px; }
.mb-pricing-section-head h2 i { color:var(--mb-red); font-size:17px; }
.mb-pricing-section-head p { margin:0; color:var(--mb-muted); font-size:13.5px; }
.mb-pricing-current { display:inline-flex; align-items:center; gap:6px; }

.mb-pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
@media (max-width: 900px) { .mb-pricing-grid { grid-template-columns:1fr; } }

.mb-pricing-card {
  position:relative; display:flex; flex-direction:column; gap:16px;
  background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:18px;
  padding:24px; box-shadow:0 2px 10px rgba(25,20,15,.035); transition:transform var(--mb-normal) var(--mb-ease), box-shadow var(--mb-normal) var(--mb-ease);
}
.mb-pricing-card:hover { transform:translateY(-2px); box-shadow:var(--mb-shadow-lg); }
.mb-pricing-card.is-featured { border-color:var(--mb-red); box-shadow:0 8px 24px rgba(200,37,30,.14); }
.mb-pricing-card.is-current { border-color:var(--mb-green); }

.mb-pricing-ribbon {
  position:absolute; top:-11px; left:24px; background:var(--mb-red); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; box-shadow:var(--mb-shadow-red);
}
.mb-pricing-current-ribbon {
  position:absolute; top:-11px; right:24px; background:var(--mb-green); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
}

.mb-pricing-name { font-size:17px; font-weight:800; color:var(--mb-ink); margin:0; }
.mb-pricing-tagline { font-size:13px; color:var(--mb-muted); margin:0; min-height:34px; }
.mb-pricing-price { display:flex; align-items:baseline; gap:5px; }
.mb-pricing-price .amount { font-size:30px; font-weight:800; color:var(--mb-ink); letter-spacing:-0.02em; }
.mb-pricing-price .period { font-size:13px; color:var(--mb-muted); font-weight:600; }
.mb-pricing-price-sub { font-size:12px; color:var(--mb-muted); margin-top:-10px; }

.mb-pricing-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.mb-pricing-features li { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--mb-ink); line-height:1.4; }
.mb-pricing-features li i { color:var(--mb-green); margin-top:2px; font-size:12px; flex:none; }

.mb-pricing-card .mb-btn { width:100%; justify-content:center; margin-top:auto; }

.mb-pricing-note { font-size:12px; color:var(--mb-muted); background:var(--mb-surface-soft); border:1px dashed var(--mb-border); border-radius:12px; padding:10px 14px; margin-top:8px; }

/* ================================================================
   Link in Bio — plan usage, locked-feature badges, share/QR block
   ================================================================ */
.mb-progress { width:100%; height:8px; border-radius:999px; background:var(--mb-gray-100,#F5F5F5); overflow:hidden; }
.mb-progress-bar { height:100%; border-radius:999px; background:var(--mb-red); transition:width .3s var(--mb-ease,ease); }
.mb-progress-bar.is-full { background:var(--mb-danger,#DC2626); }
.mb-plan-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.mb-plan-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.mb-plan-chip.free { background:var(--mb-gray-100,#F5F5F5); color:var(--mb-gray-600,#525252); }
.mb-plan-chip.business { background:#FEF3C7; color:#92610a; }
.mb-plan-chip.pro { background:var(--mb-red-tint,#FBEAE9); color:var(--mb-red-dark,#9E1B16); }
.mb-lock-note { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--mb-muted,#8a847d); background:var(--mb-surface-soft,#faf7f3); border:1px dashed var(--mb-border,#e5dfd8); border-radius:10px; padding:8px 10px; margin-top:6px; }
.mb-lock-note i { color:#c99a2e; margin-top:1px; }
.mb-lock-note a { color:var(--mb-red); font-weight:700; text-decoration:none; }
.mb-lock-note a:hover { text-decoration:underline; }
.mb-field-locked { position:relative; opacity:.6; }
.mb-field-locked input, .mb-field-locked textarea { background:var(--mb-gray-100,#F5F5F5) !important; cursor:not-allowed; }
.mb-share-row { display:flex; gap:8px; }
.mb-share-row input { flex:1; }
.mb-share-icons { display:flex; gap:8px; margin-top:10px; }
.mb-share-icon { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; border:1px solid var(--mb-border,#e5dfd8); color:var(--mb-ink,#171717); text-decoration:none; font-size:15px; transition:transform .15s ease, background .15s ease; }
.mb-share-icon:hover { transform:translateY(-2px); }
.mb-share-icon.whatsapp:hover { background:#e9fbf1; color:#159968; border-color:#bfe9d2; }
.mb-share-icon.telegram:hover { background:#e9f4ff; color:#229ED9; border-color:#bfdcf2; }
.mb-share-icon.copy:hover { background:var(--mb-red-tint,#FBEAE9); color:var(--mb-red); border-color:#f3c9c6; }
.mb-qr-wrap { display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px; border:1px solid var(--mb-border,#e5dfd8); border-radius:14px; background:var(--mb-surface-soft,#faf7f3); }
.mb-qr-wrap img { width:88px; height:88px; border-radius:8px; background:#fff; padding:6px; border:1px solid var(--mb-border,#e5dfd8); flex:none; }
.mb-analytics-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.mb-analytics-box { border:1px solid var(--mb-border,#e5dfd8); border-radius:12px; padding:14px; text-align:center; }
.mb-analytics-box strong { display:block; font-size:24px; font-weight:800; color:var(--mb-ink,#171717); letter-spacing:-.02em; }
.mb-analytics-box span { font-size:11px; color:var(--mb-muted,#8a847d); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.mb-username-field { display:flex; align-items:stretch; }
.mb-username-prefix { display:flex; align-items:center; padding:0 12px; border:1.5px solid var(--mb-gray-200,#E5E5E5); border-right:0; border-radius:var(--mb-radius-sm,8px) 0 0 var(--mb-radius-sm,8px); background:var(--mb-gray-100,#F5F5F5); color:var(--mb-gray-600,#525252); font-size:13px; white-space:nowrap; }
.mb-username-field input { border-radius:0 var(--mb-radius-sm,8px) var(--mb-radius-sm,8px) 0 !important; }
.mb-preview-frame { border:1px solid var(--mb-border,#e5dfd8); border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(25,20,15,.06); }