/**
 * B2C MT โ€” Tissue Brand Theme (Presentation Layer Only)
 * Hygiene Blue ยท Soft Cream ยท rounded surfaces ยท CSS-only ambient ยท no JS
 */
:root {
  --mt-hygiene-blue: #F0F7FF;
  --mt-soft-cream: #FFFAF1;
  --mt-tissue-blue-50: #F0F7FF;
  --mt-tissue-blue-100: #dceefb;
  --mt-tissue-blue-200: #b8d9f2;
  --mt-tissue-blue-300: #8fc1e8;
  --mt-tissue-blue-500: #5a9fd4;
  --mt-tissue-blue-700: #2c5282;
  --mt-tissue-navy: #1e3a5f;
  --mt-tissue-pink-50: #fdf2f6;
  --mt-tissue-pink-100: #f9e0ea;
  --mt-tissue-pink-200: #f3c9d9;
  --mt-tissue-pink-300: #e8a8c0;
  --mt-tissue-pink-400: #f5a89e;
  --mt-tissue-pink-500: #d484a8;
  --mt-tissue-coral: #f5a89e;
  --mt-tissue-surface: rgba(255, 255, 255, 0.88);
  --mt-tissue-surface-solid: #ffffff;
  --mt-tissue-border: rgba(143, 193, 232, 0.22);
  --mt-tissue-border-pink: rgba(232, 168, 192, 0.18);
  --mt-tissue-radius-sm: 24px;
  --mt-tissue-radius-md: 26px;
  --mt-tissue-radius-lg: 28px;
  --mt-tissue-radius-xl: 30px;
  --mt-tissue-radius-pill: 999px;
  --mt-tissue-shadow-sm: 0 8px 28px -6px rgba(90, 159, 212, 0.14), 0 2px 8px -2px rgba(61, 126, 181, 0.06);
  --mt-tissue-shadow-md: 0 18px 48px -10px rgba(90, 159, 212, 0.16), 0 6px 16px -4px rgba(212, 132, 168, 0.08);
  --mt-tissue-shadow-lg: 0 28px 64px -14px rgba(61, 126, 181, 0.18), 0 10px 24px -6px rgba(143, 193, 232, 0.12);
  --mt-tissue-shadow-float: 0 22px 50px -12px rgba(44, 82, 130, 0.14), 0 8px 20px -8px rgba(90, 159, 212, 0.1);
  --mt-tissue-text: #3d4f63;
  --mt-tissue-muted: #6b7f94;
  --mt-tissue-accent: var(--mt-tissue-blue-700);
  --mt-tissue-accent-soft: var(--mt-tissue-blue-100);
  --mt-text: var(--mt-tissue-text);
  --mt-muted: var(--mt-tissue-muted);
}

/* ══ Global tissue background animation (CSS-only · non-interactive) ══ */
.tissue-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%);
  isolation: isolate;
}

/* โ”€โ”€ Ambient layer (SVG tissues ยท inside tissue-background) โ”€โ”€ */
.tissue-background .mt-tissue-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.mt-tissue-ambient:not(.tissue-background .mt-tissue-ambient) {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* CSS tissue sheets (::before / ::after) */
.tissue-background::before,
.tissue-background::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: 0.32;
  filter: blur(3px);
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background:
    radial-gradient(ellipse at 35% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.55) 28%, transparent 62%),
    radial-gradient(ellipse at 62% 72%, rgba(184, 217, 242, 0.75) 0%, rgba(143, 193, 232, 0.45) 55%, transparent 100%);
  box-shadow:
    0 12px 48px rgba(90, 159, 212, 0.18),
    inset 0 0 40px rgba(255, 255, 255, 0.35);
}

.tissue-background::before {
  left: 8%;
  bottom: -22%;
  width: min(82vw, 380px);
  height: min(56vh, 340px);
  animation: tissue-bg-float-up-1 18s ease-in-out infinite;
}

.tissue-background::after {
  right: 4%;
  bottom: -26%;
  width: min(68vw, 300px);
  height: min(48vh, 280px);
  animation: tissue-bg-float-up-2 24s ease-in-out infinite;
  animation-delay: -6s;
}

@keyframes tissue-bg-float-up-1 {
  0% {
    transform: translateY(12vh) rotate(-12deg) scale(0.9);
    opacity: 0;
  }
  8% {
    opacity: 0.32;
  }
  92% {
    opacity: 0.28;
  }
  100% {
    transform: translateY(-118vh) rotate(10deg) scale(1.06);
    opacity: 0;
  }
}

@keyframes tissue-bg-float-up-2 {
  0% {
    transform: translateY(18vh) rotate(14deg) scale(0.86);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.26;
  }
  100% {
    transform: translateY(-112vh) rotate(-8deg) scale(1.04);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tissue-background::before,
  .tissue-background::after {
    animation: none !important;
    opacity: 0.14 !important;
    bottom: 20%;
  }
}

/* SVG tissue shapes (inside .mt-tissue-ambient) */
.mt-tissue-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.mt-tissue-svg {
  position: absolute;
  width: clamp(100px, 18vw, 220px);
  height: auto;
  pointer-events: none;
  will-change: transform;
  opacity: 0.42;
}
.mt-tissue-svg--1 { top: 5%; left: 3%; animation: mt-tissue-float-1 34s ease-in-out infinite; }
.mt-tissue-svg--2 { top: 16%; right: 5%; animation: mt-tissue-float-2 40s ease-in-out infinite; }
.mt-tissue-svg--3 { top: 40%; left: 8%; animation: mt-tissue-float-3 36s ease-in-out infinite; }
.mt-tissue-svg--4 { top: 52%; right: 10%; animation: mt-tissue-float-4 42s ease-in-out infinite; }
.mt-tissue-svg--5 { bottom: 16%; left: 5%; animation: mt-tissue-float-5 38s ease-in-out infinite; }
.mt-tissue-svg--6 { bottom: 24%; right: 6%; animation: mt-tissue-float-6 44s ease-in-out infinite; }
@keyframes mt-tissue-float-1 {
  0%, 100% { transform: translate(0, 0) rotate(-12deg) scale(1); opacity: 0.32; }
  50% { transform: translate(24px, -32px) rotate(-4deg) scale(1.04); opacity: 0.5; }
}
@keyframes mt-tissue-float-2 {
  0%, 100% { transform: translate(0, 0) rotate(8deg) scale(0.96); opacity: 0.28; }
  50% { transform: translate(-28px, 26px) rotate(14deg) scale(1.02); opacity: 0.44; }
}
@keyframes mt-tissue-float-3 {
  0%, 100% { transform: translate(0, 0) rotate(-6deg) scale(1.02); opacity: 0.34; }
  50% { transform: translate(36px, 18px) rotate(2deg) scale(0.98); opacity: 0.48; }
}
@keyframes mt-tissue-float-4 {
  0%, 100% { transform: translate(0, 0) rotate(12deg) scale(1); opacity: 0.26; }
  50% { transform: translate(-20px, -28px) rotate(6deg) scale(1.05); opacity: 0.42; }
}
@keyframes mt-tissue-float-5 {
  0%, 100% { transform: translate(0, 0) rotate(-16deg) scale(0.94); opacity: 0.3; }
  50% { transform: translate(18px, -16px) rotate(-8deg) scale(1.03); opacity: 0.46; }
}
@keyframes mt-tissue-float-6 {
  0%, 100% { transform: translate(0, 0) rotate(5deg) scale(1.02); opacity: 0.28; }
  50% { transform: translate(-32px, 12px) rotate(12deg) scale(0.96); opacity: 0.44; }
}
.mt-tissue-glow {
  position: absolute;
  width: 55vmin;
  height: 55vmin;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  filter: blur(48px);
}
.mt-tissue-glow--blue {
  top: -8%;
  right: -6%;
  background: radial-gradient(circle, rgba(184, 217, 242, 0.5) 0%, transparent 68%);
  opacity: 0.65;
  animation: mt-tissue-glow-blue 22s ease-in-out infinite;
}
.mt-tissue-glow--pink {
  bottom: -10%;
  left: -8%;
  background: radial-gradient(circle, rgba(243, 201, 217, 0.45) 0%, transparent 70%);
  opacity: 0.6;
  animation: mt-tissue-glow-pink 26s ease-in-out infinite;
}
@keyframes mt-tissue-glow-blue {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(-4vw, 3vh) scale(1.08); opacity: 0.72; }
}
@keyframes mt-tissue-glow-pink {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50% { transform: translate(5vw, -2vh) scale(1.06); opacity: 0.68; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-tissue-svg,
  .mt-tissue-glow {
    animation: none !important;
    opacity: 0.16 !important;
  }
}
/* Page canvas */
body.mt-tissue-brand {
  background: transparent !important;
  color: var(--mt-tissue-text);
}
html:has(body.mt-tissue-brand) {
  background: transparent !important;
  min-height: 100%;
}
body.mt-tissue-brand .app {
  background: transparent !important;
}
body.mt-tissue-brand .screen {
  background: transparent;
}
body.mt-tissue-brand .app,
body.mt-tissue-brand #admin-portal-sidebar,
body.mt-tissue-brand #customer-portal-sidebar,
body.mt-tissue-brand #pc-panel,
body.mt-tissue-brand #offline-banner {
  position: relative;
  z-index: 1;
}
/* Keep mobile chrome fixed — do not inherit relative from theme stack */
body.mt-tissue-brand #mobile-app-header {
  position: fixed !important;
  z-index: 9988 !important;
}
body.mt-tissue-brand #mobile-app-tabbar {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}
body.mt-tissue-brand #mobile-app-tabbar .mob-tab {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
}
/* โ”€โ”€ Global soft shapes (cards ยท buttons ยท inputs) โ”€โ”€ */
body.mt-tissue-brand .mob-card,
body.mt-tissue-brand .mob-task-box,
body.mt-tissue-brand .mob-action-card,
body.mt-tissue-brand .mob-route-card,
body.mt-tissue-brand .mob-comp-mission-card,
body.mt-tissue-brand .mob-sup-card,
body.mt-tissue-brand .acc-card,
body.mt-tissue-brand .ch-tile,
body.mt-tissue-brand .ah-tile,
body.mt-tissue-brand .ah-form-card,
body.mt-tissue-brand .cp-competitor-account-card,
body.mt-tissue-brand .cp-competitor-section,
body.mt-tissue-brand .mpm-card,
body.mt-tissue-brand #mobile-pending-modal .mob-comp-mission-sheet,
body.mt-tissue-brand .login-hero,
body.mt-tissue-brand .mob-day-pulse-card,
body.mt-tissue-brand .mob-senior-board-card {
  border-radius: var(--mt-tissue-radius-xl) !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-md) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 255, 0.82) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.mt-tissue-brand .mob-btn,
body.mt-tissue-brand .btn-primary,
body.mt-tissue-brand .btn-outline,
body.mt-tissue-brand .btn-red,
body.mt-tissue-brand .mob-comp-mission-cta,
body.mt-tissue-brand .mob-comp-mission-submit,
body.mt-tissue-brand .cp-competitor-btn-primary,
body.mt-tissue-brand .cp-competitor-btn-secondary {
  border-radius: var(--mt-tissue-radius-lg) !important;
}
body.mt-tissue-brand .btn-primary,
body.mt-tissue-brand .mob-comp-mission-cta:not(.mob-comp-mission-cta-secondary),
body.mt-tissue-brand .mob-comp-mission-submit,
body.mt-tissue-brand .cp-competitor-btn-primary {
  background: linear-gradient(145deg, var(--mt-tissue-blue-200) 0%, var(--mt-tissue-blue-300) 50%, var(--mt-tissue-blue-500) 100%) !important;
  border: none !important;
  border-radius: var(--mt-tissue-radius-pill) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
  color: #fff !important;
}
body.mt-tissue-brand .btn-outline,
body.mt-tissue-brand .mob-comp-mission-cta-secondary,
body.mt-tissue-brand .cp-competitor-btn-secondary {
  background: rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  color: var(--mt-tissue-pink-500) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .btn-red {
  background: linear-gradient(145deg, #f9c4d0 0%, var(--mt-tissue-pink-400) 100%) !important;
  box-shadow: 0 8px 24px -6px rgba(245, 168, 158, 0.35) !important;
}
body.mt-tissue-brand .field input,
body.mt-tissue-brand .field select,
body.mt-tissue-brand .ah-inp,
body.mt-tissue-brand .mob-comp-mission-select,
body.mt-tissue-brand .mob-comp-mission-input,
body.mt-tissue-brand input[type="text"],
body.mt-tissue-brand input[type="password"],
body.mt-tissue-brand select,
body.mt-tissue-brand textarea {
  border-radius: var(--mt-tissue-radius-sm) !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .field input:focus,
body.mt-tissue-brand .field select:focus,
body.mt-tissue-brand .ah-inp:focus {
  box-shadow: 0 0 0 3px rgba(143, 193, 232, 0.28), var(--mt-tissue-shadow-sm) !important;
  outline: none;
}
/* โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
   MOBILE DASHBOARD โ€” Top bar ยท Status card ยท OOS ยท Bottom nav
   (Non-destructive overrides only โ€” IDs/classes for logic untouched)
   โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• */
/* Transparent mobile canvas so ambient shows through */
body.mt-tissue-brand .mob-home-v2,
body.mt-tissue-brand .mob-home-body,
body.mt-tissue-brand .mob-wrap {
  background: transparent !important;
}
/* TOP BAR: Glassmorphism fixed app bar */
body.mt-tissue-brand #mobile-app-header {
  box-shadow: none !important;
  background: transparent !important;
}
body.mt-tissue-brand .mob-top-app-bar-glass {
  background: rgba(240, 247, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 16px !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .mob-topbar-logo-kc,
body.mt-tissue-brand .mob-topbar-user-greet,
body.mt-tissue-brand .mob-header-greet-line,
body.mt-tissue-brand #mob-header-greet,
body.mt-tissue-brand #mob-header-name,
body.mt-tissue-brand .mob-header-sub,
body.mt-tissue-brand .mob-topbar-user-sub {
  color: var(--mt-tissue-navy) !important;
  opacity: 1 !important;
}
body.mt-tissue-brand .mob-topbar-logo-team {
  color: var(--mt-tissue-blue-500) !important;
}
body.mt-tissue-brand .mob-topbar-tool-btn,
body.mt-tissue-brand .mob-home-icon-btn {
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--mt-tissue-blue-700) !important;
  border-radius: var(--mt-tissue-radius-sm) !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand #mobile-app-header .mob-bell-svg--outline {
  color: #E8A317 !important;
  filter: drop-shadow(0 1px 2px rgba(232, 163, 23, 0.42)) !important;
}
body.mt-tissue-brand .mob-top-app-bar .mt-role-badge {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(143, 193, 232, 0.4) !important;
  color: var(--mt-tissue-navy) !important;
}
body.mt-tissue-brand #mobile-app-header .mt-role-badge-menu {
  z-index: 99990 !important;
  border-radius: var(--mt-tissue-radius-sm) !important;
  box-shadow: var(--mt-tissue-shadow-md) !important;
  border: none !important;
}
body.mt-tissue-brand .mob-topbar-avatar,
body.mt-tissue-brand .mob-home-avatar {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(220, 238, 251, 0.8)) !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand.mobile-app-enabled.mob-on-home .mob-status-block {
  padding-top: 18px !important;
}
/* —— STATUS CARD: product photo inside timeline card (1A frosted) —— */
body.mt-tissue-brand .mob-hero-card {
  border-radius: var(--mt-tissue-radius-xl) !important;
  overflow: hidden !important;
  isolation: isolate;
  background: linear-gradient(148deg, #e3f0fc 0%, #ffffff 50%, #dceefb 100%) !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-lg) !important;
  color: var(--mt-tissue-navy) !important;
}
body.mt-tissue-brand .mob-hero-slides {
  border-radius: inherit;
}
body.mt-tissue-brand .mob-hero-deco {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.95) 32%,
      rgba(243, 249, 255, 0.82) 46%,
      rgba(255, 255, 255, 0.32) 62%,
      rgba(255, 255, 255, 0.08) 76%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
}
body.mt-tissue-brand .mob-hero-title,
body.mt-tissue-brand .mob-hero-lbl,
body.mt-tissue-brand .mob-hero-val,
body.mt-tissue-brand .mob-hero-loc,
body.mt-tissue-brand .mob-hero-msg,
body.mt-tissue-brand .mob-hero-step .mob-status-row,
body.mt-tissue-brand #mob-osa-status,
body.mt-tissue-brand #mob-sup-pending-status {
  color: var(--mt-tissue-navy) !important;
  opacity: 1 !important;
}
body.mt-tissue-brand .mob-hero-brand-kc {
  color: var(--mt-tissue-navy) !important;
}
body.mt-tissue-brand .mob-hero-brand-team {
  color: var(--mt-tissue-blue-500) !important;
}
body.mt-tissue-brand .mob-hero-timeline::before {
  background: linear-gradient(180deg, rgba(184, 217, 242, 0.35) 0%, rgba(143, 193, 232, 0.55) 50%, rgba(184, 217, 242, 0.35) 100%) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}
body.mt-tissue-brand .mob-hero-timeline::after {
  background: linear-gradient(180deg, #b8e6c8 0%, #8fc1e8 45%, #a8d4f5 100%) !important;
  box-shadow: 0 0 10px rgba(143, 193, 232, 0.45) !important;
}
body.mt-tissue-brand .mob-hero-node {
  border-color: rgba(143, 193, 232, 0.65) !important;
  background: radial-gradient(circle at 38% 32%, #ffffff 0%, #dceefb 68%) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .mob-hero-step.done .mob-hero-node {
  border-color: rgba(143, 193, 232, 0.85) !important;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #b8e6c8 55%, #8fc1e8 100%) !important;
  box-shadow: 0 0 12px rgba(143, 193, 232, 0.4) !important;
}
body.mt-tissue-brand .mob-hero-step.current .mob-hero-node {
  border-color: #ffffff !important;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #b8d9f2 55%, #5a9fd4 100%) !important;
  box-shadow: 0 0 0 4px rgba(143, 193, 232, 0.25), 0 0 16px rgba(90, 159, 212, 0.45) !important;
}
body.mt-tissue-brand .mob-home-section-title {
  color: var(--mt-tissue-navy) !important;
}
/* โ”€โ”€ OOS PRODUCT LIST โ”€โ”€ */
body.mt-tissue-brand .mob-oos-alert-card,
body.mt-tissue-brand .mob-sup-card.mob-oos-alert-card {
  background: #ffffff !important;
  padding: 20px 18px !important;
  border-radius: var(--mt-tissue-radius-xl) !important;
  box-shadow: var(--mt-tissue-shadow-float) !important;
}
body.mt-tissue-brand .mob-oos-reason-bar {
  height: 14px !important;
  border-radius: var(--mt-tissue-radius-pill) !important;
  background: var(--mt-hygiene-blue) !important;
  overflow: hidden;
  margin-bottom: 10px !important;
}
body.mt-tissue-brand .mob-oos-reason-bar .seg-dc { background: linear-gradient(90deg, #a8d4f5, #8fc1e8) !important; }
body.mt-tissue-brand .mob-oos-reason-bar .seg-shelf { background: linear-gradient(90deg, #f9d4c8, var(--mt-tissue-coral)) !important; }
body.mt-tissue-brand .mob-oos-reason-bar .seg-sup { background: linear-gradient(90deg, #e8c4f0, #d4a8e0) !important; }
body.mt-tissue-brand .mob-oos-reason-bar .seg-other { background: #c8d8e8 !important; }
body.mt-tissue-brand .mob-oos-legend .dot.dc { background: #8fc1e8 !important; }
body.mt-tissue-brand .mob-oos-legend .dot.shelf { background: var(--mt-tissue-coral) !important; }
body.mt-tissue-brand .mob-oos-legend .dot.sup { background: #d4a8e0 !important; }
body.mt-tissue-brand .mob-btn-outline {
  background: #ffffff !important;
  color: var(--mt-tissue-blue-700) !important;
  border: none !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
  border-radius: var(--mt-tissue-radius-lg) !important;
}
body.mt-tissue-brand .mob-btn-warn {
  background: linear-gradient(145deg, #ffe8e4 0%, var(--mt-tissue-coral) 55%, #f08a7e 100%) !important;
  color: #7a3d36 !important;
  border: none !important;
  box-shadow: 0 10px 28px -8px rgba(245, 168, 158, 0.45) !important;
  border-radius: var(--mt-tissue-radius-lg) !important;
}
body.mt-tissue-brand .mob-top-oos-empty {
  background: #ffffff !important;
  border-radius: var(--mt-tissue-radius-xl) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
  border: none !important;
}
/* โ”€โ”€ BOTTOM NAV: Floating + soft active glow + rounded icons โ”€โ”€ */
body.mt-tissue-brand #mobile-app-tabbar {
  left: var(--mob-frame-x, 10px) !important;
  right: var(--mob-frame-x, 10px) !important;
  bottom: calc(var(--mob-frame-bottom, 12px) + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  border-radius: var(--mt-tissue-radius-xl) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(21, 101, 192, 0.1) !important;
  box-shadow: var(--mt-tissue-shadow-float) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  padding: 28px 10px 10px !important;
}
body.mt-tissue-brand #mobile-app-tabbar::before {
  border-radius: var(--mt-tissue-radius-xl) var(--mt-tissue-radius-xl) 0 0;
}
body.mt-tissue-brand .mob-tab-ic {
  border-radius: 50% !important;
  background: linear-gradient(160deg, #ffffff 0%, var(--mt-hygiene-blue) 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .mob-tab-ic img {
  border-radius: 10px !important;
  filter: saturate(0.92) contrast(0.96);
}
body.mt-tissue-brand .mob-tab-ic-emoji {
  border-radius: 12px !important;
  font-size: 22px !important;
}
body.mt-tissue-brand .mob-tab.on .mob-tab-ic {
  background: linear-gradient(160deg, #ffffff 0%, var(--mt-tissue-blue-100) 100%) !important;
  box-shadow:
    0 0 0 6px rgba(184, 217, 242, 0.35),
    0 0 22px rgba(143, 193, 232, 0.55),
    var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .mob-tab.on,
body.mt-tissue-brand .mob-tab.on .mob-tab-lbl,
body.mt-tissue-brand .mob-tab-fab-lbl {
  color: var(--mt-tissue-blue-700) !important;
}
body.mt-tissue-brand .mob-tab {
  color: var(--mt-tissue-muted) !important;
}
/* โ”€โ”€ Admin / Customer sidebar (pastel glass) โ”€โ”€ */
@media (min-width: 960px) {
  body.mt-tissue-brand.admin-pc-portal #admin-portal-sidebar,
  body.mt-tissue-brand.customer-pc-portal #customer-portal-sidebar {
    background: linear-gradient(180deg,
      rgba(240, 247, 255, 0.98) 0%,
      rgba(220, 238, 251, 0.96) 42%,
      rgba(255, 250, 241, 0.94) 100%) !important;
    color: var(--mt-tissue-text) !important;
    box-shadow: 4px 0 28px rgba(143, 193, 232, 0.12) !important;
    border-right: none !important;
  }
  body.mt-tissue-brand .admin-nav-item,
  body.mt-tissue-brand .cp-nav-item {
    border-radius: var(--mt-tissue-radius-sm) !important;
    color: var(--mt-tissue-text) !important;
  }
  body.mt-tissue-brand .admin-nav-item.is-active,
  body.mt-tissue-brand .cp-nav-item.is-active {
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--mt-tissue-blue-700) !important;
    box-shadow: var(--mt-tissue-shadow-sm);
  }
}
/* โ”€โ”€ Login โ”€โ”€ */
body.mt-tissue-brand #s-login .login-hero,
body.mt-tissue-brand #s-admin-first-login .login-hero {
  background: var(--mt-tissue-surface) !important;
  border: none !important;
  border-radius: var(--mt-tissue-radius-xl) !important;
  box-shadow: var(--mt-tissue-shadow-lg) !important;
}
body.mt-tissue-brand .login-hero h1 {
  color: var(--mt-tissue-blue-700);
}
/* โ”€โ”€ Section pills / chips โ”€โ”€ */
body.mt-tissue-brand .mob-comp-mission-section-pill.is-active,
body.mt-tissue-brand .mob-comp-mission-section-pill[data-section="kc"].is-active {
  background: var(--mt-tissue-blue-100) !important;
  border: none !important;
  color: var(--mt-tissue-blue-700) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .mob-comp-mission-section-pill[data-section="competitor"].is-active {
  background: var(--mt-tissue-pink-100) !important;
  border: none !important;
  color: #b85a7a !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .store-badge {
  background: var(--mt-tissue-blue-100) !important;
  color: var(--mt-tissue-blue-700) !important;
  border-radius: var(--mt-tissue-radius-sm) !important;
  border: none !important;
}
/* Hide ambient on camera fullscreen */
body.cam-overlay-open .mt-tissue-ambient {
  opacity: 0;
  visibility: hidden;
}