/* ════════════════════════════════════════════════════════════════════════
   68-brand.css — MobileBooking brand visual identity (shared design layer)

   Source of truth: landing.html + 67-landing.css.
   Loads LAST in the cascade (after 47-design-refinement and 60-funnel-v4)
   so it can retune palettes without editing earlier layers.

   Scope strategy:
   • Public/auth/onboarding/funnel/legal pages (body.premium-public) get the
     full v11 retune — warm-cool ivory bg, deep-teal accent, large radii,
     v11 button gradient, glass cards, brand-text gradient.
   • Dashboards (app.html, admin.html — no .premium-public) only inherit
     the accent + brand-mark gradient so tables/forms/widgets stay intact.
   • Dark theme stays usable everywhere; v11's brand emerald/teal
     replaces the previous bright #0e8f83 in both light and dark.

   Rollback: delete this file + the matching <link rel="stylesheet"> tags.
   ════════════════════════════════════════════════════════════════════════ */


:root {
  /* v11 brand palette (mirrors 67-landing-v11.css) */
  --v11-bg:           #f7faf9;
  --v11-bg-warm:      #eef8f6;
  --v11-ink:          #11161b;
  --v11-ink-soft:     #53606b;
  --v11-ink-muted:    #7b8794;
  --v11-font:         'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --v11-mint:         #50d6c4;
  --v11-mint-deep:    #0e8f83;
  --v11-teal:         #08766e;
  --v11-deep:         #125f80;
  --v11-blue:         #0e8f83;
  --v11-champagne:    #0e8f83;

  /* v11 surface + line + shadow */
  --v11-surface:        rgba(255,255,255,.62);
  --v11-surface-strong: rgba(255,255,255,.84);
  --v11-line:           rgba(37,50,61,.12);
  --v11-line-strong:    rgba(37,50,61,.20);
  --v11-shadow:         0 30px 90px rgba(25,39,54,.16), 0 8px 22px rgba(25,39,54,.08);
  --v11-shadow-soft:    0 18px 54px rgba(25,39,54,.12);
  --v11-shadow-cta:     0 20px 42px rgba(17,119,128,.25);

  /* v11 radii — Marco V3.0: Calm-Rect, keine Pills mehr */
  --v11-radius-xl:    var(--radius-md);
  --v11-radius-lg:    var(--radius-md);
  --v11-radius-md:    var(--radius-sm);
  --v11-radius-pill:  var(--radius-sm);

  /* v11 gradients */
  --v11-gradient-cta:        linear-gradient(135deg, #08766e, #125f80);
  --v11-gradient-cta-hover:  linear-gradient(135deg, #0a8a82, #166f96);
  --v11-gradient-brand-text: linear-gradient(135deg, #0d6b69 0%, #0e9384 45%, #0c81a8 100%);
  --v11-gradient-mint:       linear-gradient(120deg, rgba(80,214,196,.13), transparent 38%, rgba(14,143,131,.14));

  --mb-public-content-max: 1180px;
  --mb-public-content-pad-x: clamp(16px, 2vw, 32px);
}


/* ────────────────────────────────────────────────────────────────────────
   1. ACCENT RETUNING — applies to the whole v2 system
   Replaces the calmer sage from 47-design-refinement with v11 deep teal.
   Keeps semantic alias names so consumers don't need to change.
   ──────────────────────────────────────────────────────────────────────── */

html[data-design="v2"][data-theme="light"] {
  --accent-emerald:        #0e8f83;
  --accent-emerald-hover:  #08766e;
  --accent-emerald-soft:   rgba(14,143,131,.10);
  --accent-emerald-ring:   rgba(14,143,131,.24);

  --status-success:        #0e8f83;
  --status-success-soft:   rgba(14,143,131,.12);

  --canvas:                #f7faf9;
}

html[data-design="v2"]:not([data-theme="light"]) {
  /* Dark dashboards: pull the brand emerald toward v11 deep teal as well */
  --mb-premium-blue:    #0e8f83;
  --mb-premium-blue-2:  #14b6a8;
}


/* ────────────────────────────────────────────────────────────────────────
   2. PUBLIC PAGES — full v11 visual identity (body.premium-public)
   Pages: landing, login, register, marketplace, checkout, onboarding,
   form, verify-email, auth-callback, impressum, agb, datenschutz.
   ──────────────────────────────────────────────────────────────────────── */

/* Override the inline <style> token redefinitions every public page
   carries. Inline declarations sit at specificity (0,0,1,0); this
   selector at (0,0,3,1) wins regardless of cascade order. */
html[data-design="v2"][data-theme="light"] body.premium-public {
  --np: #0e8f83;
  --na: #08766e;
  --nb: #0e8f83;
  --ng: #0e8f83;
  --bg: #f7faf9;
  --s1: #ffffff;
  --s2: rgba(255,255,255,.72);
  --s3: rgba(238,247,244,.84);
  --s4: #eef8f6;
  --t1: #11161b;
  --t2: #53606b;
  --t3: #7b8794;
  --b1: rgba(37,50,61,.10);
  --b2: rgba(37,50,61,.18);
  --b3: rgba(37,50,61,.28);
  --sh: 0 18px 54px rgba(25,39,54,.12);
  --sh2: 0 8px 22px rgba(25,39,54,.08);
  --r: var(--radius-md);
  --r2: var(--radius-lg);
  --r3: var(--radius-lg);
  --r4: var(--radius-lg);
}

/* Ambient background — warm ivory → cool off-white wash, with a faint
   mint/blue glow and 104px tile lines. Matches landing-v11 verbatim. */
html[data-design="v2"][data-theme="light"] body.premium-public {
  background:
    linear-gradient(145deg, rgba(232,247,242,.94) 0%, rgba(247,250,248,.98) 35%, rgba(238,247,244,.96) 72%, rgba(245,250,247,1) 100%) !important;
  background-attachment: fixed;
  color: var(--v11-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html[data-design="v2"][data-theme="light"] body.premium-public::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(80,214,196,.08), transparent 32%, rgba(14,143,131,.08) 68%, transparent),
    repeating-linear-gradient(90deg, rgba(17,22,27,.024) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(17,22,27,.018) 0 1px, transparent 1px 104px);
}

/* Dark mode mirror for body.premium-public — every in-scope user page
   (login, register, onboarding, verify-email, checkout, marketplace, form)
   carries the .premium-public class. agb/datenschutz/impressum are also
   .premium-public but locked via data-theme-lock="light" so this block
   never matches them. */
html[data-design="v2"][data-theme="dark"] body.premium-public {
  --np: #14b6a8;
  --na: #0e8f83;
  --nb: #14b6a8;
  --ng: #14b6a8;
  --bg: #03130F;
  --s1: #051B16;
  --s2: rgba(255,255,255,.045);
  --s3: rgba(255,255,255,.07);
  --s4: rgba(255,255,255,.03);
  --t1: #F6FFFB;
  --t2: #DDFBF0;
  --t3: #A7BDB3;
  --b1: rgba(167,243,208,.10);
  --b2: rgba(167,243,208,.18);
  --b3: rgba(167,243,208,.28);
  --sh: 0 18px 54px rgba(0,0,0,.55);
  --sh2: 0 8px 22px rgba(0,0,0,.42);
  --r: var(--radius-md);
  --r2: var(--radius-lg);
  --r3: var(--radius-lg);
  --r4: var(--radius-lg);
}

html[data-design="v2"][data-theme="dark"] body.premium-public {
  background:
    linear-gradient(145deg, rgba(5,27,22,.94) 0%, rgba(3,19,15,.98) 35%, rgba(5,27,22,.96) 72%, rgba(7,31,25,1) 100%) !important;
  background-attachment: fixed;
  color: #F6FFFB;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html[data-design="v2"][data-theme="dark"] body.premium-public::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(80,214,196,.10), transparent 32%, rgba(14,143,131,.10) 68%, transparent),
    repeating-linear-gradient(90deg, rgba(167,243,208,.035) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(167,243,208,.030) 0 1px, transparent 1px 104px);
}


/* ────────────────────────────────────────────────────────────────────────
   3. PRIMARY CTAs — v11 emerald→deep-teal pill across all public pages
   Targets every common CTA selector that public pages use.
   ──────────────────────────────────────────────────────────────────────── */

html[data-design="v2"][data-theme="light"] body.premium-public .btn-primary,
html[data-design="v2"][data-theme="light"] body.premium-public .btn-p,
html[data-design="v2"][data-theme="light"] body.premium-public .vc-btn-p,
html[data-design="v2"][data-theme="light"] body.premium-public .cta,
html[data-design="v2"][data-theme="light"] body.premium-public .mkp-search-btn,
html[data-design="v2"][data-theme="light"] body.premium-public .al-cta-primary,
html[data-design="v2"][data-theme="light"] body.premium-public .al-submit,
html[data-design="v2"][data-theme="light"] body.premium-public .reg-submit,
html[data-design="v2"][data-theme="light"] body.premium-public .onb-cta,
html[data-design="v2"][data-theme="light"] body.premium-public .checkout-cta,
html[data-design="v2"][data-theme="light"] body.premium-public .funnel-cta {
  background: var(--v11-gradient-cta) !important;
  box-shadow: var(--v11-shadow-cta) !important;
  border-radius: var(--v11-radius-pill) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

html[data-design="v2"][data-theme="light"] body.premium-public .btn-primary:hover,
html[data-design="v2"][data-theme="light"] body.premium-public .btn-p:hover,
html[data-design="v2"][data-theme="light"] body.premium-public .vc-btn-p:hover,
html[data-design="v2"][data-theme="light"] body.premium-public .cta:hover,
html[data-design="v2"][data-theme="light"] body.premium-public .mkp-search-btn:hover,
html[data-design="v2"][data-theme="light"] body.premium-public .al-cta-primary:hover,
html[data-design="v2"][data-theme="light"] body.premium-public .al-submit:hover,
html[data-design="v2"][data-theme="light"] body.premium-public .reg-submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

/* Form-rating scale buttons — keep grid layout, swap selected gradient */
html[data-design="v2"][data-theme="light"] body.premium-public .scale-btn.selected {
  background: var(--v11-gradient-cta) !important;
  border-color: transparent !important;
  box-shadow: var(--v11-shadow-cta) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   4. CARDS — soft v11 elevation + glass on public pages
   ──────────────────────────────────────────────────────────────────────── */

html[data-design="v2"][data-theme="light"] body.premium-public .card,
html[data-design="v2"][data-theme="light"] body.premium-public .vc-card,
html[data-design="v2"][data-theme="light"] body.premium-public .panel,
html[data-design="v2"][data-theme="light"] body.premium-public .funnel-card,
html[data-design="v2"][data-theme="light"] body.premium-public .checkout-card,
html[data-design="v2"][data-theme="light"] body.premium-public .form-card,
html[data-design="v2"][data-theme="light"] body.premium-public .onb-card {
  background: var(--v11-surface-strong) !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: var(--v11-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}


/* ────────────────────────────────────────────────────────────────────────
   5. INPUTS — v11 focus halo (mint glow on emerald border)
   Excludes checkbox / radio / submit so they keep their native sizing.
   ──────────────────────────────────────────────────────────────────────── */

html[data-design="v2"][data-theme="light"] body.premium-public input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-design="v2"][data-theme="light"] body.premium-public textarea,
html[data-design="v2"][data-theme="light"] body.premium-public select {
  background: rgba(255,255,255,.78) !important;
  border-color: var(--v11-line) !important;
  border-radius: 10px !important;
  color: var(--v11-ink) !important;
}

html[data-design="v2"][data-theme="light"] body.premium-public input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html[data-design="v2"][data-theme="light"] body.premium-public textarea:focus,
html[data-design="v2"][data-theme="light"] body.premium-public select:focus {
  border-color: rgba(14,143,131,.5) !important;
  box-shadow: 0 0 0 4px rgba(80,214,196,.16), inset 0 1px 0 rgba(255,255,255,.72) !important;
  outline: none !important;
}


/* ────────────────────────────────────────────────────────────────────────
   6. BRAND MARK + WORDMARK — v11 gradient on the icon and the text
   Applies to BOTH public pages and dashboards so the brand identity
   reads as one product across the system.
   ──────────────────────────────────────────────────────────────────────── */

html[data-design="v2"] .brand-ico,
html[data-design="v2"] .nav-icon,
html[data-design="v2"] .nav-av,
html[data-design="v2"] .mkp-brand-ico,
html[data-design="v2"] .al-logo-icon {
  background: var(--v11-gradient-cta) !important;
  box-shadow: 0 4px 18px rgba(17,119,128,.28) !important;
  border-radius: 10px !important;
}

html[data-design="v2"] .nav-av {
  border-radius: 50% !important;
}

html[data-design="v2"][data-theme="light"] body.premium-public .brand-name,
html[data-design="v2"][data-theme="light"] body.premium-public .mkp-brand-name {
  background: var(--v11-gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}


/* ────────────────────────────────────────────────────────────────────────
   7. UTILITY CLASSES — opt-in v11 primitives for new components
   Use anywhere by adding the .v11-* class.
   ──────────────────────────────────────────────────────────────────────── */

.v11-glass {
  position: relative;
  border: 1px solid rgba(255,255,255,.74);
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.32)),
    var(--v11-gradient-mint);
  border-radius: var(--v11-radius-lg);
  box-shadow: var(--v11-shadow);
  backdrop-filter: blur(28px) saturate(1.22);
  -webkit-backdrop-filter: blur(28px) saturate(1.22);
}

.v11-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--v11-radius-pill);
  color: #ffffff;
  background: var(--v11-gradient-cta);
  box-shadow: var(--v11-shadow-cta);
  font-weight: 720;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.v11-cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.v11-card {
  background: var(--v11-surface-strong);
  border: 1px solid var(--v11-line);
  border-radius: var(--v11-radius-lg);
  box-shadow: var(--v11-shadow-soft);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}


/* ────────────────────────────────────────────────────────────────────────
   8. DASHBOARDS — full v11 surface retune for app.html + admin.html
   Scoped to body.app-v4 / body.admin-v4 so it can't leak elsewhere.
   Touches background / border / radius / shadow / focus only — never
   width / display / grid / padding / layout. Tables stay legible.
   ──────────────────────────────────────────────────────────────────────── */

/* 8.1 — Light-mode dashboard token retune.
   The two dashboards re-declare --bg, --s1..s4, --b1..b3, --np, --na inline.
   This selector (0,0,3,1) outweighs their inline (0,0,1,0) and propagates
   v11 colors into every bespoke .card / .modal / .kpi-card / .panel that
   already reads var(--s1), var(--b1) etc. */
html[data-design="v2"][data-theme="light"] body.app-v4,
html[data-design="v2"][data-theme="light"] body.admin-v4 {
  --np: #0e8f83;
  --na: #08766e;
  --nb: #0e8f83;
  --ng: #0e8f83;
  --bg: #f7faf9;
  --s1: #ffffff;
  --s2: #f4f6fa;
  --s3: #ecf2ef;
  --s4: #eef8f6;
  --t1: #11161b;
  --t2: #53606b;
  --t3: #7b8794;
  --t4: #eef8f6;
  --b1: rgba(37,50,61,.08);
  --b2: rgba(37,50,61,.14);
  --b3: rgba(37,50,61,.22);
  --sh: 0 18px 54px rgba(25,39,54,.10);
  --sh2: 0 8px 22px rgba(25,39,54,.06);
  --r: var(--radius-md);
  --r2: var(--radius-lg);
  --r3: var(--radius-lg);
  --body-bg: linear-gradient(150deg,#ffffff 0%,rgba(80,214,196,.05) 100%);
  --nav-bg: rgba(255,255,255,.86);
}

/* 8.2 — Dark-mode dashboard token retune.
   Pull the deep emerald toward v11 teal and tighten surface contrast. */
html[data-design="v2"]:not([data-theme="light"]) body.app-v4,
html[data-design="v2"]:not([data-theme="light"]) body.admin-v4 {
  --np: #0e8f83;
  --na: #14b6a8;
  --nb: #50d6c4;
  --ng: #14b6a8;
}

/* 8.3 — Common card / panel / modal / KPI surface — v11 radii + soft elevation.
   Background/border/radius/shadow only. Tables get the radius via parent
   wrappers; td/th rules untouched so column widths and row heights don't move. */
html[data-design="v2"][data-theme="light"] body.app-v4 .card,
html[data-design="v2"][data-theme="light"] body.app-v4 .panel,
html[data-design="v2"][data-theme="light"] body.app-v4 .modal,
html[data-design="v2"][data-theme="light"] body.app-v4 .kpi-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .stat-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .module-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .dashboard-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-tile,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-panel,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-kpi,
html[data-design="v2"][data-theme="light"] body.app-v4 .empty-state,
html[data-design="v2"][data-theme="light"] body.admin-v4 .card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .panel,
html[data-design="v2"][data-theme="light"] body.admin-v4 .modal,
html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .stat-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .empty-state {
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: var(--v11-shadow-soft) !important;
  border-color: rgba(37,50,61,.10) !important;
}

/* 8.4 — Dashboard primary buttons — pill + v11 gradient.
   Stays opt-in via .btn-primary / .btn-p — never touches .btn-logout, .tseg, etc. */
html[data-design="v2"][data-theme="light"] body.app-v4 .btn-primary,
html[data-design="v2"][data-theme="light"] body.app-v4 .btn-p,
html[data-design="v2"][data-theme="light"] body.app-v4 .btn-preview,
html[data-design="v2"][data-theme="light"] body.app-v4 .cta,
html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-primary,
html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-p,
html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-preview,
html[data-design="v2"][data-theme="light"] body.admin-v4 .cta {
  background: var(--v11-gradient-cta) !important;
  border-color: transparent !important;
  border-radius: var(--v11-radius-pill) !important;
  box-shadow: var(--v11-shadow-cta) !important;
  color: #ffffff !important;
}

html[data-design="v2"][data-theme="light"] body.app-v4 .btn-primary:hover,
html[data-design="v2"][data-theme="light"] body.app-v4 .btn-p:hover,
html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-primary:hover,
html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-p:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

/* 8.5 — Dashboard inputs — v11 focus halo.
   Excludes checkboxes / radios so KPI control toggles don't grow. */
html[data-design="v2"][data-theme="light"] body.app-v4 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html[data-design="v2"][data-theme="light"] body.app-v4 textarea:focus,
html[data-design="v2"][data-theme="light"] body.app-v4 select:focus,
html[data-design="v2"][data-theme="light"] body.admin-v4 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html[data-design="v2"][data-theme="light"] body.admin-v4 textarea:focus,
html[data-design="v2"][data-theme="light"] body.admin-v4 select:focus {
  border-color: rgba(14,143,131,.5) !important;
  box-shadow: 0 0 0 4px rgba(80,214,196,.16) !important;
  outline: none !important;
}

/* 8.6 — Dashboard top nav surface (dark theme too — v11 brand identity).
   Only touches translucency / blur; layout untouched. */
html[data-design="v2"][data-theme="light"] body.app-v4 .nav,
html[data-design="v2"][data-theme="light"] body.admin-v4 .nav {
  background: rgba(255,255,255,.86) !important;
  border-bottom-color: rgba(37,50,61,.10) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
}

/* 8.7 — Settings cards / inline tabs / pop cards — v11 radius + soft elevation */
html[data-design="v2"][data-theme="light"] body.app-v4 .set-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .pop,
html[data-design="v2"][data-theme="light"] body.app-v4 .pop-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .set-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .pop,
html[data-design="v2"][data-theme="light"] body.admin-v4 .pop-card {
  border-radius: var(--v11-radius-md) !important;
  box-shadow: var(--v11-shadow-soft) !important;
  border-color: rgba(37,50,61,.10) !important;
}

/* 8.8 — KPI accent stripe — keep the stripe, swap to v11 deep teal.
   admin.html:644 + similar app.html rules use `.kpi-card::before { background:var(--kc,var(--np)) }`.
   Just retuning --np already takes care of it; this is a guard for any rule
   that hardcodes the bright #0e8f83. */
html[data-design="v2"][data-theme="light"] body.app-v4 .kpi-card::before,
html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-card::before {
  background: var(--v11-gradient-cta) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   9. MOBILE — soften blur cost on small screens (matches v11)
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .v11-glass,
  html[data-design="v2"][data-theme="light"] body.premium-public .card,
  html[data-design="v2"][data-theme="light"] body.premium-public .vc-card,
  html[data-design="v2"][data-theme="light"] body.premium-public .panel {
    backdrop-filter: blur(14px) saturate(1.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.14);
  }
}


/* ════════════════════════════════════════════════════════════════════════
   10. V11 HARDENING — kill remaining dark legacy surfaces system-wide

   Theme is now forced to 'light' on every page (see inline pre-resolve
   script on each HTML file). These rules target the specific bespoke
   classes that hardcoded the old dark gradients or bright #0e8f83
   emerald and would otherwise survive the cascade.

   Strategy: high specificity + !important. The inline page styles use
   single-class selectors at (0,0,1,0); these reach (0,0,3,1). Where
   a hardcoded color is involved we use !important.
   ════════════════════════════════════════════════════════════════════════ */


/* 10.1 — Theme controls are intentionally available in the app sidebar and
   settings. Only legacy header duplicates stay hidden. */
html[data-design="v2"] body.app-v4 .mb-shell-header-region .theme-seg,
html[data-design="v2"] body.app-v4 .mb-shell-header-region [onclick*="setThemeMode"] {
  display: none !important;
}


/* 10.2 — LOGIN: kill the dark .al-left hero gradient and re-paint as
   v11 ivory glass. Inline rule at login.html:50-54 hardcodes
   `linear-gradient(145deg,#03130F 0%,#051B16 35%,#08766e 100%)`. */
html[data-design="v2"] body.premium-public .al-left {
  background:
    radial-gradient(circle at 16% 8%, rgba(80,214,196,.14), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(14,143,131,.16), transparent 28%),
    linear-gradient(145deg, #eef8f6 0%, #f7faf9 54%, #ecf2ef 100%) !important;
}

html[data-design="v2"] body.premium-public .al-deco-1,
html[data-design="v2"] body.premium-public .al-deco-2,
html[data-design="v2"] body.premium-public .al-deco-3 {
  display: none !important;
}

html[data-design="v2"] body.premium-public .al-headline,
html[data-design="v2"] body.premium-public .al-form-title {
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.premium-public .al-headline span {
  background: var(--v11-gradient-brand-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html[data-design="v2"] body.premium-public .al-sub,
html[data-design="v2"] body.premium-public .al-form-sub {
  color: var(--v11-ink-soft) !important;
}

html[data-design="v2"] body.premium-public .al-badge {
  color: var(--v11-mint-deep) !important;
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(14,143,131,.18) !important;
  box-shadow: 0 10px 24px rgba(25,39,54,.06) !important;
}

html[data-design="v2"] body.premium-public .al-feat-ic {
  background: rgba(80,214,196,.12) !important;
  border-color: rgba(14,143,131,.18) !important;
  color: var(--v11-mint-deep) !important;
}

html[data-design="v2"] body.premium-public .al-feat-t {
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.premium-public .al-feat-s,
html[data-design="v2"] body.premium-public .al-trust-item {
  color: var(--v11-ink-soft) !important;
}

html[data-design="v2"] body.premium-public .al-feat-ic svg,
html[data-design="v2"] body.premium-public .al-trust-item svg {
  color: var(--v11-mint-deep) !important;
}

html[data-design="v2"] body.premium-public .al-version {
  color: var(--v11-ink-muted) !important;
}

html[data-design="v2"] body.premium-public .al-logo-icon,
html[data-design="v2"] body.premium-public .al-logo-text {
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.premium-public .al-logo-icon {
  background: var(--v11-gradient-cta) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(17,119,128,.28) !important;
}


/* 10.3 — LOGIN/REGISTER CTAs that hardcode #08766e,#0e8f83.
   Inline rules: login.html:154 .al-btn-primary, register.html:149 .btn-submit. */
html[data-design="v2"] body.premium-public .al-btn-primary,
html[data-design="v2"] body.premium-public .btn-submit,
html[data-design="v2"] body.premium-public .al-submit,
html[data-design="v2"] body.premium-public .reg-submit {
  background: var(--v11-gradient-cta) !important;
  border-radius: var(--v11-radius-pill) !important;
  box-shadow: var(--v11-shadow-cta) !important;
  border: 0 !important;
  color: #ffffff !important;
}

html[data-design="v2"] body.premium-public .al-btn-primary:hover,
html[data-design="v2"] body.premium-public .btn-submit:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  filter: saturate(1.05) !important;
  box-shadow: 0 24px 48px rgba(17,119,128,.32) !important;
  opacity: 1 !important;
}

/* Google OAuth button — keep neutral but tighten to v11 surface */
html[data-design="v2"] body.premium-public .btn-google {
  background: #ffffff !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-pill) !important;
  color: var(--v11-ink) !important;
  box-shadow: 0 8px 22px rgba(25,39,54,.06) !important;
}

html[data-design="v2"] body.premium-public .btn-google:hover {
  background: #ffffff !important;
  border-color: var(--v11-line-strong) !important;
  box-shadow: 0 12px 28px rgba(25,39,54,.10) !important;
}


/* 10.4 — Auth/register inputs — v11 surface + radii */
html[data-design="v2"] body.premium-public .al-input,
html[data-design="v2"] body.premium-public .field-input,
html[data-design="v2"] body.premium-public .auth-code-input {
  background: #ffffff !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-md) !important;
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.premium-public .al-input:focus,
html[data-design="v2"] body.premium-public .field-input:focus,
html[data-design="v2"] body.premium-public .auth-code-input:focus {
  border-color: rgba(14,143,131,.5) !important;
  box-shadow: 0 0 0 4px rgba(80,214,196,.16) !important;
}

/* Auth tabs — v11 segment style */
html[data-design="v2"] body.premium-public .al-tabs {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-pill) !important;
}

html[data-design="v2"] body.premium-public .al-tab.active {
  background: #ffffff !important;
  color: var(--v11-ink) !important;
  border-radius: var(--v11-radius-pill) !important;
  box-shadow: 0 6px 16px rgba(25,39,54,.10) !important;
}


/* 10.5 — REGISTER card — v11 elevation */
html[data-design="v2"] body.premium-public .reg-card {
  background: #ffffff !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: var(--v11-shadow-soft) !important;
}

html[data-design="v2"] body.premium-public .reg-card::before {
  background: var(--v11-gradient-cta) !important;
}


/* 10.6 — MARKETPLACE: dark hero band → v11 ivory.
   Inline rule at marketplace.html:33-35 hardcodes
   `linear-gradient(135deg,#03130F 0%,#051B16 100%)`. */
html[data-design="v2"] body.premium-public .mkp-hero {
  background:
    radial-gradient(circle at 18% 12%, rgba(80,214,196,.12), transparent 38%),
    radial-gradient(circle at 82% 28%, rgba(14,143,131,.10), transparent 42%),
    linear-gradient(145deg, #eef8f6 0%, #f7faf9 50%, #ecf2ef 100%) !important;
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.premium-public .mkp-hero h1,
html[data-design="v2"] body.premium-public .mkp-brand-name {
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.premium-public .mkp-hero p.sub {
  color: var(--v11-ink-soft) !important;
  opacity: 1 !important;
}

html[data-design="v2"] body.premium-public .mkp-cat {
  background: rgba(255,255,255,.72) !important;
  color: var(--v11-ink-soft) !important;
  border: 1px solid var(--v11-line) !important;
}

html[data-design="v2"] body.premium-public .mkp-cat:hover,
html[data-design="v2"] body.premium-public .mkp-cat.active {
  background: var(--v11-gradient-cta) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

html[data-design="v2"] body.premium-public .mkp-search {
  background: #ffffff !important;
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: var(--v11-shadow-soft) !important;
}

html[data-design="v2"] body.premium-public .mkp-search-btn {
  background: var(--v11-gradient-cta) !important;
  border-radius: var(--v11-radius-pill) !important;
  box-shadow: var(--v11-shadow-cta) !important;
}


/* 10.7 — AUTH-CALLBACK card stripe + logo */
html[data-design="v2"] body.premium-public .ac-card {
  background: #ffffff !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: var(--v11-shadow-soft) !important;
}

html[data-design="v2"] body.premium-public .ac-card::before,
html[data-design="v2"] body.premium-public .vc-card::before,
html[data-design="v2"] body.premium-public .reg-card::before {
  background: var(--v11-gradient-cta) !important;
}

html[data-design="v2"] body.premium-public .ac-logo-ico,
html[data-design="v2"] body.premium-public .ac-btn,
html[data-design="v2"] body.premium-public .vc-btn-p {
  background: var(--v11-gradient-cta) !important;
  box-shadow: var(--v11-shadow-cta) !important;
  border-radius: var(--v11-radius-pill) !important;
}

html[data-design="v2"] body.premium-public .ac-logo-ico {
  border-radius: 10px !important;
}


/* 10.8 — DASHBOARDS: ensure body.app-v4 / body.admin-v4 actually paint
   the v11 ambient background. Inline tokens use `--body-bg` in app/admin
   but the body rule already reads it; we also paint the body directly so
   the warm ivory wash shows even on first paint. */
html[data-design="v2"] body.app-v4,
html[data-design="v2"] body.admin-v4 {
  background:
    linear-gradient(150deg, #ffffff 0%, rgba(80,214,196,.04) 60%, #ffffff 100%) !important;
  color: var(--v11-ink) !important;
}

/* Soft mint→blue ambient overlay on dashboards (skipped on tables/forms
   because `inset 0` is z-index -1) */
html[data-design="v2"] body.app-v4::before,
html[data-design="v2"] body.admin-v4::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(80,214,196,.06), transparent 32%, rgba(14,143,131,.06) 68%, transparent),
    repeating-linear-gradient(90deg, rgba(17,22,27,.020) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(17,22,27,.014) 0 1px, transparent 1px 104px);
}


/* 10.9 — DASHBOARD nav-icon / nav-av / brand-icon — v11 deep teal
   gradient regardless of inline `--np` references */
html[data-design="v2"] body.app-v4 .nav-icon,
html[data-design="v2"] body.admin-v4 .nav-icon,
html[data-design="v2"] body.app-v4 .nav-av,
html[data-design="v2"] body.admin-v4 .nav-av,
html[data-design="v2"] body.app-v4 .brand-icon,
html[data-design="v2"] body.admin-v4 .brand-icon {
  background: var(--v11-gradient-cta) !important;
  box-shadow: 0 6px 18px rgba(17,119,128,.28) !important;
}

html[data-design="v2"] body.app-v4 .nav-av,
html[data-design="v2"] body.admin-v4 .nav-av {
  border-radius: 50% !important;
}


/* 10.10 — DASHBOARD inputs — v11 surface + focus everywhere
   (the more permissive selector covers admin's many inline input rules) */
html[data-design="v2"] body.app-v4 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
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"]):not([type="submit"]):not([type="button"]),
html[data-design="v2"] body.admin-v4 textarea,
html[data-design="v2"] body.admin-v4 select {
  background: #ffffff !important;
  border-color: var(--v11-line) !important;
  color: var(--v11-ink) !important;
}


/* 10.11 — DARK-LITERAL backstop for any inline rule we may have missed.
   Targets common bright #0e8f83 / #08766e background chunks via
   attribute-style overrides on the most common containers. Keeps cards
   reading as v11 ivory even if a stray inline rule paints them darker. */
html[data-design="v2"] body.premium-public .card,
html[data-design="v2"] body.premium-public .panel,
html[data-design="v2"] body.premium-public .vc-card,
html[data-design="v2"] body.premium-public .reg-card,
html[data-design="v2"] body.premium-public .ac-card,
html[data-design="v2"] body.premium-public .funnel-card,
html[data-design="v2"] body.premium-public .checkout-card,
html[data-design="v2"] body.premium-public .form-card,
html[data-design="v2"] body.premium-public .onb-card {
  background-color: #ffffff !important;
  color: var(--v11-ink) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   11. V11 BRAND WORDMARK — use the generated SVG logo directly.
   The earlier v2 layers used pseudo-elements for icon + text; keep the
   real brand-wordmark images visible so every surface uses the same asset.
   ════════════════════════════════════════════════════════════════════════ */

html[data-design="v2"] .mb-wordmark__img,
.premium-public .mb-wordmark__img {
  display: block !important;
  width: min(224px, 52vw) !important;
  height: auto !important;
  max-height: 36px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 6px 18px rgba(17,119,128,.16)) !important;
}

html[data-design="v2"] .mb-wordmark__img--light,
.premium-public .mb-wordmark__img--light {
  display: none !important;
}

html[data-design="v2"][data-theme="light"] .mb-wordmark__img--dark,
html[data-theme="light"] .premium-public .mb-wordmark__img--dark {
  display: none !important;
}

html[data-design="v2"][data-theme="light"] .mb-wordmark__img--light,
html[data-theme="light"] .premium-public .mb-wordmark__img--light {
  display: block !important;
}

html[data-design="v2"] .mb-wordmark,
.premium-public .mb-wordmark {
  line-height: 0 !important;
  gap: 0 !important;
  padding-bottom: 0 !important;
}

html[data-design="v2"] .mb-wordmark::before,
.premium-public .mb-wordmark::before {
  content: none !important;
  display: none !important;
}

html[data-design="v2"] .mb-wordmark::after,
.premium-public .mb-wordmark::after,
html[data-theme="light"] .premium-public .mb-wordmark::after {
  content: none !important;
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   12. KILL REMAINING HARDCODED EMERALD #08766e / #50d6c4 / #0e8f83
   on inline LINK colors that survived the --np retune because
   the inline `[data-theme=light] .al-* { color:#08766e }` rules
   bypass the token system entirely.
   ════════════════════════════════════════════════════════════════════════ */

html[data-design="v2"] body.premium-public .al-inline-link,
html[data-design="v2"] body.premium-public .al-alt-text a,
html[data-design="v2"] body.premium-public .al-form a,
html[data-design="v2"] body.premium-public .al-footer a:hover,
html[data-design="v2"] body.premium-public .login-link a,
html[data-design="v2"] body.premium-public .reg-foot a:hover,
html[data-design="v2"] body.premium-public .legal-footer a:hover,
html[data-design="v2"] body.premium-public a[href^="/"],
html[data-design="v2"] body.premium-public .v11-link {
  color: var(--v11-mint-deep) !important;
}

html[data-design="v2"] body.premium-public .al-inline-link:hover,
html[data-design="v2"] body.premium-public .al-alt-text a:hover {
  color: var(--v11-teal) !important;
}

/* Legal-page body links (a { color: var(--np) } inline) — guard explicitly */
html[data-design="v2"] body.premium-public .legal-body a,
html[data-design="v2"] body.premium-public .wrap a {
  color: var(--v11-mint-deep) !important;
}

/* Trust-strip + feat-icon SVG strokes that hardcoded #50d6c4 / #08766e */
html[data-design="v2"] body.premium-public .al-trust-item svg,
html[data-design="v2"] body.premium-public .al-feat-ic,
html[data-design="v2"] body.premium-public .al-feat-ic svg,
html[data-design="v2"] body.premium-public .trust-strip svg,
html[data-design="v2"] body.premium-public .trial-note svg,
html[data-design="v2"] body.premium-public .trial-badge {
  color: var(--v11-mint-deep) !important;
}

html[data-design="v2"] body.premium-public .trial-badge {
  background: rgba(80,214,196,.14) !important;
  border-color: rgba(14,143,131,.22) !important;
}

/* Register page accent <span class="acc"> in headline */
html[data-design="v2"] body.premium-public h1.reg-h .acc,
html[data-design="v2"] body.premium-public .ac-greet-h .acc {
  background: var(--v11-gradient-brand-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ════════════════════════════════════════════════════════════════════════
   13. HIDE DESIGN TOGGLE (Modern / Klassik)

   admin.html:1358-1361 + app.html injects `.design-seg / .dseg` widgets.
   v11 is the only approved direction; hide the toggle so users can't
   switch back to v1 (Klassik) or fork the brand. The setDesignMode()
   function still exists in 56-design-toggle.js for any programmatic
   callers; only the UI is suppressed.
   ════════════════════════════════════════════════════════════════════════ */

html[data-design="v2"] .design-seg,
html[data-design="v2"] .dseg,
html[data-design="v2"] [onclick*="setDesignMode"],
html[data-design="v2"] #design-seg,
html[data-design="v2"] #dseg-v1,
html[data-design="v2"] #dseg-v2 {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   14. ADMIN / APP DASHBOARD — kill remaining mint surfaces on
   action tiles and active sidebar/aside states.
   ════════════════════════════════════════════════════════════════════════ */

/* 14.1 — Quick-action tiles ("Mitarbeiter einladen", "Tickets bearbeiten",
   "Tenants verwalten", "Ankündigung senden") — admin.html:513 .dash-qa-card */
html[data-design="v2"] body.admin-v4 .dash-qa-card,
html[data-design="v2"] body.app-v4 .dash-qa-card {
  background: #ffffff !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-md) !important;
  box-shadow: 0 8px 22px rgba(25,39,54,.05) !important;
}

html[data-design="v2"] body.admin-v4 .dash-qa-card:hover,
html[data-design="v2"] body.app-v4 .dash-qa-card:hover {
  border-color: var(--v11-mint-deep) !important;
  box-shadow: 0 14px 32px rgba(25,39,54,.08) !important;
}

html[data-design="v2"] body.admin-v4 .dash-qa-ico,
html[data-design="v2"] body.app-v4 .dash-qa-ico {
  background: rgba(80,214,196,.14) !important;
  color: var(--v11-mint-deep) !important;
}

/* 14.2 — Settings sub-aside ("Tracking", "Cookie", "Trial", "Company")
   admin.html:1142 .sc-aside-item.sc-active uses hardcoded mint gradient */
html[data-design="v2"] body.admin-v4 .sc-aside,
html[data-design="v2"] body.app-v4 .sc-aside {
  background: #ffffff !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-md) !important;
}

html[data-design="v2"] body.admin-v4 .sc-aside-item.sc-active,
html[data-design="v2"] body.app-v4 .sc-aside-item.sc-active {
  background: rgba(80,214,196,.14) !important;
  border-color: rgba(14,143,131,.30) !important;
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.admin-v4 .sc-aside-item.sc-active svg,
html[data-design="v2"] body.app-v4 .sc-aside-item.sc-active svg {
  stroke: var(--v11-mint-deep) !important;
  color: var(--v11-mint-deep) !important;
}

/* 14.3 — Top tab-btn active underline on admin */
html[data-design="v2"] body.admin-v4 .tab-btn.active,
html[data-design="v2"] body.app-v4 .tab-btn.active {
  color: var(--v11-mint-deep) !important;
  border-bottom-color: var(--v11-mint-deep) !important;
}

/* 14.4 — Operator badge / pills in admin (e.g. "OPERATOR", "Aktiv") */
html[data-design="v2"] body.admin-v4 .nav-badge,
html[data-design="v2"] body.app-v4 .nav-badge {
  background: rgba(80,214,196,.14) !important;
  border-color: rgba(14,143,131,.28) !important;
  color: var(--v11-mint-deep) !important;
}

/* 14.5 — App-testen / preview button (admin.html:75 .btn-preview) */
html[data-design="v2"] body.admin-v4 .btn-preview,
html[data-design="v2"] body.app-v4 .btn-preview {
  background: var(--v11-gradient-cta) !important;
  border-radius: var(--v11-radius-pill) !important;
  box-shadow: var(--v11-shadow-cta) !important;
  color: #ffffff !important;
}


/* ==========================================================================
   15. FULL V11 PRODUCT SYSTEM PASS

   This is the actual product-wide redesign layer. It is intentionally loaded
   last and scoped to the existing page body classes so legacy behavior, IDs,
   data attributes, and JS hooks remain intact while the visible product reads
   as one premium v11 SaaS experience.
   ========================================================================== */

/* color-scheme follows the active theme so native form controls + scrollbars
   render correctly in both modes (Phase A of dark-mode rollout, 2026-05-23). */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

html[data-design="v2"] {
  --mb-premium-blue: var(--v11-mint-deep) !important;
  --mb-premium-blue-2: var(--v11-blue) !important;
  --accent: var(--v11-mint-deep) !important;
  --accent-2: var(--v11-blue) !important;
  --focus-ring: 0 0 0 4px rgba(80,214,196,.16) !important;
}

html[data-design="v2"] body.premium-public,
html[data-design="v2"] body.app-v4,
html[data-design="v2"] body.admin-v4 {
  min-width: 320px;
  overflow-x: hidden !important;
  font-family: var(--v11-font) !important;
  letter-spacing: 0 !important;
  background:
    linear-gradient(145deg, rgba(232,247,242,.92) 0%, rgba(247,250,248,.98) 35%, rgba(238,247,244,.94) 72%, rgba(245,250,247,1) 100%) !important;
}

html[data-design="v2"] body.premium-public::after,
html[data-design="v2"] body.app-v4::after,
html[data-design="v2"] body.admin-v4::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

html[data-design="v2"] body.premium-public h1,
html[data-design="v2"] body.premium-public h2,
html[data-design="v2"] body.premium-public h3,
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.admin-v4 h1,
html[data-design="v2"] body.admin-v4 h2,
html[data-design="v2"] body.admin-v4 h3 {
  letter-spacing: 0 !important;
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.premium-public p,
html[data-design="v2"] body.app-v4 p,
html[data-design="v2"] body.admin-v4 p {
  color: inherit;
}

/* Public/funnel/legal shells */
html[data-design="v2"] body.premium-public .nav,
html[data-design="v2"] body.premium-public .topbar,
html[data-design="v2"] body.premium-public .funnel-top,
html[data-design="v2"] body.premium-public .checkout-top,
html[data-design="v2"] body.premium-public .form-top,
html[data-design="v2"] body.premium-public .legal-head {
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  border-radius: var(--v11-radius-pill) !important;
  box-shadow: 0 16px 50px rgba(28,40,55,.12) !important;
  backdrop-filter: blur(28px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.25) !important;
}

html[data-design="v2"] body.premium-public .wrap,
html[data-design="v2"] body.premium-public .legal-wrap,
html[data-design="v2"] body.premium-public .vc-wrap,
html[data-design="v2"] body.premium-public .ac-wrap,
html[data-design="v2"] body.premium-public .checkout-wrap,
html[data-design="v2"] body.premium-public .form-wrap,
html[data-design="v2"] body.premium-public .onb-shell {
  width: min(calc(100% - (2 * var(--mb-public-content-pad-x))), var(--mb-public-content-max)) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

html[data-design="v2"] body.premium-public .mb-public-container,
html[data-design="v2"] body.marketplace-v4 .mkp-hero-inner,
html[data-design="v2"] body.marketplace-v4 .mkp-container,
html[data-design="v2"] body.auth-v4 .nav-inner {
  width: min(calc(100% - (2 * var(--mb-public-content-pad-x))), var(--mb-public-content-max)) !important;
  max-width: var(--mb-public-content-max) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

html[data-design="v2"] body.premium-public .legal-card,
html[data-design="v2"] body.premium-public .legal-content,
html[data-design="v2"] body.premium-public main > section:not(.mkp-hero):not(.v11-hero),
html[data-design="v2"] body.premium-public .funnel-card,
html[data-design="v2"] body.premium-public .checkout-card,
html[data-design="v2"] body.premium-public .form-card,
html[data-design="v2"] body.premium-public .vc-card,
html[data-design="v2"] body.premium-public .ac-card,
html[data-design="v2"] body.premium-public .reg-card,
html[data-design="v2"] body.premium-public .al-form-wrap {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.50)),
    linear-gradient(120deg, rgba(80,214,196,.10), transparent 40%, rgba(14,143,131,.11)) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  border-radius: var(--v11-radius-xl) !important;
  box-shadow: var(--v11-shadow) !important;
  backdrop-filter: blur(28px) saturate(1.20) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.20) !important;
}

html[data-design="v2"] body.premium-public .al-wrap {
  min-height: 100vh !important;
  background: transparent !important;
  padding: clamp(18px, 4vw, 42px) !important;
  gap: clamp(18px, 3vw, 34px) !important;
}

html[data-design="v2"] body.premium-public .al-left,
html[data-design="v2"] body.premium-public .al-right {
  border-radius: var(--v11-radius-xl) !important;
}

html[data-design="v2"] body.premium-public .al-right {
  background: transparent !important;
}

html[data-design="v2"] body.premium-public .al-feat,
html[data-design="v2"] body.premium-public .trust-strip,
html[data-design="v2"] body.premium-public .trial-note,
html[data-design="v2"] body.premium-public .info-box,
html[data-design="v2"] body.premium-public .step-card,
html[data-design="v2"] body.premium-public .option-card {
  background: rgba(255,255,255,.62) !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-md) !important;
  box-shadow: 0 10px 28px rgba(25,39,54,.06) !important;
}

/* Marketplace as v11 product directory */
html[data-design="v2"] body.marketplace-v4 .mkp-hero {
  padding: clamp(48px, 7vw, 92px) 20px clamp(72px, 9vw, 110px) !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-hero h1 {
  max-width: 860px;
  margin: 0 auto !important;
  font-size: clamp(34px, 7vw, 70px) !important;
  line-height: .98 !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-hero h1 span {
  background: var(--v11-gradient-brand-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-brand {
  margin-bottom: 28px !important;
  padding: 8px 14px 8px 8px !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-pill) !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: 0 12px 30px rgba(25,39,54,.08) !important;
}

html[data-design="v2"] body.marketplace-v4 .mb-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(17,119,128,.22) !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-container {
  margin-top: -52px !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-stats,
html[data-design="v2"] body.marketplace-v4 .mkp-card,
html[data-design="v2"] body.marketplace-v4 .mkp-empty {
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: var(--v11-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-card {
  overflow: hidden !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-card-banner,
html[data-design="v2"] body.marketplace-v4 .mkp-card-ava {
  background: var(--v11-gradient-cta) !important;
}

html[data-design="v2"] body.marketplace-v4 .mkp-card-foot {
  background: rgba(238,247,244,.72) !important;
}

/* App and admin shell */
html[data-design="v2"] body.app-v4 .nav,
html[data-design="v2"] body.admin-v4 .nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  margin: 10px auto 0 !important;
  width: min(1280px, calc(100% - 24px)) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  border-radius: var(--v11-radius-pill) !important;
  background: rgba(255,255,255,.66) !important;
  box-shadow: 0 16px 46px rgba(25,39,54,.12) !important;
  backdrop-filter: blur(28px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.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.admin-v4 .nav-link {
  border-radius: var(--v11-radius-pill) !important;
  color: var(--v11-ink-soft) !important;
  transition: background .16s ease, color .16s ease, transform .16s ease !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 .ndropitem:hover,
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.admin-v4 .nav-link:hover,
html[data-design="v2"] body.admin-v4 .nav-link.active {
  background: rgba(80,214,196,.14) !important;
  color: var(--v11-ink) !important;
}

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

html[data-design="v2"] body.app-v4 .mb-dash,
html[data-design="v2"] body.app-v4 .mb-cal,
html[data-design="v2"] body.app-v4 .mb-cust,
html[data-design="v2"] body.app-v4 .mb-req,
html[data-design="v2"] body.app-v4 .mb-fin,
html[data-design="v2"] body.admin-v4 .dash-grid,
html[data-design="v2"] body.admin-v4 .admin-grid {
  color: var(--v11-ink) !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.admin-v4 .page-head,
html[data-design="v2"] body.admin-v4 .section-head {
  background: rgba(255,255,255,.54) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: 0 12px 32px rgba(25,39,54,.08) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

html[data-design="v2"] body.app-v4 .mb-dash__title,
html[data-design="v2"] body.app-v4 .mb-cal__title,
html[data-design="v2"] body.app-v4 .mb-cust__title,
html[data-design="v2"] body.app-v4 .mb-req__title,
html[data-design="v2"] body.app-v4 .mb-fin__hd-title {
  font-size: clamp(28px, 4vw, 48px) !important;
  line-height: 1.02 !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 .mb-dash__subtitle,
html[data-design="v2"] body.app-v4 .mb-cal__subtitle,
html[data-design="v2"] body.app-v4 .mb-cust__subtitle,
html[data-design="v2"] body.app-v4 .mb-req__subtitle,
html[data-design="v2"] body.app-v4 .mb-fin__hd-sub,
html[data-design="v2"] body.admin-v4 .muted,
html[data-design="v2"] body.admin-v4 .sub {
  color: var(--v11-ink-soft) !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 .mb-cal__panel,
html[data-design="v2"] body.app-v4 .mb-cust__panel,
html[data-design="v2"] body.app-v4 .mb-req__panel,
html[data-design="v2"] body.admin-v4 .kpi-card,
html[data-design="v2"] body.admin-v4 .stat-card,
html[data-design="v2"] body.admin-v4 .panel,
html[data-design="v2"] body.admin-v4 .card,
html[data-design="v2"] body.admin-v4 .table-wrap,
html[data-design="v2"] body.admin-v4 .settings-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
    linear-gradient(120deg, rgba(80,214,196,.08), transparent 42%, rgba(14,143,131,.08)) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  border-radius: var(--v11-radius-lg) !important;
  box-shadow: var(--v11-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.14) !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.admin-v4 .kpi-value,
html[data-design="v2"] body.admin-v4 .stat-value {
  background: var(--v11-gradient-brand-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi__label,
html[data-design="v2"] body.app-v4 .mb-fin__label,
html[data-design="v2"] body.admin-v4 label,
html[data-design="v2"] body.admin-v4 th {
  color: var(--v11-ink-soft) !important;
}

html[data-design="v2"] body.app-v4 .mb-pill,
html[data-design="v2"] body.app-v4 .badge,
html[data-design="v2"] body.admin-v4 .badge,
html[data-design="v2"] body.admin-v4 .pill,
html[data-design="v2"] body.admin-v4 .status,
html[data-design="v2"] body.premium-public .badge,
html[data-design="v2"] body.premium-public .pill {
  border: 1px solid rgba(14,143,131,.20) !important;
  border-radius: var(--v11-radius-pill) !important;
  background: rgba(80,214,196,.13) !important;
  color: var(--v11-mint-deep) !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 .mb-btn,
html[data-design="v2"] body.app-v4 button:not(.tseg):not(.dseg):not(.mob-menu-btn):not(.mob-drawer-close),
html[data-design="v2"] body.admin-v4 button:not(.tseg):not(.dseg):not(.dash-mod):not(.kpi-card):not(.dash-act):not(.dash-recent__see-all),
html[data-design="v2"] body.premium-public button:not(.tseg):not(.mkp-cat),
html[data-design="v2"] body.premium-public .btn,
html[data-design="v2"] body.premium-public .button {
  border-radius: var(--v11-radius-pill) !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 .mb-btn--primary,
html[data-design="v2"] body.app-v4 .al-btn-primary,
html[data-design="v2"] body.admin-v4 .btn-primary,
html[data-design="v2"] body.admin-v4 .btn-p,
html[data-design="v2"] body.premium-public .btn-primary,
html[data-design="v2"] body.premium-public .btn-submit,
html[data-design="v2"] body.premium-public .funnel-cta,
html[data-design="v2"] body.premium-public .checkout-cta {
  background: var(--v11-gradient-cta) !important;
  border-color: transparent !important;
  box-shadow: var(--v11-shadow-cta) !important;
  color: #ffffff !important;
}

html[data-design="v2"] body.app-v4 .mb-btn:not(.mb-btn--primary),
html[data-design="v2"] body.admin-v4 button:not(.btn-primary):not(.btn-p):not(.btn-preview):not(.tseg):not(.dseg):not(.dash-mod):not(.kpi-card):not(.dash-act):not(.dash-recent__see-all),
html[data-design="v2"] body.premium-public button:not(.btn-primary):not(.btn-submit):not(.funnel-cta):not(.checkout-cta):not(.mkp-search-btn):not(.mkp-cat) {
  background: rgba(255,255,255,.76) !important;
  border: 1px solid var(--v11-line) !important;
  color: var(--v11-ink) !important;
  box-shadow: 0 8px 20px rgba(25,39,54,.06) !important;
}

html[data-design="v2"] body.app-v4 .mb-btn:hover,
html[data-design="v2"] body.admin-v4 button:hover,
html[data-design="v2"] body.premium-public button:hover {
  transform: translateY(-1px);
}

html[data-design="v2"] body.app-v4 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
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"]):not([type="submit"]):not([type="button"]),
html[data-design="v2"] body.admin-v4 textarea,
html[data-design="v2"] body.admin-v4 select,
html[data-design="v2"] body.premium-public input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-design="v2"] body.premium-public textarea,
html[data-design="v2"] body.premium-public select {
  min-height: 46px;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-md) !important;
  color: var(--v11-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !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.premium-public input:focus,
html[data-design="v2"] body.premium-public textarea:focus,
html[data-design="v2"] body.premium-public select:focus {
  border-color: rgba(14,143,131,.48) !important;
  box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255,255,255,.72) !important;
  outline: none !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: rgba(255,255,255,.70) !important;
  border-radius: var(--v11-radius-md) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 th,
html[data-design="v2"] body.app-v4 td,
html[data-design="v2"] body.admin-v4 th,
html[data-design="v2"] body.admin-v4 td {
  border-color: rgba(37,50,61,.08) !important;
}

html[data-design="v2"] body.app-v4 tbody tr:hover,
html[data-design="v2"] body.admin-v4 tbody tr:hover {
  background: rgba(80,214,196,.08) !important;
}

html[data-design="v2"] body.app-v4 .modal,
html[data-design="v2"] body.app-v4 .modal-content,
html[data-design="v2"] body.app-v4 .drawer,
html[data-design="v2"] body.app-v4 .pop,
html[data-design="v2"] body.app-v4 .pop-card,
html[data-design="v2"] body.admin-v4 .modal,
html[data-design="v2"] body.admin-v4 .modal-content,
html[data-design="v2"] body.admin-v4 .drawer,
html[data-design="v2"] body.admin-v4 .pop,
html[data-design="v2"] body.admin-v4 .pop-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.70)),
    linear-gradient(120deg, rgba(80,214,196,.08), transparent 42%, rgba(14,143,131,.08)) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: var(--v11-radius-xl) !important;
  box-shadow: var(--v11-shadow) !important;
  backdrop-filter: blur(28px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
}

html[data-design="v2"] body.app-v4 .mob-drawer,
html[data-design="v2"] body.admin-v4 .mob-drawer {
  background: rgba(255,255,255,.86) !important;
  border-left: 1px solid rgba(255,255,255,.76) !important;
  box-shadow: -22px 0 60px rgba(25,39,54,.16) !important;
  backdrop-filter: blur(28px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
}

html[data-design="v2"] body.app-v4 .mob-overlay,
html[data-design="v2"] body.admin-v4 .mob-overlay {
  background: rgba(17,22,27,.22) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-design="v2"] body.app-v4 [data-mb-dash-empty],
html[data-design="v2"] body.app-v4 .empty,
html[data-design="v2"] body.app-v4 .empty-state,
html[data-design="v2"] body.admin-v4 .empty,
html[data-design="v2"] body.admin-v4 .empty-state,
html[data-design="v2"] body.premium-public .mkp-empty {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.56)),
    linear-gradient(120deg, rgba(80,214,196,.09), transparent 42%, rgba(14,143,131,.09)) !important;
  border: 1px dashed rgba(14,143,131,.24) !important;
  border-radius: var(--v11-radius-lg) !important;
  color: var(--v11-ink-soft) !important;
}

html[data-design="v2"] body.app-v4 .skel,
html[data-design="v2"] body.admin-v4 .skel,
html[data-design="v2"] body.premium-public .skel,
html[data-design="v2"] body.app-v4 .skeleton,
html[data-design="v2"] body.admin-v4 .skeleton,
html[data-design="v2"] body.premium-public .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.45) 0%, rgba(80,214,196,.14) 42%, rgba(255,255,255,.45) 82%) !important;
  background-size: 420px 100% !important;
  border-radius: var(--v11-radius-md) !important;
}

/* Mobile-first restructuring */
@media (max-width: 900px) {
  html[data-design="v2"] body.premium-public .wrap,
  html[data-design="v2"] body.premium-public .legal-wrap,
  html[data-design="v2"] body.premium-public .vc-wrap,
  html[data-design="v2"] body.premium-public .ac-wrap,
  html[data-design="v2"] body.premium-public .checkout-wrap,
  html[data-design="v2"] body.premium-public .form-wrap,
  html[data-design="v2"] body.premium-public .onb-shell {
    width: min(100% - 28px, 720px) !important;
  }

  html[data-design="v2"] body.premium-public .al-wrap {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  html[data-design="v2"] body.premium-public .al-left {
    min-height: auto !important;
    padding: 28px 22px !important;
  }

  html[data-design="v2"] body.premium-public .al-headline {
    font-size: clamp(30px, 11vw, 46px) !important;
  }

  html[data-design="v2"] body.marketplace-v4 .mkp-search {
    grid-template-columns: 1fr !important;
    border-radius: var(--v11-radius-lg) !important;
    padding: 12px !important;
  }

  html[data-design="v2"] body.marketplace-v4 .mkp-cats {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }

  html[data-design="v2"] body.marketplace-v4 .mkp-cat {
    flex: 0 0 auto !important;
  }

  html[data-design="v2"] body.app-v4 .nav,
  html[data-design="v2"] body.admin-v4 .nav {
    width: calc(100% - 16px) !important;
    margin-top: 8px !important;
    border-radius: var(--v11-radius-lg) !important;
  }

  html[data-design="v2"] body.app-v4 .nav-tabs,
  html[data-design="v2"] body.admin-v4 .nav-tabs {
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html[data-design="v2"] body.app-v4 .mb-dash__scroll {
    padding: 14px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-kpi-row,
  html[data-design="v2"] body.app-v4 .mb-dash__grid,
  html[data-design="v2"] body.app-v4 .mb-fin__grid-2,
  html[data-design="v2"] body.admin-v4 .dash-grid,
  html[data-design="v2"] body.admin-v4 .admin-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-dash__rightcol {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-fin {
    display: block !important;
  }

  html[data-design="v2"] body.app-v4 .mb-fin__side {
    position: static !important;
    margin: 0 14px 14px !important;
    overflow-x: auto !important;
  }

  html[data-design="v2"] body.app-v4 .mb-fin__side-nav {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html[data-design="v2"] body.app-v4 .mb-fin__side-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.premium-public,
  html[data-design="v2"] body.app-v4,
  html[data-design="v2"] body.admin-v4 {
    background:
      linear-gradient(150deg, rgba(232,247,242,.96), rgba(247,250,248,.98) 44%, rgba(238,247,244,.98)) !important;
  }

  html[data-design="v2"] body.premium-public .legal-card,
  html[data-design="v2"] body.premium-public .legal-content,
  html[data-design="v2"] body.premium-public .funnel-card,
  html[data-design="v2"] body.premium-public .checkout-card,
  html[data-design="v2"] body.premium-public .form-card,
  html[data-design="v2"] body.premium-public .vc-card,
  html[data-design="v2"] body.premium-public .ac-card,
  html[data-design="v2"] body.premium-public .reg-card,
  html[data-design="v2"] body.premium-public .al-form-wrap,
  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.admin-v4 .panel,
  html[data-design="v2"] body.admin-v4 .card {
    border-radius: 10px !important;
    box-shadow: 0 14px 36px rgba(25,39,54,.10) !important;
    backdrop-filter: blur(14px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  }

  html[data-design="v2"] body.marketplace-v4 .mkp-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.marketplace-v4 .mkp-card {
    border-radius: 12px !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.admin-v4 .page-head,
  html[data-design="v2"] body.admin-v4 .section-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 10px 10px 14px !important;
    padding: 16px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-dash__title,
  html[data-design="v2"] body.app-v4 .mb-cal__title,
  html[data-design="v2"] body.app-v4 .mb-cust__title,
  html[data-design="v2"] body.app-v4 .mb-req__title,
  html[data-design="v2"] body.app-v4 .mb-fin__hd-title {
    font-size: 32px !important;
  }

  html[data-design="v2"] body.app-v4 table,
  html[data-design="v2"] body.admin-v4 table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-design="v2"] body.app-v4 .table-wrap,
  html[data-design="v2"] body.admin-v4 .table-wrap,
  html[data-design="v2"] body.app-v4 .tbl-wrap,
  html[data-design="v2"] body.admin-v4 .tbl-wrap {
    overflow-x: auto !important;
    border-radius: 10px !important;
  }

  html[data-design="v2"] body.app-v4 input,
  html[data-design="v2"] body.app-v4 select,
  html[data-design="v2"] body.app-v4 textarea,
  html[data-design="v2"] body.admin-v4 input,
  html[data-design="v2"] body.admin-v4 select,
  html[data-design="v2"] body.admin-v4 textarea,
  html[data-design="v2"] body.premium-public input,
  html[data-design="v2"] body.premium-public select,
  html[data-design="v2"] body.premium-public textarea {
    font-size: 16px !important;
  }

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


/* ==========================================================================
   16. SUPER ADMIN APP TEST PREVIEW

   The operator-only frame must not visually fork the app. Keep its controls
   neutral and let the embedded/previewed user app use the same v11 styling as
   every real tenant sees.
   ========================================================================== */

html[data-design="v2"] body.app-v4.has-preview-bar #operator-preview-bar {
  background: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(37,50,61,.10) !important;
  box-shadow: 0 12px 36px rgba(25,39,54,.10) !important;
  color: var(--v11-ink) !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar #operator-preview-bar svg {
  color: var(--v11-ink-soft) !important;
  stroke: currentColor !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar .preview-role-btn,
html[data-design="v2"] body.app-v4.has-preview-bar .preview-device-btn,
html[data-design="v2"] body.app-v4.has-preview-bar .preview-exit-btn {
  background: rgba(255,255,255,.76) !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-pill) !important;
  color: var(--v11-ink-soft) !important;
  box-shadow: 0 6px 16px rgba(25,39,54,.06) !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar .preview-role-btn:hover,
html[data-design="v2"] body.app-v4.has-preview-bar .preview-device-btn:hover,
html[data-design="v2"] body.app-v4.has-preview-bar .preview-exit-btn:hover {
  background: #ffffff !important;
  border-color: rgba(14,143,131,.22) !important;
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar .preview-role-btn.active,
html[data-design="v2"] body.app-v4.has-preview-bar .preview-device-btn.active {
  background: #ffffff !important;
  border-color: rgba(14,143,131,.24) !important;
  color: var(--v11-mint-deep) !important;
  box-shadow: 0 8px 22px rgba(25,39,54,.08) !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar #preview-device-switcher {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--v11-line) !important;
  border-radius: var(--v11-radius-pill) !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar nav.nav {
  background:
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.64)),
    linear-gradient(120deg, rgba(80,214,196,.06), transparent 44%, rgba(14,143,131,.06)) !important;
  border-color: rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar .ntab.active,
html[data-design="v2"] body.app-v4.has-preview-bar .ntab:hover,
html[data-design="v2"] body.app-v4.has-preview-bar .mob-drawer-item.mob-active,
html[data-design="v2"] body.app-v4.has-preview-bar .mobile-more-item.is-active {
  background: rgba(80,214,196,.12) !important;
  border-color: rgba(14,143,131,.18) !important;
  color: var(--v11-ink) !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar .nav-icon,
html[data-design="v2"] body.app-v4.has-preview-bar .nav-av,
html[data-design="v2"] body.app-v4.has-preview-bar .mob-drawer-brand::before {
  background: var(--v11-gradient-cta) !important;
}

html[data-preview-device="mobile"] body.app-v4.has-preview-bar #preview-phone-frame {
  background:
    linear-gradient(145deg, rgba(232,247,242,.92) 0%, rgba(247,250,248,.98) 35%, rgba(238,247,244,.94) 72%, rgba(245,250,247,1) 100%) !important;
}

html[data-preview-device="mobile"] body.app-v4.has-preview-bar #preview-phone-frame > div {
  border-radius: 34px !important;
  box-shadow: 0 24px 70px rgba(25,39,54,.18), 0 0 0 1px rgba(37,50,61,.10) !important;
}


/* ==========================================================================
   18. APP + ADMIN V11 HARDENING
   Directly neutralizes legacy green component rules that still live inside
   admin.html/app.html while keeping semantic behavior and hooks untouched.
   ========================================================================== */

html[data-design="v2"][data-theme="light"] body.admin-v4,
html[data-design="v2"][data-theme="light"] body.app-v4 {
  --np: #08766e !important;
  --na: #125f80 !important;
  --nb: #0e8f83 !important;
  --ng: #0e8f83 !important;
  --nv: #50d6c4 !important;
  --nc: #0e8f83 !important;
  --bg: #f7faf9 !important;
  --s1: rgba(255,255,255,.82) !important;
  --s2: rgba(255,255,255,.58) !important;
  --s3: rgba(238,247,244,.72) !important;
  --s4: #eef8f6 !important;
  --b1: rgba(37,50,61,.10) !important;
  --b2: rgba(37,50,61,.16) !important;
  --b3: rgba(37,50,61,.24) !important;
  --t1: #11161b !important;
  --t2: #53606b !important;
  --t3: #7b8794 !important;
  --t4: #9aa5b1 !important;
  --sh: 0 30px 90px rgba(25,39,54,.14), 0 8px 22px rgba(25,39,54,.08) !important;
  --sh2: 0 18px 54px rgba(25,39,54,.11) !important;
  background:
    linear-gradient(145deg, rgba(232,247,242,.94) 0%, rgba(247,250,248,.98) 35%, rgba(238,247,244,.96) 72%, rgba(245,250,247,1) 100%),
    radial-gradient(circle at top left, rgba(80,214,196,.14), transparent 34%),
    radial-gradient(circle at bottom right, rgba(14,143,131,.12), transparent 32%) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .nav,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav {
  background: rgba(255,255,255,.76) !important;
  border-color: var(--v11-line) !important;
  box-shadow: 0 10px 32px rgba(25,39,54,.08) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .nav-icon,
html[data-design="v2"][data-theme="light"] body.admin-v4 .nav-av,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav-icon,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav-av,
html[data-design="v2"][data-theme="light"] body.app-v4 .ci,
html[data-design="v2"][data-theme="light"] body.app-v4 .empty-ico {
  background: var(--v11-gradient-cta) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(17,119,128,.20) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-p,
html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-preview,
html[data-design="v2"][data-theme="light"] body.admin-v4 .btn-primary,
html[data-design="v2"][data-theme="light"] body.admin-v4 .empty-cta,
html[data-design="v2"][data-theme="light"] body.app-v4 .btn-p,
html[data-design="v2"][data-theme="light"] body.app-v4 .btn-primary,
html[data-design="v2"][data-theme="light"] body.app-v4 .empty-cta,
html[data-design="v2"][data-theme="light"] body.app-v4 .hb-edit,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-btn-primary {
  background: var(--v11-gradient-cta) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--v11-shadow-cta) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn.active,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .nav-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .role-pill.active,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tm-tab.active,
html[data-design="v2"][data-theme="light"] body.admin-v4 .fvs-btn.active,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tdb-chip.active,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tdb-tr-btn.active,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sc-aside-item.sc-active,
html[data-design="v2"][data-theme="light"] body.app-v4 .ntab.active,
html[data-design="v2"][data-theme="light"] body.app-v4 .ndropitem.active,
html[data-design="v2"][data-theme="light"] body.app-v4 .mob-drawer-item.mob-active,
html[data-design="v2"][data-theme="light"] body.app-v4 .mobile-more-item.is-active,
html[data-design="v2"][data-theme="light"] body.app-v4 .badge,
html[data-design="v2"][data-theme="light"] body.app-v4 .pill,
html[data-design="v2"][data-theme="light"] body.app-v4 .tag {
  background: linear-gradient(135deg, rgba(80,214,196,.12), rgba(14,143,131,.14)) !important;
  border-color: rgba(8,118,110,.18) !important;
  color: var(--v11-teal) !important;
  box-shadow: 0 12px 28px rgba(17,119,128,.09) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .panel,
html[data-design="v2"][data-theme="light"] body.admin-v4 .table-wrap,
html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-recent,
html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-qa-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .feat-group,
html[data-design="v2"][data-theme="light"] body.admin-v4 .team-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .team-stat,
html[data-design="v2"][data-theme="light"] body.admin-v4 .role-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .adm-perm-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sup-settings-box,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sc-aside,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sc-cb-preview,
html[data-design="v2"][data-theme="light"] body.app-v4 .card,
html[data-design="v2"][data-theme="light"] body.app-v4 .panel,
html[data-design="v2"][data-theme="light"] body.app-v4 .table-wrap,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-kpi,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-schedule,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-map-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-requests,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-fin__card,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-fin__side,
html[data-design="v2"][data-theme="light"] body.app-v4 .set-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .pop-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62)),
    linear-gradient(120deg, rgba(80,214,196,.08), transparent 42%, rgba(14,143,131,.10)) !important;
  border-color: var(--v11-line) !important;
  box-shadow: var(--v11-shadow-soft) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .feat-toggle.on,
html[data-design="v2"][data-theme="light"] body.admin-v4 .adm-perm-toggle.on,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sc-switch input:checked ~ .sc-switch-slider,
html[data-design="v2"][data-theme="light"] body.app-v4 input[type="checkbox"]:checked,
html[data-design="v2"][data-theme="light"] body.app-v4 input[type="radio"]:checked {
  accent-color: var(--v11-teal) !important;
  background: var(--v11-gradient-cta) !important;
  border-color: transparent !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 [style*="#0e8f83"],
html[data-design="v2"][data-theme="light"] body.admin-v4 [style*="#08766e"],
html[data-design="v2"][data-theme="light"] body.admin-v4 [style*="#50d6c4"],
html[data-design="v2"][data-theme="light"] body.admin-v4 [style*="16,185,129"],
html[data-design="v2"][data-theme="light"] body.admin-v4 [style*="52,211,153"],
html[data-design="v2"][data-theme="light"] body.app-v4 [style*="#0e8f83"],
html[data-design="v2"][data-theme="light"] body.app-v4 [style*="#08766e"],
html[data-design="v2"][data-theme="light"] body.app-v4 [style*="#50d6c4"],
html[data-design="v2"][data-theme="light"] body.app-v4 [style*="16,185,129"],
html[data-design="v2"][data-theme="light"] body.app-v4 [style*="52,211,153"] {
  border-color: rgba(8,118,110,.18) !important;
  color: var(--v11-teal) !important;
  box-shadow: none !important;
}


/* Section 19 (floating-sidebar regression block) removed 2026-05-15.
   70-app-shell-solid.css is the authoritative shell via .mb-app-shell /
   .mb-admin-shell — those classes are present in static markup of app.html
   and admin.html, so 70's selector specificity wins on every rendered page.
   The mobile sibling block was also dead because 64-mobile-app-shell.css
   sets `display: none` on nav.nav for body.app-v4 at mobile widths. */

html[data-design="v2"][data-theme="light"] body.admin-v4 {
  --np: #125f80 !important;
  --ng: #08766e !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .nav-tabs {
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58)),
    linear-gradient(120deg, rgba(14,143,131,.06), transparent 42%, rgba(14,143,131,.05)) !important;
  border-right: 1px solid rgba(37,50,61,.12) !important;
  box-shadow: 16px 0 54px rgba(25,39,54,.07) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(37,50,61,.12) !important;
  color: #53606b !important;
  box-shadow: 0 8px 18px rgba(25,39,54,.045) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn:hover {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(14,143,131,.26) !important;
  color: #11161b !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn.active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,247,244,.82)),
    linear-gradient(120deg, rgba(14,143,131,.16), transparent 58%) !important;
  border-color: rgba(18,95,128,.38) !important;
  color: #125f80 !important;
  box-shadow: 0 16px 38px rgba(25,39,54,.10), inset 0 0 0 1px rgba(255,255,255,.62) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn svg,
html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-recent-ico,
html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-qa-ico {
  color: #125f80 !important;
  stroke: currentColor !important;
  background: rgba(14,143,131,.10) !important;
  border: 1px solid rgba(14,143,131,.24) !important;
  box-shadow: none !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .nav-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .pill,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tag,
html[data-design="v2"][data-theme="light"] body.admin-v4 .role-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .team-card-status,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sup-ticket-status,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sla-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-trend.up {
  background: rgba(14,143,131,.11) !important;
  border-color: rgba(14,143,131,.24) !important;
  color: #125f80 !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-card::before {
  background: linear-gradient(180deg, rgba(14,143,131,.95), rgba(14,143,131,.55)) !important;
}

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


/* ==========================================================================
   20. BLUE GLASS CONSOLIDATION
   Final cool-surface pass for public, admin, app and operator preview.
   Removes warm beige/champagne bands from visible canvases and component
   layers while preserving the current sidebar geometry.
   ========================================================================== */

:root {
  --v11-bg-warm: #eef8f6;
  --v11-warm: #eef8f6;
  --v11-champagne: #0e8f83;
  --v11-blue-canvas: #f7faf8;
  --v11-blue-canvas-2: #eef8f6;
  --v11-blue-panel: rgba(255,255,255,.80);
  --v11-blue-panel-strong: rgba(255,255,255,.92);
  --v11-blue-tint: rgba(14,143,131,.12);
  --v11-blue-tint-soft: rgba(14,143,131,.075);
  --v11-blue-line: rgba(37,50,61,.12);
  --v11-blue-shell:
    radial-gradient(circle at 18% -8%, rgba(14,143,131,.16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(80,214,196,.08), transparent 30%),
    #FFFFFF;
}

html[data-design="v2"][data-theme="light"] body,
html[data-design="v2"][data-theme="light"] body.premium-public,
html[data-design="v2"][data-theme="light"] body.admin-v4,
html[data-design="v2"][data-theme="light"] body.app-v4,
html[data-design="v2"][data-theme="light"] body.marketplace-v4,
html[data-design="v2"][data-theme="light"] body.form-v4,
html[data-design="v2"][data-theme="light"] body.checkout-v4,
html[data-design="v2"][data-theme="light"] body.onboarding-v4 {
  --s4: #eef8f6 !important;
  --t4: #9aa5b1 !important;
  background: var(--v11-blue-shell) !important;
}

html[data-design="v2"][data-theme="light"] body::before,
html[data-design="v2"][data-theme="light"] body.premium-public::before,
html[data-design="v2"][data-theme="light"] body.admin-v4::before,
html[data-design="v2"][data-theme="light"] body.app-v4::before {
  background:
    linear-gradient(100deg, rgba(14,143,131,.09), transparent 36%, rgba(18,95,128,.055) 72%, transparent),
    repeating-linear-gradient(90deg, rgba(17,22,27,.022) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(17,22,27,.018) 0 1px, transparent 1px 104px) !important;
}

html[data-preview-device="mobile"] body,
html[data-preview-device="mobile"] body.app-v4.has-preview-bar #preview-phone-frame {
  background: var(--v11-blue-shell) !important;
}

html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav,
html[data-design="v2"][data-theme="light"] body.admin-v4 .nav-tabs,
html[data-design="v2"][data-theme="light"] body.admin-v4 nav.nav,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav-brand,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav-user,
html[data-design="v2"][data-theme="light"] body.app-v4 .icon-btn,
html[data-design="v2"][data-theme="light"] body.app-v4 .mob-drawer,
html[data-design="v2"][data-theme="light"] body.app-v4 .mobile-more-sheet {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
    linear-gradient(120deg, rgba(14,143,131,.085), transparent 46%, rgba(18,95,128,.035)) !important;
  border-color: var(--v11-blue-line) !important;
  box-shadow: 0 22px 64px rgba(25,39,54,.11) !important;
}

html[data-design="v2"][data-theme="light"] body.app-v4 .ntab,
html[data-design="v2"][data-theme="light"] body.app-v4 .ndropitem,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav-user,
html[data-design="v2"][data-theme="light"] body.app-v4 #nav-settings-btn,
html[data-design="v2"][data-theme="light"] body.app-v4 #nav-logout-btn,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn {
  background: rgba(255,255,255,.68) !important;
  border-color: rgba(37,50,61,.105) !important;
  color: #53606b !important;
}

html[data-design="v2"][data-theme="light"] body.app-v4 .ntab:hover,
html[data-design="v2"][data-theme="light"] body.app-v4 .ntab.active,
html[data-design="v2"][data-theme="light"] body.app-v4 .ntab-group.open > .ntab,
html[data-design="v2"][data-theme="light"] body.app-v4 .ndropitem:hover,
html[data-design="v2"][data-theme="light"] body.app-v4 .ndropitem.active,
html[data-design="v2"][data-theme="light"] body.app-v4 .mob-drawer-item.mob-active,
html[data-design="v2"][data-theme="light"] body.app-v4 .mobile-more-item.is-active,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn:hover,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-btn.active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,244,250,.84)),
    linear-gradient(120deg, rgba(14,143,131,.18), transparent 62%) !important;
  border-color: rgba(14,143,131,.30) !important;
  color: #125f80 !important;
  box-shadow: 0 14px 34px rgba(25,39,54,.09) !important;
}

html[data-design="v2"][data-theme="light"] body.app-v4 .nbadge,
html[data-design="v2"][data-theme="light"] body.app-v4 .badge,
html[data-design="v2"][data-theme="light"] body.app-v4 .pill,
html[data-design="v2"][data-theme="light"] body.app-v4 .tag,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-pill,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tab-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .nav-badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .badge,
html[data-design="v2"][data-theme="light"] body.admin-v4 .pill,
html[data-design="v2"][data-theme="light"] body.admin-v4 .tag,
html[data-design="v2"][data-theme="light"] body.admin-v4 .team-card-status,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sup-ticket-status,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sla-badge {
  background: rgba(14,143,131,.12) !important;
  border-color: rgba(14,143,131,.26) !important;
  color: #125f80 !important;
  box-shadow: none !important;
}

html[data-design="v2"][data-theme="light"] body.app-v4 .mb-dash__topbar,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-cal__topbar,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-cust__topbar,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-req__topbar,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-fin__hd,
html[data-design="v2"][data-theme="light"] body.app-v4 .ch,
html[data-design="v2"][data-theme="light"] body.app-v4 .card,
html[data-design="v2"][data-theme="light"] body.app-v4 .panel,
html[data-design="v2"][data-theme="light"] body.app-v4 .table-wrap,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-kpi,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-schedule,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-map-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-requests,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-fin__card,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-fin__side,
html[data-design="v2"][data-theme="light"] body.app-v4 .set-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .pop-card,
html[data-design="v2"][data-theme="light"] body.app-v4 .ibox,
html[data-design="v2"][data-theme="light"] body.admin-v4 .card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .panel,
html[data-design="v2"][data-theme="light"] body.admin-v4 .table-wrap,
html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-recent,
html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-qa-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .feat-group,
html[data-design="v2"][data-theme="light"] body.admin-v4 .team-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .team-stat,
html[data-design="v2"][data-theme="light"] body.admin-v4 .role-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .adm-perm-card,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sup-settings-box,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sc-aside,
html[data-design="v2"][data-theme="light"] body.admin-v4 .sc-cb-preview {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70)),
    linear-gradient(120deg, rgba(14,143,131,.075), transparent 45%, rgba(18,95,128,.035)) !important;
  border-color: rgba(37,50,61,.12) !important;
  box-shadow: 0 18px 54px rgba(25,39,54,.10) !important;
}

html[data-design="v2"][data-theme="light"] body.app-v4 .mb-req__layout,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-req__list,
html[data-design="v2"][data-theme="light"] body.app-v4 .mb-req__detail,
html[data-design="v2"][data-theme="light"] body.app-v4 [id*="request"],
html[data-design="v2"][data-theme="light"] body.app-v4 [id*="anfrag"] {
  border-color: rgba(37,50,61,.12) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-recent-head,
html[data-design="v2"][data-theme="light"] body.admin-v4 .card-head,
html[data-design="v2"][data-theme="light"] body.admin-v4 .panel-head,
html[data-design="v2"][data-theme="light"] body.admin-v4 .table-head,
html[data-design="v2"][data-theme="light"] body.app-v4 .card-head,
html[data-design="v2"][data-theme="light"] body.app-v4 .panel-head {
  background: rgba(247,249,252,.82) !important;
  border-color: rgba(37,50,61,.11) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-recent-ico,
html[data-design="v2"][data-theme="light"] body.admin-v4 .dash-qa-ico,
html[data-design="v2"][data-theme="light"] body.app-v4 .ci,
html[data-design="v2"][data-theme="light"] body.app-v4 .empty-ico,
html[data-design="v2"][data-theme="light"] body.app-v4 .brand-icon,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav-icon,
html[data-design="v2"][data-theme="light"] body.app-v4 .nav-av {
  background: linear-gradient(135deg, #125f80, #0e8f83) !important;
  color: #fff !important;
  border-color: rgba(14,143,131,.34) !important;
  box-shadow: 0 14px 30px rgba(18,95,128,.18) !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-card::before {
  background: linear-gradient(180deg, #0e8f83, rgba(18,95,128,.58)) !important;
}