/* ==========================================================================
   MobileBooking App Relaunch - first authenticated product block
   Scope: app.html (.app-v4) and admin.html (.admin-v4) only.
   Frontend-only late layer: tokens, shell, components, typography, mobile.
   ========================================================================== */

html[data-design="v2"] body.app-v4,
html[data-design="v2"] body.admin-v4 {
  --rl-canvas: #fbfaf6;
  --rl-canvas-2: #f6f3ec;
  --rl-surface: rgba(255,255,255,.92);
  --rl-surface-soft: rgba(255,255,255,.74);
  --rl-surface-muted: #f1eee6;
  --rl-line: rgba(42,50,45,.10);
  --rl-line-strong: rgba(42,50,45,.17);
  --rl-line-accent: rgba(14,143,131,.26);
  --rl-text: #17211d;
  --rl-text-2: #4d5d56;
  --rl-text-3: #7b8982;
  --rl-text-4: #a0aaa5;
  --rl-petrol: #0e8f83;
  --rl-petrol-deep: #08766e;
  --rl-teal: #38c8b5;
  --rl-danger: #c64040;
  --rl-gradient: linear-gradient(135deg, #08766e 0%, #0e8f83 46%, #38c8b5 100%);
  --rl-gradient-soft: linear-gradient(135deg, rgba(14,143,131,.13), rgba(56,200,181,.055));
  --rl-wash: radial-gradient(circle at 16% -8%, rgba(14,143,131,.105), transparent 34%),
              radial-gradient(circle at 92% 6%, rgba(56,200,181,.08), transparent 30%),
              linear-gradient(145deg, #fffdf9 0%, #f8f5ee 52%, #f5f8f2 100%);
  --rl-radius-sm: 12px;
  --rl-radius: 18px;
  --rl-radius-lg: 24px;
  --rl-radius-xl: 30px;
  --rl-shadow-sm: 0 8px 22px rgba(28,42,36,.055);
  --rl-shadow: 0 18px 48px rgba(28,42,36,.085), 0 1px 0 rgba(255,255,255,.7) inset;
  --rl-shadow-lg: 0 28px 78px rgba(28,42,36,.12), 0 1px 0 rgba(255,255,255,.8) inset;
  --rl-focus: 0 0 0 4px rgba(14,143,131,.16);
  --rl-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rl-body: 14px;
  --rl-label: 12px;
  --rl-caption: 11px;
  --rl-nav-desktop: 244px;
  --rl-admin-desktop: 244px;
  --rl-mobile-nav-h: 76px;
  --bg: var(--rl-canvas) !important;
  --s0: var(--rl-canvas) !important;
  --s1: var(--rl-surface) !important;
  --s2: var(--rl-surface-soft) !important;
  --s3: rgba(241,238,230,.78) !important;
  --s4: var(--rl-surface-muted) !important;
  --b1: var(--rl-line) !important;
  --b2: var(--rl-line-strong) !important;
  --b3: var(--rl-line-accent) !important;
  --t1: var(--rl-text) !important;
  --t2: var(--rl-text-2) !important;
  --t3: var(--rl-text-3) !important;
  --t4: var(--rl-text-4) !important;
  --np: var(--rl-petrol) !important;
  --na: var(--rl-petrol-deep) !important;
  --nb: var(--rl-teal) !important;
  --ng: var(--rl-petrol) !important;
  --nv: var(--rl-petrol) !important;
  --r: var(--rl-radius-sm) !important;
  --r2: var(--rl-radius) !important;
  --r3: var(--rl-radius-lg) !important;
  --sh: var(--rl-shadow-lg) !important;
  --sh2: var(--rl-shadow) !important;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--rl-text) !important;
  background: var(--rl-wash) !important;
  font-family: var(--rl-font) !important;
  font-size: var(--rl-body);
  line-height: 1.48;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
}

html[data-design="v2"] body.app-v4::before,
html[data-design="v2"] body.admin-v4::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(42,50,45,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,50,45,.022) 1px, transparent 1px) !important;
  background-size: 112px 112px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.08) 70%, transparent) !important;
}

html[data-design="v2"] body.app-v4 *,
html[data-design="v2"] body.admin-v4 * {
  letter-spacing: 0;
}

html[data-design="v2"] body.app-v4 h1,
html[data-design="v2"] body.app-v4 h2,
html[data-design="v2"] body.app-v4 h3,
html[data-design="v2"] body.app-v4 h4,
html[data-design="v2"] body.admin-v4 h1,
html[data-design="v2"] body.admin-v4 h2,
html[data-design="v2"] body.admin-v4 h3,
html[data-design="v2"] body.admin-v4 h4,
html[data-design="v2"] body.app-v4 .h1,
html[data-design="v2"] body.app-v4 .h2,
html[data-design="v2"] body.admin-v4 .h1,
html[data-design="v2"] body.admin-v4 .h2 {
  color: var(--rl-text) !important;
  font-family: var(--rl-font) !important;
  font-weight: 780 !important;
  letter-spacing: -.015em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

html[data-design="v2"] body.app-v4 h1,
html[data-design="v2"] body.admin-v4 h1,
html[data-design="v2"] body.app-v4 .h1,
html[data-design="v2"] body.admin-v4 .h1 {
  font-size: clamp(25px, 2.6vw, 36px) !important;
}

html[data-design="v2"] body.app-v4 h2,
html[data-design="v2"] body.admin-v4 h2,
html[data-design="v2"] body.app-v4 .h2,
html[data-design="v2"] body.admin-v4 .h2 {
  font-size: clamp(20px, 1.7vw, 26px) !important;
}

html[data-design="v2"] body.app-v4 p,
html[data-design="v2"] body.admin-v4 p,
html[data-design="v2"] body.app-v4 .sub,
html[data-design="v2"] body.admin-v4 .sub,
html[data-design="v2"] body.app-v4 .muted,
html[data-design="v2"] body.admin-v4 .muted,
html[data-design="v2"] body.app-v4 small,
html[data-design="v2"] body.admin-v4 small {
  color: var(--rl-text-3) !important;
  line-height: 1.55 !important;
}

html[data-design="v2"] body.app-v4 .fl,
html[data-design="v2"] body.admin-v4 .fl,
html[data-design="v2"] body.app-v4 label,
html[data-design="v2"] body.admin-v4 label,
html[data-design="v2"] body.app-v4 th,
html[data-design="v2"] body.admin-v4 th,
html[data-design="v2"] body.app-v4 .kpi-label,
html[data-design="v2"] body.admin-v4 .kpi-label,
html[data-design="v2"] body.app-v4 .mb-kpi__label {
  color: var(--rl-text-3) !important;
  font-size: var(--rl-label) !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
}

html[data-design="v2"] body.app-v4 .page {
  max-width: 1680px !important;
  padding: 28px 30px 48px !important;
}

html[data-design="v2"] body.app-v4 .page.active,
html[data-design="v2"] body.admin-v4 .content,
html[data-design="v2"] body.admin-v4 main.content {
  background: transparent !important;
}

@media (min-width: 641px) {
  html[data-design="v2"] body.app-v4 {
    --sidebar-w: var(--rl-nav-desktop) !important;
  }

  html[data-design="v2"] body.app-v4 .page {
    margin-left: var(--rl-nav-desktop) !important;
    padding-left: 34px !important;
  }

  html[data-design="v2"] body.app-v4 nav.nav {
    width: calc(var(--rl-nav-desktop) - 24px) !important;
    left: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
    height: calc(100dvh - 24px) !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: var(--rl-radius-xl) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
      var(--rl-gradient-soft) !important;
    box-shadow: var(--rl-shadow-lg) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html[data-design="v2"] body.admin-v4 {
    --admin-sw: var(--rl-admin-desktop) !important;
  }

  html[data-design="v2"] body.admin-v4 .nav-tabs {
    width: calc(var(--rl-admin-desktop) - 24px) !important;
    left: 12px !important;
    top: 12px !important;
    min-height: calc(100dvh - 24px) !important;
    height: calc(100dvh - 24px) !important;
    padding: 12px 10px !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: var(--rl-radius-xl) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
      var(--rl-gradient-soft) !important;
    box-shadow: var(--rl-shadow-lg) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html[data-design="v2"] body.admin-v4 nav.nav {
    margin-left: var(--rl-admin-desktop) !important;
    width: calc(100% - var(--rl-admin-desktop)) !important;
    height: 68px !important;
    padding-inline: 30px !important;
    background: rgba(255,255,255,.72) !important;
    border-bottom: 1px solid var(--rl-line) !important;
    box-shadow: 0 14px 36px rgba(28,42,36,.06) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  }

  html[data-design="v2"] body.admin-v4 .content,
  html[data-design="v2"] body.admin-v4 main.content {
    margin-left: var(--rl-admin-desktop) !important;
    padding: 34px 34px 52px !important;
  }
}

html[data-design="v2"] body.app-v4 .nav-brand,
html[data-design="v2"] body.admin-v4 .nav-brand {
  min-height: 58px !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(28,42,36,.045) !important;
}

html[data-design="v2"] body.app-v4 .brand-icon,
html[data-design="v2"] body.app-v4 .nav-icon,
html[data-design="v2"] body.app-v4 .nav-av,
html[data-design="v2"] body.admin-v4 .nav-icon,
html[data-design="v2"] body.admin-v4 .nav-av {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(14,143,131,.22) !important;
}

html[data-design="v2"] body.app-v4 .ntab,
html[data-design="v2"] body.app-v4 .ndropitem,
html[data-design="v2"] body.admin-v4 .tab-btn,
html[data-design="v2"] body.app-v4 .mobile-more-item,
html[data-design="v2"] body.app-v4 .mob-drawer-item {
  min-height: 44px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  color: var(--rl-text-2) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  box-shadow: none !important;
}

html[data-design="v2"] body.app-v4 .ntab:hover,
html[data-design="v2"] body.app-v4 .ntab.active,
html[data-design="v2"] body.app-v4 .ntab-group.open > .ntab,
html[data-design="v2"] body.app-v4 .ndropitem:hover,
html[data-design="v2"] body.app-v4 .ndropitem.active,
html[data-design="v2"] body.admin-v4 .tab-btn:hover,
html[data-design="v2"] body.admin-v4 .tab-btn.active,
html[data-design="v2"] body.app-v4 .mobile-more-item:hover,
html[data-design="v2"] body.app-v4 .mobile-more-item.is-active,
html[data-design="v2"] body.app-v4 .mob-drawer-item:hover,
html[data-design="v2"] body.app-v4 .mob-drawer-item.mob-active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,236,.82)),
    var(--rl-gradient-soft) !important;
  border-color: var(--rl-line-accent) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 12px 28px rgba(14,143,131,.09) !important;
}

html[data-design="v2"] body.app-v4 .ntab.active,
html[data-design="v2"] body.app-v4 .ntab-group > .ntab.active,
html[data-design="v2"] body.app-v4 .ndropitem.active {
  border-left-color: var(--rl-petrol) !important;
  border-bottom-color: transparent !important;
}

html[data-design="v2"] body.app-v4 .nav-right,
html[data-design="v2"] body.app-v4 .nav-user,
html[data-design="v2"] body.app-v4 .icon-btn,
html[data-design="v2"] body.admin-v4 .nav-user,
html[data-design="v2"] body.admin-v4 .nav-btn,
html[data-design="v2"] body.admin-v4 .btn-out,
html[data-design="v2"] body.admin-v4 .btn-preview {
  background: rgba(255,255,255,.68) !important;
  border-color: var(--rl-line) !important;
  color: var(--rl-text-2) !important;
  box-shadow: var(--rl-shadow-sm) !important;
}

html[data-design="v2"] body.app-v4 .icon-btn,
html[data-design="v2"] body.admin-v4 .nav-btn,
html[data-design="v2"] body.admin-v4 .btn-out {
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
}

html[data-design="v2"] body.app-v4 .mb-dash__topbar,
html[data-design="v2"] body.app-v4 .mb-cal__topbar,
html[data-design="v2"] body.app-v4 .mb-cust__topbar,
html[data-design="v2"] body.app-v4 .mb-req__topbar,
html[data-design="v2"] body.app-v4 .mb-fin__hd,
html[data-design="v2"] body.app-v4 .ch,
html[data-design="v2"] body.admin-v4 .dash-recent-head,
html[data-design="v2"] body.admin-v4 .card-head,
html[data-design="v2"] body.admin-v4 .panel-head,
html[data-design="v2"] body.admin-v4 .table-head,
html[data-design="v2"] body.admin-v4 .table-header {
  background: rgba(255,255,255,.70) !important;
  border-color: var(--rl-line) !important;
  border-radius: var(--rl-radius-lg) !important;
  box-shadow: var(--rl-shadow-sm) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi,
html[data-design="v2"] body.app-v4 .mb-schedule,
html[data-design="v2"] body.app-v4 .mb-map-card,
html[data-design="v2"] body.app-v4 .mb-requests,
html[data-design="v2"] body.app-v4 .mb-fin__card,
html[data-design="v2"] body.app-v4 .mb-fin__amount-display,
html[data-design="v2"] body.app-v4 .mb-fin__side,
html[data-design="v2"] body.app-v4 .card,
html[data-design="v2"] body.app-v4 .panel,
html[data-design="v2"] body.app-v4 .set-card,
html[data-design="v2"] body.app-v4 .pop-card,
html[data-design="v2"] body.app-v4 .table-wrap,
html[data-design="v2"] body.app-v4 .ibox,
html[data-design="v2"] body.admin-v4 .card,
html[data-design="v2"] body.admin-v4 .panel,
html[data-design="v2"] body.admin-v4 .admin-card,
html[data-design="v2"] body.admin-v4 .tenant-card,
html[data-design="v2"] body.admin-v4 .stat-card,
html[data-design="v2"] body.admin-v4 .info-card,
html[data-design="v2"] body.admin-v4 .mb-card,
html[data-design="v2"] body.admin-v4 .table-wrap,
html[data-design="v2"] body.admin-v4 .dash-recent,
html[data-design="v2"] body.admin-v4 .sup-settings-box,
html[data-design="v2"] body.admin-v4 .feat-group,
html[data-design="v2"] body.admin-v4 .role-card,
html[data-design="v2"] body.admin-v4 .adm-perm-card,
html[data-design="v2"] body.admin-v4 .team-card,
html[data-design="v2"] body.admin-v4 .team-stat,
html[data-design="v2"] body.admin-v4 .sc-aside,
html[data-design="v2"] body.admin-v4 .sc-cb-preview,
html[data-design="v2"] body.admin-v4 .pop-card,
html[data-design="v2"] body.admin-v4 .kpi-card,
html[data-design="v2"] body.admin-v4 .dash-qa-card,
html[data-design="v2"] body.app-v4 .umgmt-card,
html[data-design="v2"] body.app-v4 .umgmt-stat,
html[data-design="v2"] body.app-v4 .umgmt-plan,
html[data-design="v2"] body.app-v4 .umgmt-tabs,
html[data-design="v2"] body.app-v4 .umgmt-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
    linear-gradient(135deg, rgba(14,143,131,.055), transparent 54%) !important;
  border: 1px solid var(--rl-line) !important;
  border-radius: var(--rl-radius-lg) !important;
  box-shadow: var(--rl-shadow) !important;
  color: var(--rl-text) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi,
html[data-design="v2"] body.admin-v4 .kpi-card {
  position: relative !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi::before,
html[data-design="v2"] body.admin-v4 .kpi-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: var(--rl-gradient) !important;
  opacity: .9 !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi__value,
html[data-design="v2"] body.app-v4 .mb-fin__amount-value,
html[data-design="v2"] body.app-v4 .kpi-val,
html[data-design="v2"] body.admin-v4 .kpi-val,
html[data-design="v2"] body.app-v4 [id$="-total"],
html[data-design="v2"] body.app-v4 [id$="-display"] {
  color: var(--rl-text) !important;
  font-weight: 820 !important;
  letter-spacing: -.02em !important;
  text-shadow: none !important;
}

html[data-design="v2"] body.app-v4 .btn,
html[data-design="v2"] body.app-v4 .mb-btn,
html[data-design="v2"] body.app-v4 button,
html[data-design="v2"] body.admin-v4 .btn,
html[data-design="v2"] body.admin-v4 button,
html[data-design="v2"] body.admin-v4 .sa-btn {
  font-family: var(--rl-font) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  min-height: 40px;
}

html[data-design="v2"] body.app-v4 .btn-primary,
html[data-design="v2"] body.app-v4 .btn-cta,
html[data-design="v2"] body.app-v4 .btn-submit,
html[data-design="v2"] body.app-v4 .btn-p,
html[data-design="v2"] body.app-v4 .mb-btn--primary,
html[data-design="v2"] body.app-v4 .empty-cta,
html[data-design="v2"] body.app-v4 button.primary,
html[data-design="v2"] body.admin-v4 .btn-preview,
html[data-design="v2"] body.admin-v4 .btn-p,
html[data-design="v2"] body.admin-v4 .btn-primary,
html[data-design="v2"] body.admin-v4 .empty-cta,
html[data-design="v2"] body.admin-v4 button.primary {
  background: var(--rl-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 34px rgba(14,143,131,.24) !important;
}

html[data-design="v2"] body.app-v4 .btn-n,
html[data-design="v2"] body.app-v4 .mb-btn:not(.mb-btn--primary),
html[data-design="v2"] body.app-v4 .btn-act,
html[data-design="v2"] body.admin-v4 .btn-n,
html[data-design="v2"] body.admin-v4 .btn-act,
html[data-design="v2"] body.admin-v4 .ann-toggle {
  background: rgba(255,255,255,.76) !important;
  border: 1px solid var(--rl-line) !important;
  color: var(--rl-text-2) !important;
  border-radius: 999px !important;
  box-shadow: var(--rl-shadow-sm) !important;
}

html[data-design="v2"] body.app-v4 .btn-d,
html[data-design="v2"] body.app-v4 .btn-danger,
html[data-design="v2"] body.admin-v4 .btn-d,
html[data-design="v2"] body.admin-v4 .btn-danger {
  background: rgba(198,64,64,.10) !important;
  border-color: rgba(198,64,64,.22) !important;
  color: var(--rl-danger) !important;
}

html[data-design="v2"] body.app-v4 input:not([type="checkbox"]):not([type="radio"]),
html[data-design="v2"] body.app-v4 textarea,
html[data-design="v2"] body.app-v4 select,
html[data-design="v2"] body.admin-v4 input:not([type="checkbox"]):not([type="radio"]),
html[data-design="v2"] body.admin-v4 textarea,
html[data-design="v2"] body.admin-v4 select,
html[data-design="v2"] body.admin-v4 .search-inp,
html[data-design="v2"] body.admin-v4 .sa-input {
  min-height: 44px !important;
  background: rgba(255,255,255,.84) !important;
  border: 1px solid var(--rl-line) !important;
  border-radius: 15px !important;
  color: var(--rl-text) !important;
  font-family: var(--rl-font) !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html[data-design="v2"] body.app-v4 input:focus,
html[data-design="v2"] body.app-v4 textarea:focus,
html[data-design="v2"] body.app-v4 select:focus,
html[data-design="v2"] body.admin-v4 input:focus,
html[data-design="v2"] body.admin-v4 textarea:focus,
html[data-design="v2"] body.admin-v4 select:focus,
html[data-design="v2"] body.admin-v4 .search-inp:focus,
html[data-design="v2"] body.admin-v4 .sa-input:focus {
  outline: none !important;
  border-color: rgba(14,143,131,.45) !important;
  box-shadow: var(--rl-focus), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

html[data-design="v2"] body.app-v4 .badge,
html[data-design="v2"] body.app-v4 .pill,
html[data-design="v2"] body.app-v4 .nbadge,
html[data-design="v2"] body.app-v4 .mb-pill,
html[data-design="v2"] body.app-v4 .tag,
html[data-design="v2"] body.admin-v4 .badge,
html[data-design="v2"] body.admin-v4 .pill,
html[data-design="v2"] body.admin-v4 .tag,
html[data-design="v2"] body.admin-v4 .tab-badge,
html[data-design="v2"] body.admin-v4 .nav-badge,
html[data-design="v2"] body.admin-v4 .role-badge,
html[data-design="v2"] body.admin-v4 .team-card-status,
html[data-design="v2"] body.admin-v4 .sup-ticket-status,
html[data-design="v2"] body.admin-v4 .sla-badge {
  background: rgba(14,143,131,.10) !important;
  border: 1px solid rgba(14,143,131,.20) !important;
  color: var(--rl-petrol) !important;
  border-radius: 999px !important;
  font-size: var(--rl-caption) !important;
  font-weight: 780 !important;
  box-shadow: none !important;
}

html[data-design="v2"] body.app-v4 .table-wrap,
html[data-design="v2"] body.admin-v4 .table-wrap {
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 table,
html[data-design="v2"] body.admin-v4 table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 th,
html[data-design="v2"] body.admin-v4 th,
html[data-design="v2"] body.admin-v4 .tdb-table th {
  background: rgba(247,244,236,.72) !important;
  color: var(--rl-text-3) !important;
  border-bottom: 1px solid var(--rl-line) !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
}

html[data-design="v2"] body.app-v4 td,
html[data-design="v2"] body.admin-v4 td,
html[data-design="v2"] body.admin-v4 .tdb-table td {
  border-color: var(--rl-line) !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 tbody tr:hover,
html[data-design="v2"] body.admin-v4 tbody tr:hover,
html[data-design="v2"] body.admin-v4 .dash-recent-row:hover,
html[data-design="v2"] body.admin-v4 .sup-ticket-row:hover,
html[data-design="v2"] body.admin-v4 .audit-row:hover {
  background: rgba(14,143,131,.055) !important;
}

html[data-design="v2"] body.app-v4 .empty,
html[data-design="v2"] body.app-v4 .empty-state,
html[data-design="v2"] body.app-v4 [data-mb-dash-empty],
html[data-design="v2"] body.admin-v4 .empty,
html[data-design="v2"] body.admin-v4 .empty-state {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)),
    var(--rl-gradient-soft) !important;
  border: 1px dashed rgba(14,143,131,.28) !important;
  border-radius: var(--rl-radius-lg) !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 .mbg,
html[data-design="v2"] body.admin-v4 .modal-bg,
html[data-design="v2"] body.admin-v4 .dlg-bg {
  background: rgba(23,33,29,.44) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
}

html[data-design="v2"] body.app-v4 .modal,
html[data-design="v2"] body.admin-v4 .modal,
html[data-design="v2"] body.admin-v4 .dlg {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)),
    var(--rl-gradient-soft) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  border-radius: var(--rl-radius-xl) !important;
  box-shadow: var(--rl-shadow-lg) !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 .mhd,
html[data-design="v2"] body.app-v4 .mfoot,
html[data-design="v2"] body.admin-v4 .modal-title,
html[data-design="v2"] body.admin-v4 .modal-actions {
  border-color: var(--rl-line) !important;
}

html[data-design="v2"] body.app-v4 .mclose,
html[data-design="v2"] body.app-v4 .mobile-more-close,
html[data-design="v2"] body.admin-v4 .modal-close {
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid var(--rl-line) !important;
  color: var(--rl-text-2) !important;
}

@media (max-width: 900px) {
  html[data-design="v2"] body.admin-v4 nav.nav {
    min-height: 62px !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,.80) !important;
    border-bottom: 1px solid var(--rl-line) !important;
    box-shadow: 0 10px 28px rgba(28,42,36,.07) !important;
  }

  html[data-design="v2"] body.admin-v4 .nav-tabs {
    position: sticky !important;
    top: 62px !important;
    z-index: 50 !important;
    display: flex !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rl-line) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 10px 26px rgba(28,42,36,.06) !important;
  }

  html[data-design="v2"] body.admin-v4 .tab-btn {
    flex: 0 0 auto !important;
    min-width: 136px !important;
  }

  html[data-design="v2"] body.admin-v4 .content,
  html[data-design="v2"] body.admin-v4 main.content {
    margin-left: 0 !important;
    padding: 18px 14px 34px !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4,
  html[data-design="v2"] body.admin-v4 {
    --rl-body: 14px;
    overflow-x: clip !important;
  }

  html[data-design="v2"] body.app-v4 {
    padding-bottom: calc(var(--rl-mobile-nav-h) + env(safe-area-inset-bottom)) !important;
  }

  html[data-design="v2"] body.app-v4 .page {
    margin-left: 0 !important;
    padding: 16px 12px calc(var(--rl-mobile-nav-h) + 28px + env(safe-area-inset-bottom)) !important;
  }

  html[data-design="v2"] body.app-v4 nav.nav {
    min-height: 58px !important;
    padding: 8px 12px !important;
    border-radius: 0 0 22px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rl-line) !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: 0 12px 30px rgba(28,42,36,.08) !important;
  }

  html[data-design="v2"] body.app-v4 .nav-brand {
    min-height: 44px !important;
    padding: 6px 8px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-design="v2"] body.app-v4 .nav-tabs {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 .nav-right {
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-design="v2"] body.app-v4 .nav-user,
  html[data-design="v2"] body.app-v4 .icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-dash__topbar,
  html[data-design="v2"] body.app-v4 .mb-cal__topbar,
  html[data-design="v2"] body.app-v4 .mb-cust__topbar,
  html[data-design="v2"] body.app-v4 .mb-req__topbar,
  html[data-design="v2"] body.app-v4 .mb-fin__hd,
  html[data-design="v2"] body.app-v4 .ch {
    border-radius: var(--rl-radius) !important;
    padding: 14px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-kpi,
  html[data-design="v2"] body.app-v4 .card,
  html[data-design="v2"] body.app-v4 .panel,
  html[data-design="v2"] body.app-v4 .set-card,
  html[data-design="v2"] body.app-v4 .table-wrap,
  html[data-design="v2"] body.admin-v4 .card,
  html[data-design="v2"] body.admin-v4 .panel,
  html[data-design="v2"] body.admin-v4 .table-wrap,
  html[data-design="v2"] body.admin-v4 .kpi-card,
  html[data-design="v2"] body.admin-v4 .dash-qa-card {
    border-radius: var(--rl-radius) !important;
  }

  html[data-design="v2"] body.app-v4 .btn,
  html[data-design="v2"] body.app-v4 .mb-btn,
  html[data-design="v2"] body.app-v4 button,
  html[data-design="v2"] body.admin-v4 .btn,
  html[data-design="v2"] body.admin-v4 button {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 .mfoot,
  html[data-design="v2"] body.admin-v4 .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html[data-design="v2"] body.app-v4 .mfoot .btn,
  html[data-design="v2"] body.app-v4 .mfoot button,
  html[data-design="v2"] body.admin-v4 .modal-actions .btn,
  html[data-design="v2"] body.admin-v4 .modal-actions button {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  html[data-design="v2"] body.app-v4 .mbg,
  html[data-design="v2"] body.admin-v4 .modal-bg,
  html[data-design="v2"] body.admin-v4 .dlg-bg {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  html[data-design="v2"] body.app-v4 .modal,
  html[data-design="v2"] body.admin-v4 .modal,
  html[data-design="v2"] body.admin-v4 .dlg {
    width: 100% !important;
    max-width: none !important;
    max-height: min(88dvh, 760px) !important;
    border-radius: 26px 26px 0 0 !important;
    border-bottom: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .table-wrap,
  html[data-design="v2"] body.admin-v4 .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }
}

html[data-design="v2"] body.app-v4 .mob-bnav {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  height: 64px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80)),
    var(--rl-gradient-soft) !important;
  box-shadow: 0 20px 52px rgba(28,42,36,.18) !important;
  backdrop-filter: blur(22px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
}

html[data-design="v2"] body.app-v4 .mob-bnav-item {
  min-height: 50px !important;
  border-radius: 18px !important;
  color: var(--rl-text-3) !important;
  font-size: 10.5px !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 .mob-bnav-item svg {
  width: 20px !important;
  height: 20px !important;
}

html[data-design="v2"] body.app-v4 .mob-bnav-item.active {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(14,143,131,.24) !important;
}

html[data-design="v2"] body.app-v4 .mobile-more-backdrop {
  background: rgba(23,33,29,.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html[data-design="v2"] body.app-v4 .mobile-more-sheet {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)),
    var(--rl-gradient-soft) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  box-shadow: 0 -22px 66px rgba(28,42,36,.18) !important;
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

html[data-design="v2"] body.app-v4 .mobile-more-handle {
  background: rgba(14,143,131,.28) !important;
}

@media (max-width: 380px) {
  html[data-design="v2"] body.app-v4 .page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    height: 62px !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav-item {
    font-size: 10px !important;
  }
}

/* ==========================================================================
   Relaunch pass 2 - visible product surface transformation
   Focus: Dashboard, Calendar, Customers, Requests.
   ========================================================================== */

html[data-design="v2"] body.app-v4 {
  --rl-hero-text: #f8fffb;
  --rl-hero-muted: rgba(248,255,251,.72);
  --rl-panel-border: rgba(14,143,131,.18);
  --rl-panel-border-strong: rgba(14,143,131,.34);
}

html[data-design="v2"] body.app-v4 #page-dashboard,
html[data-design="v2"] body.app-v4 #page-kalender,
html[data-design="v2"] body.app-v4 #page-kunden,
html[data-design="v2"] body.app-v4 #page-anfragen {
  max-width: none !important;
  padding-top: 24px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard::before,
html[data-design="v2"] body.app-v4 #page-kalender::before,
html[data-design="v2"] body.app-v4 #page-kunden::before,
html[data-design="v2"] body.app-v4 #page-anfragen::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(118deg, rgba(14,143,131,.12), transparent 28%, rgba(56,200,181,.08) 76%, transparent),
    repeating-linear-gradient(90deg, rgba(14,143,131,.03) 0 1px, transparent 1px 92px) !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.62), transparent 74%) !important;
}

/* Dashboard: command-center composition */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash {
  display: block !important;
  height: auto !important;
  min-height: calc(100dvh - 48px) !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__main {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 20px !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar {
  min-height: 176px !important;
  height: auto !important;
  align-items: flex-start !important;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.92) 48%, rgba(56,200,181,.82)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 55%) !important;
  color: var(--rl-hero-text) !important;
  box-shadow: 0 30px 86px rgba(7,79,70,.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
  overflow: hidden !important;
  position: relative !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 72px),
    linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 72px) !important;
  opacity: .26 !important;
  pointer-events: none !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title-group {
  position: relative !important;
  z-index: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 680px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title {
  color: var(--rl-hero-text) !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: .98 !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__subtitle {
  color: var(--rl-hero-muted) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search {
  position: relative !important;
  z-index: 1 !important;
  width: min(360px, 34vw) !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input::placeholder,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__kbd {
  color: rgba(255,255,255,.82) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__icon-btn {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__scroll {
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: -76px 24px 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
  min-height: 148px !important;
  padding: 22px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82)),
    linear-gradient(135deg, rgba(14,143,131,.13), transparent 68%) !important;
  border-color: rgba(255,255,255,.78) !important;
  box-shadow: 0 22px 58px rgba(28,42,36,.14) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value {
  margin-top: 12px !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, .58fr) !important;
  gap: 22px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  align-items: start !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule {
  min-height: 620px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__hd {
  min-height: 74px !important;
  padding: 20px 24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62)),
    var(--rl-gradient-soft) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__body {
  min-height: 500px !important;
  padding: 22px 26px !important;
  gap: 14px !important;
  background:
    linear-gradient(90deg, rgba(14,143,131,.045), transparent 42%),
    repeating-linear-gradient(0deg, rgba(42,50,45,.055) 0 1px, transparent 1px 72px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__rightcol {
  gap: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card {
  min-height: 310px !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.94), rgba(14,143,131,.78)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px) !important;
  color: #fff !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card [data-mb-dash-route-meta] {
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests {
  border-radius: 30px !important;
  overflow: hidden !important;
}

/* Calendar: operations cockpit */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal {
  height: auto !important;
  min-height: calc(100dvh - 62px) !important;
  padding: 0 !important;
  gap: 20px !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar {
  min-height: 126px !important;
  padding: 24px 26px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.72)),
    linear-gradient(110deg, rgba(14,143,131,.16), transparent 52%, rgba(56,200,181,.12)) !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__title {
  order: -1 !important;
  min-width: min(100%, 380px) !important;
  flex: 1 1 100% !important;
  margin: 0 !important;
  font-size: clamp(28px, 3vw, 46px) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar-group,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search {
  min-height: 48px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
  gap: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase {
  border-radius: 28px !important;
  padding: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi {
  min-height: 148px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.86)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 64%) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-label,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-sub {
  color: rgba(255,255,255,.72) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-value {
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
  min-height: 720px !important;
  border-radius: 34px !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hd,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__hd {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,244,236,.84)) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell {
  min-height: 68px !important;
  padding: 14px 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-event,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__event {
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(14,143,131,.14) !important;
}

/* Customers: CRM dossier */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust {
  height: auto !important;
  min-height: calc(100dvh - 62px) !important;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar {
  min-height: 118px !important;
  padding: 24px 26px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.74)),
    linear-gradient(110deg, rgba(14,143,131,.15), transparent 56%) !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar::before {
  content: "Kunden" !important;
  flex: 1 1 100% !important;
  color: var(--rl-text) !important;
  font-size: clamp(30px, 3.4vw, 48px) !important;
  line-height: 1 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search {
  max-width: 460px !important;
  min-height: 50px !important;
  border-radius: 999px !important;
  padding-inline: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip[data-active="true"] {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(14,143,131,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail {
  border-radius: 34px !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-hd {
  min-height: 64px !important;
  padding: 18px 20px !important;
  background: rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row {
  grid-template-columns: 56px 1fr auto !important;
  gap: 14px !important;
  padding: 18px 20px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  background: var(--rl-gradient) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(14,143,131,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-name {
  font-size: 15px !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
  grid-template-columns: 88px 1fr auto !important;
  gap: 20px !important;
  padding: 28px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.82)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 62%) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-name,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-sub,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-sub a {
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
  gap: 10px !important;
  padding: 16px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--rl-line) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi {
  border-radius: 20px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--rl-line) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tabs {
  padding: 10px 16px 0 !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tab {
  min-height: 44px !important;
  border-radius: 999px 999px 0 0 !important;
  font-weight: 750 !important;
}

/* Requests: pipeline inbox */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req {
  height: auto !important;
  min-height: calc(100dvh - 62px) !important;
  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar {
  min-height: 126px !important;
  padding: 24px 26px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.84)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 60%) !important;
  box-shadow: 0 30px 86px rgba(7,79,70,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar::before {
  content: "Anfragen" !important;
  flex: 1 1 100% !important;
  color: #fff !important;
  font-size: clamp(30px, 3.4vw, 48px) !important;
  line-height: 1 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tabs {
  min-height: 52px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.24) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tab {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.76) !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tab[data-active="true"] {
  background: #fff !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 14px 32px rgba(6,63,57,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search {
  max-width: 360px !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input::placeholder {
  color: rgba(255,255,255,.84) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
  border-radius: 34px !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-hd {
  min-height: 64px !important;
  padding: 18px 20px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item {
  grid-template-columns: 10px 1fr auto !important;
  gap: 16px !important;
  padding: 20px 20px 20px 14px !important;
  border-bottom-color: rgba(42,50,45,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item[data-selected="true"] {
  background:
    linear-gradient(135deg, rgba(14,143,131,.14), rgba(255,255,255,.78)) !important;
  box-shadow: inset 4px 0 0 var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-dot {
  width: 10px !important;
  height: 42px !important;
  border-radius: 999px !important;
  margin-top: 0 !important;
  background: var(--rl-gradient) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-name {
  font-size: 15px !important;
  font-weight: 780 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-hd {
  padding: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.74)),
    var(--rl-gradient-soft) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-title {
  font-size: clamp(26px, 2.6vw, 38px) !important;
  line-height: 1.05 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card {
  grid-column: span 6 !important;
  border-radius: 24px !important;
  padding: 20px !important;
  background: rgba(255,255,255,.76) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card--wide {
  grid-column: 1 / -1 !important;
}

/* Shared mobile surface transformation */
@media (max-width: 980px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
    margin-top: 20px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-dashboard,
  html[data-design="v2"] body.app-v4 #page-kalender,
  html[data-design="v2"] body.app-v4 #page-kunden,
  html[data-design="v2"] body.app-v4 #page-anfragen {
    padding-top: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar {
    min-height: 150px !important;
    padding: 22px 18px !important;
    border-radius: 28px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar {
    flex-wrap: wrap !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: -34px 10px 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
    min-height: 118px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value {
    font-size: 26px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
    border-radius: 26px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding-bottom: 4px !important;
    scroll-snap-type: x proximity !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-minical,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase {
    min-width: 78vw !important;
    scroll-snap-align: start !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
    grid-template-columns: 68px 1fr !important;
    padding: 22px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions button {
    flex: 1 1 auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card {
    grid-column: 1 / -1 !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }
}