/* ════════════════════════════════════════════════════════════════════════
   68-v11-brand.css — v11 visual identity as shared design layer

   Source of truth: landing-v11.html + 67-landing-v11.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:           #f7f8fb;
  --v11-bg-warm:      #eef4fa;
  --v11-ink:          #11161b;
  --v11-ink-soft:     #53606b;
  --v11-ink-muted:    #7b8794;
  --v11-mint:         #50d6c4;
  --v11-mint-deep:    #0e8f83;
  --v11-teal:         #08766e;
  --v11-deep:         #125f80;
  --v11-blue:         #67b8f8;
  --v11-champagne:    #67b8f8;

  /* 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 */
  --v11-radius-xl:    32px;
  --v11-radius-lg:    24px;
  --v11-radius-md:    18px;
  --v11-radius-pill:  999px;

  /* 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(103,184,248,.14));
}


/* ────────────────────────────────────────────────────────────────────────
   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:                #f7f8fb;
}

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: #67b8f8;
  --ng: #0e8f83;
  --bg: #f7f8fb;
  --s1: #ffffff;
  --s2: rgba(255,255,255,.72);
  --s3: rgba(238,242,247,.84);
  --s4: #eef4fa;
  --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: 14px;
  --r2: 18px;
  --r3: 24px;
  --r4: 28px;
}

/* 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,242,251,.94) 0%, rgba(247,248,251,.98) 35%, rgba(238,242,247,.96) 72%, rgba(245,248,250,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(103,184,248,.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);
}


/* ────────────────────────────────────────────────────────────────────────
   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: 14px !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: 14px !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: #67b8f8;
  --ng: #0e8f83;
  --bg: #f7f8fb;
  --s1: #ffffff;
  --s2: #f4f6fa;
  --s3: #eef2f7;
  --s4: #eef4fa;
  --t1: #11161b;
  --t2: #53606b;
  --t3: #7b8794;
  --t4: #eef4fa;
  --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: 12px;
  --r2: 16px;
  --r3: 22px;
  --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 — Hide all theme toggles. v11 is light-only for now. The
   underlying setThemeMode() function still exists; we just hide the UI
   so users can't switch back to dark and break the v11 identity. */
html[data-design="v2"] .theme-seg,
html[data-design="v2"] .tseg,
html[data-design="v2"] [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(103,184,248,.16), transparent 28%),
    linear-gradient(145deg, #eef4fa 0%, #f7f8fb 54%, #eef2f7 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(103,184,248,.10), transparent 42%),
    linear-gradient(145deg, #eef4fa 0%, #f7f8fb 50%, #eef2f7 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: 14px !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(103,184,248,.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 MARK + WORDMARK — replace the old `mb-wordmark` icon

   45-modern-premium.css:209-216 paints `.mb-wordmark::before` with
   `mobilebooking-favicon-green.png`. Lines 218-227 + 1130-1138 paint
   `.mb-wordmark::after` with the old sage gradient. Override both to
   the v11 colorful icon SVG + v11 brand-text gradient.
   ════════════════════════════════════════════════════════════════════════ */

html[data-design="v2"] .mb-wordmark::before,
.premium-public .mb-wordmark::before {
  width: 36px !important;
  height: 36px !important;
  background: url("/assets/images/mobilebooking-v11-icon.svg") center/contain no-repeat !important;
  border-radius: 11px !important;
  filter: drop-shadow(0 6px 18px rgba(17,119,128,.22)) !important;
}

html[data-design="v2"] .mb-wordmark::after,
.premium-public .mb-wordmark::after,
html[data-theme="light"] .premium-public .mb-wordmark::after {
  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;
  text-shadow: none !important;
  filter: none !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !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.
   ========================================================================== */

html[data-theme],
html[data-design] {
  color-scheme: light !important;
}

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,242,251,.92) 0%, rgba(247,248,251,.98) 35%, rgba(238,242,247,.94) 72%, rgba(245,248,250,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(1120px, calc(100% - 40px)) !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(103,184,248,.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,242,247,.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(103,184,248,.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),
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),
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(103,184,248,.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(103,184,248,.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,242,251,.96), rgba(247,248,251,.98) 44%, rgba(238,242,247,.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: 22px !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: 24px !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: 22px !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(103,184,248,.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,242,251,.92) 0%, rgba(247,248,251,.98) 35%, rgba(238,242,247,.94) 72%, rgba(245,248,250,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: #67b8f8 !important;
  --ng: #0e8f83 !important;
  --nv: #50d6c4 !important;
  --nc: #67b8f8 !important;
  --bg: #f7f8fb !important;
  --s1: rgba(255,255,255,.82) !important;
  --s2: rgba(255,255,255,.58) !important;
  --s3: rgba(238,242,247,.72) !important;
  --s4: #eef4fa !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,242,251,.94) 0%, rgba(247,248,251,.98) 35%, rgba(238,242,247,.96) 72%, rgba(245,248,250,1) 100%),
    radial-gradient(circle at top left, rgba(80,214,196,.14), transparent 34%),
    radial-gradient(circle at bottom right, rgba(103,184,248,.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(103,184,248,.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(103,184,248,.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;
}


/* ==========================================================================
   19. ADMIN/APP REGRESSION FIXES
   Keep the real app sidebar geometry from 03-nav.css and remove the remaining
   mint-heavy admin chrome. These rules intentionally load last.
   ========================================================================== */

@media (min-width: 641px) {
  html[data-design="v2"][data-theme="light"] body.app-v4 #app.app-visible {
    padding-left: var(--sidebar-w, 228px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav {
    position: fixed !important;
    left: 14px !important;
    top: 14px !important;
    bottom: 14px !important;
    z-index: 200 !important;
    width: calc(var(--sidebar-w, 228px) - 28px) !important;
    height: calc(100vh - 28px) !important;
    margin: 0 !important;
    padding: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 28px !important;
    border: 1px solid rgba(37,50,61,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.68)),
      linear-gradient(120deg, rgba(103,184,248,.08), transparent 45%, rgba(103,184,248,.06)) !important;
    box-shadow: 0 24px 70px rgba(25,39,54,.12) !important;
  }

  html[data-design="v2"][data-theme="light"] body.app-v4.has-preview-bar #app > nav.nav {
    top: calc(var(--preview-bar-h, 52px) + 14px) !important;
    height: calc(100vh - var(--preview-bar-h, 52px) - 28px) !important;
  }

  html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav .nav-brand,
  html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav .nav-right {
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav .nav-tabs {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
  }

  html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav .ntab,
  html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav .ndropitem {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"][data-theme="light"] body.app-v4 #app {
    padding-left: 0 !important;
  }

  html[data-design="v2"][data-theme="light"] body.app-v4 #app > nav.nav {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    left: auto !important;
    bottom: auto !important;
    padding: 0 8px !important;
    flex-direction: row !important;
    border-radius: 0 0 24px 24px !important;
  }
}

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(103,184,248,.06), transparent 42%, rgba(103,184,248,.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(103,184,248,.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,242,247,.82)),
    linear-gradient(120deg, rgba(103,184,248,.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(103,184,248,.10) !important;
  border: 1px solid rgba(103,184,248,.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(103,184,248,.11) !important;
  border-color: rgba(103,184,248,.24) !important;
  color: #125f80 !important;
}

html[data-design="v2"][data-theme="light"] body.admin-v4 .kpi-card::before {
  background: linear-gradient(180deg, rgba(103,184,248,.95), rgba(103,184,248,.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(103,184,248,.055) !important;
  border-color: rgba(103,184,248,.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: #eef4fa;
  --v11-warm: #eef4fa;
  --v11-champagne: #67b8f8;
  --v11-blue-canvas: #f7f9fc;
  --v11-blue-canvas-2: #eef4fa;
  --v11-blue-panel: rgba(255,255,255,.80);
  --v11-blue-panel-strong: rgba(255,255,255,.92);
  --v11-blue-tint: rgba(103,184,248,.12);
  --v11-blue-tint-soft: rgba(103,184,248,.075);
  --v11-blue-line: rgba(37,50,61,.12);
  --v11-blue-shell:
    radial-gradient(circle at 18% -8%, rgba(103,184,248,.16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(80,214,196,.08), transparent 30%),
    linear-gradient(145deg, #f7f9fc 0%, #f3f7fb 42%, #eef4fa 100%);
}

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: #eef4fa !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(103,184,248,.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(103,184,248,.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(103,184,248,.18), transparent 62%) !important;
  border-color: rgba(103,184,248,.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(103,184,248,.12) !important;
  border-color: rgba(103,184,248,.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(103,184,248,.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, #67b8f8) !important;
  color: #fff !important;
  border-color: rgba(103,184,248,.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, #67b8f8, rgba(18,95,128,.58)) !important;
}