/**
 * DSG TEAM — Certainty Theme Overlay (presentation only)
 * Match certaintybrand.com: navy / bright blue / soft wash / gold accent
 * Ambient = soft washing gradient + bokeh (NOT KC floating tissue sheets)
 * Load after mt_tissue_theme.css + mt_checkin_theme.css
 */
body.mt-tissue-brand {
  --mt-cert-navy: #0F4C81;
  --mt-cert-blue: #1E88E5;
  --mt-cert-deep: #0A3A63;
  --mt-cert-wash: #F3F7FC;
  --mt-cert-gold: #F5C542;
  --mt-cert-orange: #F18A1F;
  --mt-cert-sky: #4AA3E8;
  background-color: var(--mt-cert-wash);
  color: var(--mt-tissue-text, #1A3348);
}

/* ═══════════════════════════════════════════════════════════
   Ambient background — Certainty soft wash + bokeh (≠ KC tissue)
   ═══════════════════════════════════════════════════════════ */
body.mt-tissue-brand .tissue-background {
  background:
    radial-gradient(120% 80% at 12% 8%, rgba(74, 163, 232, 0.22) 0%, transparent 55%),
    radial-gradient(90% 70% at 88% 12%, rgba(15, 76, 129, 0.14) 0%, transparent 50%),
    radial-gradient(80% 60% at 70% 88%, rgba(245, 197, 66, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #EAF3FB 0%, #FFFFFF 42%, #F3F7FC 100%) !important;
  animation: mt-cert-wash-shift 22s ease-in-out infinite alternate;
}

@keyframes mt-cert-wash-shift {
  0% {
    background-position: 0% 0%, 100% 0%, 80% 100%, 0 0;
    filter: hue-rotate(0deg);
  }
  100% {
    background-position: 8% 6%, 92% 8%, 68% 92%, 0 0;
    filter: hue-rotate(-6deg);
  }
}

/* Replace floating “tissue blobs” with soft bokeh orbs */
body.mt-tissue-brand .tissue-background::before,
body.mt-tissue-brand .tissue-background::after {
  border-radius: 50% !important;
  filter: blur(28px) !important;
  box-shadow: none !important;
  opacity: 0.55 !important;
  animation-name: mt-cert-bokeh-drift !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

body.mt-tissue-brand .tissue-background::before {
  left: -8% !important;
  top: 18% !important;
  bottom: auto !important;
  width: min(55vw, 280px) !important;
  height: min(55vw, 280px) !important;
  background: radial-gradient(circle, rgba(30, 136, 229, 0.45) 0%, rgba(30, 136, 229, 0.08) 55%, transparent 72%) !important;
  animation-duration: 16s !important;
}

body.mt-tissue-brand .tissue-background::after {
  right: -6% !important;
  left: auto !important;
  top: 48% !important;
  bottom: auto !important;
  width: min(48vw, 240px) !important;
  height: min(48vw, 240px) !important;
  background: radial-gradient(circle, rgba(15, 76, 129, 0.32) 0%, rgba(245, 197, 66, 0.12) 50%, transparent 72%) !important;
  animation-duration: 21s !important;
  animation-delay: -4s !important;
}

@keyframes mt-cert-bokeh-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(18px, -22px) scale(1.08); opacity: 0.62; }
  100% { transform: translate(-12px, 14px) scale(0.96); opacity: 0.48; }
}

/* Hide original tissue drawing paths — reuse slots as soft Certainty bubbles */
body.mt-tissue-brand .mt-tissue-svg,
body.mt-tissue-brand #mt-tissue-ambient .mt-tissue-svg {
  visibility: visible !important;
  opacity: 0.42 !important;
  width: clamp(22px, 7vw, 48px) !important;
  height: clamp(22px, 7vw, 48px) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(74, 163, 232, 0.55) 42%, rgba(30, 136, 229, 0.12) 68%, transparent 78%) !important;
  box-shadow: 0 8px 18px rgba(15, 76, 129, 0.08);
  filter: none !important;
  overflow: hidden;
  animation-name: mt-cert-bubble-float !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}
body.mt-tissue-brand .mt-tissue-svg path,
body.mt-tissue-brand .mt-tissue-svg * {
  display: none !important;
}

body.mt-tissue-brand .mt-tissue-svg--1 { animation-duration: 11s !important; animation-delay: 0s !important; }
body.mt-tissue-brand .mt-tissue-svg--2 { animation-duration: 14s !important; animation-delay: -2s !important; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(245,197,66,.45) 45%, transparent 72%) !important; }
body.mt-tissue-brand .mt-tissue-svg--3 { animation-duration: 13s !important; animation-delay: -4s !important; }
body.mt-tissue-brand .mt-tissue-svg--4 { animation-duration: 16s !important; animation-delay: -1s !important; width: clamp(16px, 5vw, 32px) !important; height: clamp(16px, 5vw, 32px) !important; }
body.mt-tissue-brand .mt-tissue-svg--5 { animation-duration: 12s !important; animation-delay: -6s !important; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0%, rgba(15,76,129,.28) 50%, transparent 72%) !important; }
body.mt-tissue-brand .mt-tissue-svg--6 { animation-duration: 15s !important; animation-delay: -3s !important; width: clamp(18px, 6vw, 36px) !important; height: clamp(18px, 6vw, 36px) !important; }

@keyframes mt-cert-bubble-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.28; }
  35% { transform: translate(10px, -28px) scale(1.08); opacity: 0.55; }
  70% { transform: translate(-14px, -12px) scale(0.94); opacity: 0.4; }
}

body.mt-tissue-brand .mt-tissue-glow--blue {
  background: radial-gradient(circle, rgba(30, 136, 229, 0.42) 0%, transparent 70%) !important;
  opacity: 0.55 !important;
  animation: mt-cert-glow-drift 28s ease-in-out infinite !important;
}

body.mt-tissue-brand .mt-tissue-glow--pink {
  background: radial-gradient(circle, rgba(245, 197, 66, 0.28) 0%, rgba(30, 136, 229, 0.12) 45%, transparent 72%) !important;
  opacity: 0.5 !important;
  animation: mt-cert-glow-drift 32s ease-in-out infinite reverse !important;
}

@keyframes mt-cert-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.42; }
  50% { transform: translate(-3vw, 4vh) scale(1.12); opacity: 0.68; }
}

body.mt-tissue-brand #mt-tissue-ambient stop:nth-child(1) { stop-color: #ffffff; }
body.mt-tissue-brand #mt-tissue-ambient stop:nth-child(2) { stop-color: #E8F1FA; }
body.mt-tissue-brand #mt-tissue-ambient stop:nth-child(3) { stop-color: #D6E8F7; }

@media (prefers-reduced-motion: reduce) {
  body.mt-tissue-brand .tissue-background,
  body.mt-tissue-brand .tissue-background::before,
  body.mt-tissue-brand .tissue-background::after,
  body.mt-tissue-brand .mt-tissue-glow--blue,
  body.mt-tissue-brand .mt-tissue-glow--pink,
  body.mt-tissue-brand .mt-tissue-svg {
    animation: none !important;
  }
  body.mt-tissue-brand .mt-tissue-svg {
    opacity: 0.18 !important;
  }
}

/* ── Global interactive press (functional micro-interaction) ── */
body.mt-tissue-brand .mob-tab-fab,
body.mt-tissue-brand .mob-work-featured-btn,
body.mt-tissue-brand .mob-tab-btn,
body.mt-tissue-brand .mob-tab,
body.mt-tissue-brand .acc-card,
body.mt-tissue-brand .ci-btn-row .btn-primary,
body.mt-tissue-brand .ci-mode-btn,
body.mt-tissue-brand .ah-att-tab,
body.mt-tissue-brand .aep-upload-btn,
body.mt-tissue-brand .aep-save-btn,
body.mt-tissue-brand button.btn-primary,
body.mt-tissue-brand .btn-primary,
body.mt-tissue-brand .mob-work-featured-go,
body.mt-tissue-brand .mob-comp-mission-cta {
  transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out, filter 0.18s ease-in-out, background 0.18s ease-in-out, color 0.18s ease-in-out;
}

body.mt-tissue-brand .mob-tab-fab:active,
body.mt-tissue-brand .mob-work-featured-btn:active,
body.mt-tissue-brand .mob-tab-btn:active,
body.mt-tissue-brand .mob-tab:active,
body.mt-tissue-brand .acc-card:active,
body.mt-tissue-brand .ci-btn-row .btn-primary:active,
body.mt-tissue-brand .ci-mode-btn:active,
body.mt-tissue-brand .ah-att-tab:active,
body.mt-tissue-brand .aep-upload-btn:active,
body.mt-tissue-brand .aep-save-btn:active,
body.mt-tissue-brand button.btn-primary:active,
body.mt-tissue-brand .btn-primary:active,
body.mt-tissue-brand .mob-work-featured-go:active,
body.mt-tissue-brand .mob-comp-mission-cta:active {
  transform: scale(0.96);
}

/* Soft shine sweep on primary CTA / work cards */
body.mt-tissue-brand .mob-work-featured-btn,
body.mt-tissue-brand .mob-comp-mission-cta,
body.mt-tissue-brand #s-checkin .ci-btn-row .btn-primary,
body.mt-tissue-brand .aep-save-btn {
  position: relative;
  overflow: hidden;
}
body.mt-tissue-brand .mob-work-featured-btn::after,
body.mt-tissue-brand .mob-comp-mission-cta::after,
body.mt-tissue-brand #s-checkin .ci-btn-row .btn-primary::after,
body.mt-tissue-brand .aep-save-btn::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 36%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: mt-cert-shine 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mt-cert-shine {
  0%, 55% { left: -40%; opacity: 0; }
  60% { opacity: 1; }
  78% { left: 110%; opacity: 0.85; }
  100% { left: 110%; opacity: 0; }
}

/* Tab icons — gentle idle bob (Certainty friendly) */
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-ic {
  animation: mt-cert-icon-bob 3.6s ease-in-out infinite;
}
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(1) .mob-tab-ic { animation-delay: 0s; }
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(2) .mob-tab-ic { animation-delay: 0.25s; }
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(3) .mob-tab-ic { animation-delay: 0.5s; }
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(4) .mob-tab-ic { animation-delay: 0.75s; }
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(5) .mob-tab-ic { animation-delay: 1s; }
@keyframes mt-cert-icon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:active .mob-tab-ic {
  animation: none;
  transform: scale(0.94);
}

/* Hero / header soft aurora drift */
body.mt-tissue-brand .mob-home-hero,
body.mt-tissue-brand .mob-work-hero,
body.mt-tissue-brand .mob-profile-hero,
body.mt-tissue-brand #mobile-app-header {
  background-size: 160% 160% !important;
  animation: mt-cert-aurora 14s ease-in-out infinite alternate;
}
@keyframes mt-cert-aurora {
  0% { background-position: 0% 40%; }
  100% { background-position: 100% 60%; }
}

/* ── Day ring % (OSA / progress) — longer ease fill ── */
body.mt-tissue-brand .mob-day-ring-bg {
  stroke: rgba(15, 76, 129, 0.12) !important;
}
body.mt-tissue-brand .mob-day-ring-fg {
  stroke: var(--mt-cert-blue) !important;
  transition: stroke-dashoffset 0.9s ease-in-out !important;
}
body.mt-tissue-brand .mob-day-ring-pct {
  color: var(--mt-cert-navy) !important;
  font-weight: 700;
}
body.mt-tissue-brand .mob-day-pulse--done .mob-day-ring-fg {
  stroke: #2E7D32 !important;
}

/* ── Staggered fade + slide-up on screen enter ── */
@keyframes mt-cert-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.mt-tissue-brand #s-mobile-home.active .acc-card,
body.mt-tissue-brand #s-mobile-home.active .mob-hero-step,
body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn,
body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card,
body.mt-tissue-brand #s-mobile-work.active .mob-work-stat,
body.mt-tissue-brand #s-mobile-leave-swap.active .mob-leave-card,
body.mt-tissue-brand #s-mobile-leave-swap.active .mob-swap-card,
body.mt-tissue-brand #s-mobile-leave-swap.active .mob-ls-card,
body.mt-tissue-brand #s-mobile-profile.active .mob-profile-card,
body.mt-tissue-brand #s-mobile-profile.active .mob-profile-quota-item,
body.mt-tissue-brand #s-admin-employee-profile.active .aep-section,
body.mt-tissue-brand #s-checkin.active .ci-card,
body.mt-tissue-brand #s-attendance-hub.active .ah-att-card,
body.mt-tissue-brand #s-attendance-hub.active .ah-att-team-card {
  animation: mt-cert-rise 0.42s ease both;
}

body.mt-tissue-brand #s-mobile-home.active .acc-card:nth-child(1),
body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn:nth-child(1),
body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card:nth-child(1) { animation-delay: 0.04s; }
body.mt-tissue-brand #s-mobile-home.active .acc-card:nth-child(2),
body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn:nth-child(2),
body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card:nth-child(2) { animation-delay: 0.08s; }
body.mt-tissue-brand #s-mobile-home.active .acc-card:nth-child(3),
body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn:nth-child(3),
body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card:nth-child(3) { animation-delay: 0.12s; }
body.mt-tissue-brand #s-mobile-home.active .acc-card:nth-child(4),
body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn:nth-child(4),
body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card:nth-child(4) { animation-delay: 0.16s; }
body.mt-tissue-brand #s-mobile-home.active .acc-card:nth-child(5),
body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn:nth-child(5),
body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card:nth-child(5) { animation-delay: 0.2s; }
body.mt-tissue-brand #s-mobile-home.active .acc-card:nth-child(n+6),
body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn:nth-child(n+6),
body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card:nth-child(n+6) { animation-delay: 0.24s; }

body.mt-tissue-brand #s-mobile-home.active .mob-hero-step:nth-child(1) { animation-delay: 0.05s; }
body.mt-tissue-brand #s-mobile-home.active .mob-hero-step:nth-child(2) { animation-delay: 0.1s; }
body.mt-tissue-brand #s-mobile-home.active .mob-hero-step:nth-child(3) { animation-delay: 0.15s; }
body.mt-tissue-brand #s-mobile-home.active .mob-hero-step:nth-child(4) { animation-delay: 0.2s; }

/* ── Mobile shell / Top app bar (Certainty navy nav) ── */
body.mt-tissue-brand.mobile-app-enabled #mobile-app-header,
body.mt-tissue-brand #mobile-app-header {
  background: linear-gradient(100deg, #0A3A63 0%, #0F4C81 62%, #1565A8 100%) !important;
  border-bottom: 3px solid var(--mt-cert-gold) !important;
  box-shadow: 0 10px 28px -10px rgba(10, 58, 99, 0.35);
}

body.mt-tissue-brand #mobile-app-tabbar {
  background: rgba(255, 255, 255, 0.97) !important;
  border-top: 1px solid rgba(15, 76, 129, 0.1);
  box-shadow: 0 -8px 28px -10px rgba(15, 76, 129, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab,
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-btn {
  color: #5B7389 !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab.on,
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-btn.on,
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-btn.active {
  color: var(--mt-cert-navy) !important;
}

/* Tab icons — Certainty circular soft chips */
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-ic {
  background: linear-gradient(160deg, #ffffff 0%, #E8F1FA 100%) !important;
  border: 2px solid rgba(30, 136, 229, 0.22) !important;
  box-shadow:
    0 6px 16px rgba(15, 76, 129, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab.on .mob-tab-ic,
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-btn.on .mob-tab-ic {
  background: linear-gradient(145deg, #1E88E5 0%, #0F4C81 100%) !important;
  border-color: rgba(245, 197, 66, 0.85) !important;
  box-shadow: 0 8px 18px rgba(15, 76, 129, 0.28) !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-ic img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  border-radius: 8px;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab:active .mob-tab-ic {
  transform: scale(0.94);
}

/* FAB Check-in — ไอคอนเด่นแบบเบา ไม่มีวงรีน้ำเงินหลังป้ายข้อความ */
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  border-radius: 0 !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab .mob-tab-ic {
  width: 52px !important;
  height: 52px !important;
  margin-top: -28px !important;
  background: linear-gradient(160deg, #ffffff 0%, #E8F1FA 100%) !important;
  border: 2px solid rgba(30, 136, 229, 0.28) !important;
  box-shadow:
    0 8px 18px rgba(15, 76, 129, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.95) inset !important;
  border-radius: 50% !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab .mob-tab-ic img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab .mob-tab-fab-lbl {
  color: var(--mt-cert-navy, #0F4C81) !important;
  font-weight: 700 !important;
  background: transparent !important;
  text-shadow: none !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-pulse .mob-tab-ic {
  animation: mt-cert-fab-ic-pulse 2.2s ease-in-out infinite !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab-pulse {
  animation: none !important;
  box-shadow: none !important;
}

@keyframes mt-cert-fab-ic-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 8px 18px rgba(15, 76, 129, 0.16),
      0 0 0 0 rgba(30, 136, 229, 0.35);
  }
  50% {
    transform: scale(1.04);
    box-shadow:
      0 10px 22px rgba(15, 76, 129, 0.2),
      0 0 0 8px rgba(30, 136, 229, 0);
  }
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-active-shift .mob-tab-ic {
  border-color: rgba(30, 136, 229, 0.55) !important;
  background: linear-gradient(160deg, #EAF4FC 0%, #D6E8F7 100%) !important;
}

body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-done .mob-tab-ic {
  background: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border-color: rgba(100, 116, 139, 0.35) !important;
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.12) !important;
}

/* ── Home ── */
body.mt-tissue-brand #s-mobile-home,
body.mt-tissue-brand #s-mobile-work,
body.mt-tissue-brand #s-mobile-alerts,
body.mt-tissue-brand #s-mobile-leave-swap,
body.mt-tissue-brand #s-mobile-profile {
  background: transparent;
  color: var(--mt-tissue-text, #1A3348);
}

body.mt-tissue-brand .mob-home-hero,
body.mt-tissue-brand .mob-work-hero,
body.mt-tissue-brand .mob-profile-hero {
  background: linear-gradient(145deg, #0A3A63 0%, #0F4C81 52%, #1A6FB5 100%) !important;
  box-shadow: var(--mt-tissue-shadow-md);
  border-bottom: 3px solid rgba(245, 197, 66, 0.85);
}

body.mt-tissue-brand .acc-card {
  background: #fff !important;
  border: 1px solid rgba(15, 76, 129, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px -8px rgba(15, 76, 129, 0.14) !important;
}

body.mt-tissue-brand .acc-card .acc-name {
  color: var(--mt-cert-deep) !important;
  font-weight: 700;
}

body.mt-tissue-brand .acc-card .acc-count {
  color: var(--mt-cert-blue) !important;
}

/* ── Work cards — Certainty split-card feel (icon chip + blue go) ── */
body.mt-tissue-brand .mob-work-featured-btn,
body.mt-tissue-brand .mob-field-task-btn,
body.mt-tissue-brand .mob-work-soon-card,
body.mt-tissue-brand .mob-mission-card {
  background: #fff !important;
  border: 1px solid rgba(15, 76, 129, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px -10px rgba(15, 76, 129, 0.16) !important;
  color: var(--mt-tissue-text, #1A3348) !important;
  overflow: hidden;
}

body.mt-tissue-brand .mob-work-featured-t,
body.mt-tissue-brand .mob-work-soon-t,
body.mt-tissue-brand .mob-field-cat-title,
body.mt-tissue-brand .mob-mission-t {
  color: var(--mt-cert-navy) !important;
  position: relative;
}

body.mt-tissue-brand .mob-field-cat-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mt-cert-gold), var(--mt-cert-orange));
}

body.mt-tissue-brand .mob-work-featured-go {
  display: inline-flex !important;
  align-items: center;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(145deg, #1E88E5 0%, #0F4C81 100%) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(15, 76, 129, 0.22);
}

body.mt-tissue-brand .mob-work-stat-val {
  color: var(--mt-cert-navy) !important;
}
body.mt-tissue-brand .mob-work-stat-val.is-ok { color: #2E7D32 !important; }
body.mt-tissue-brand .mob-work-stat-val.is-wait { color: var(--mt-cert-orange) !important; }
body.mt-tissue-brand .mob-work-stat-lbl {
  color: var(--mt-tissue-muted, #5B7389) !important;
}

/* Icon chips — circular soft blue like Certainty site cards */
body.mt-tissue-brand .mob-work-featured-ic,
body.mt-tissue-brand .mob-mission-ic,
body.mt-tissue-brand .mob-work-soon-ic {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #EAF4FC 0%, #D6E8F7 100%) !important;
  border: 2px solid rgba(30, 136, 229, 0.2) !important;
  box-shadow: 0 4px 12px rgba(15, 76, 129, 0.1);
  overflow: hidden;
}

body.mt-tissue-brand .mob-work-featured-ic img,
body.mt-tissue-brand .mob-mission-ic img,
body.mt-tissue-brand .mob-work-soon-ic img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain;
  /* Keep cartoon/GIF colors — never invert to white silhouettes */
  filter: none !important;
  opacity: 1 !important;
}

/* Soft pastel chips only (no solid invert chips) */
body.mt-tissue-brand .mob-work-featured-btn:nth-child(3n+1) .mob-work-featured-ic,
body.mt-tissue-brand .mob-mission-card:nth-child(3n+1) .mob-mission-ic {
  background: linear-gradient(145deg, #EAF4FC 0%, #CDE4F7 100%) !important;
  border-color: rgba(30, 136, 229, 0.28) !important;
}

body.mt-tissue-brand .mob-work-featured-btn:nth-child(3n+2) .mob-work-featured-ic,
body.mt-tissue-brand .mob-mission-card:nth-child(3n+2) .mob-mission-ic {
  background: linear-gradient(145deg, #FFF8E7 0%, #FFE082 100%) !important;
  border-color: rgba(241, 138, 31, 0.35) !important;
}

body.mt-tissue-brand .mob-work-featured-btn:nth-child(3n) .mob-work-featured-ic,
body.mt-tissue-brand .mob-mission-card:nth-child(3n) .mob-mission-ic {
  background: linear-gradient(145deg, #E8F5EE 0%, #A8D5BA 100%) !important;
  border-color: rgba(15, 76, 129, 0.18) !important;
}

/* ── Leave / swap ── */
body.mt-tissue-brand #s-mobile-leave-swap .mob-ls-card,
body.mt-tissue-brand #s-mobile-leave-swap .mob-leave-card,
body.mt-tissue-brand #s-mobile-leave-swap .mob-swap-card,
body.mt-tissue-brand #s-mobile-leave-swap .card {
  background: #fff !important;
  border: 1px solid rgba(15, 76, 129, 0.1) !important;
  box-shadow: var(--mt-tissue-shadow-sm) !important;
}

body.mt-tissue-brand #s-mobile-leave-swap .btn-primary,
body.mt-tissue-brand #s-mobile-leave-swap button.primary {
  background: linear-gradient(145deg, #0F4C81 0%, #1E88E5 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px -6px rgba(15, 76, 129, 0.35) !important;
}

/* ── Profile / ข้อมูลฉัน ── */
body.mt-tissue-brand #s-mobile-profile .mob-profile-card,
body.mt-tissue-brand #s-mobile-profile .mob-profile-quota-item,
body.mt-tissue-brand #s-admin-employee-profile .aep-section,
body.mt-tissue-brand #s-admin-employee-profile .aep-wrap {
  background: #fff;
}
body.mt-tissue-brand #s-mobile-profile .mob-profile-card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 76, 129, 0.06) !important;
}
body.mt-tissue-brand #s-mobile-profile .mob-profile-quota,
body.mt-tissue-brand #s-mobile-profile .mob-profile-logout-btn {
  border-radius: 14px !important;
}

body.mt-tissue-brand #s-admin-employee-profile .ah-hdr {
  background: linear-gradient(105deg, #0A3A63 0%, #0F4C81 55%, #1565A8 100%) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--mt-cert-gold) !important;
  box-shadow: 0 8px 24px -8px rgba(10, 58, 99, 0.28);
}

body.mt-tissue-brand #s-admin-employee-profile .ah-hdr h2,
body.mt-tissue-brand #s-admin-employee-profile .ah-hdr .ah-sub {
  color: #fff !important;
}

body.mt-tissue-brand #s-admin-employee-profile .ah-back {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border: none !important;
}

body.mt-tissue-brand #s-admin-employee-profile .aep-section-title {
  color: var(--mt-cert-navy) !important;
  border-bottom-color: rgba(15, 76, 129, 0.12) !important;
}

body.mt-tissue-brand #s-admin-employee-profile .aep-upload-btn {
  color: var(--mt-cert-navy) !important;
  background: #E8F1FA !important;
  border-color: #A8CBE8 !important;
}

body.mt-tissue-brand #s-admin-employee-profile .aep-save-btn {
  background: linear-gradient(145deg, #0F4C81 0%, #1E88E5 100%) !important;
  box-shadow: 0 8px 20px -6px rgba(15, 76, 129, 0.35);
}

body.mt-tissue-brand #s-admin-employee-profile .aep-inp:focus {
  border-color: var(--mt-cert-blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
}

body.mt-tissue-brand #s-admin-employee-profile .aep-avatar-fb svg circle,
body.mt-tissue-brand #s-admin-employee-profile .aep-avatar-fb svg path {
  fill: var(--mt-cert-navy);
  stroke: var(--mt-cert-navy);
}

/* ── Check-in CTA press polish ── */
body.mt-tissue-brand #s-checkin .ci-btn-row .btn-primary {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out !important;
}
body.mt-tissue-brand #s-checkin .ci-btn-row .btn-primary:not(:disabled):active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

body.mt-tissue-brand #s-checkin .ci-mode-btn--active {
  background: linear-gradient(145deg, #1E88E5 0%, #0F4C81 100%) !important;
  color: #fff !important;
}

body.mt-tissue-brand #s-checkin #ci-checkout-btn {
  background: linear-gradient(145deg, #1E88E5 0%, #0F4C81 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(245, 197, 66, 0.45), 0 8px 18px rgba(15, 76, 129, 0.25) !important;
}

body.mt-tissue-brand #s-checkin #ci-checkin-btn {
  background: linear-gradient(145deg, #F18A1F 0%, #E65100 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(241, 138, 31, 0.35) !important;
}

/* Attendance hub tabs active */
body.mt-tissue-brand #s-attendance-hub .ah-att-tab.on {
  background: linear-gradient(145deg, #0F4C81 0%, #1E88E5 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(245, 197, 66, 0.4), 0 6px 14px rgba(15, 76, 129, 0.22) !important;
}

/* Hardcode Material blues → Certainty */
body.mt-tissue-brand .screen a,
body.mt-tissue-brand .screen .link {
  color: var(--mt-cert-blue);
}

@media (prefers-reduced-motion: reduce) {
  body.mt-tissue-brand #s-mobile-home.active .acc-card,
  body.mt-tissue-brand #s-mobile-home.active .mob-hero-step,
  body.mt-tissue-brand #s-mobile-work.active .mob-work-featured-btn,
  body.mt-tissue-brand #s-mobile-work.active .mob-work-soon-card,
  body.mt-tissue-brand #s-mobile-work.active .mob-work-stat,
  body.mt-tissue-brand #s-mobile-leave-swap.active .mob-leave-card,
  body.mt-tissue-brand #s-mobile-leave-swap.active .mob-swap-card,
  body.mt-tissue-brand #s-mobile-leave-swap.active .mob-ls-card,
  body.mt-tissue-brand #s-mobile-profile.active .mob-profile-card,
  body.mt-tissue-brand #s-mobile-profile.active .mob-profile-quota-item,
  body.mt-tissue-brand #s-admin-employee-profile.active .aep-section,
  body.mt-tissue-brand #s-checkin.active .ci-card,
  body.mt-tissue-brand #s-attendance-hub.active .ah-att-card,
  body.mt-tissue-brand #s-attendance-hub.active .ah-att-team-card {
    animation: none !important;
  }
  body.mt-tissue-brand .mob-day-ring-fg {
    transition: none !important;
  }
  body.mt-tissue-brand .mob-tab-fab:active,
  body.mt-tissue-brand .mob-work-featured-btn:active,
  body.mt-tissue-brand .acc-card:active,
  body.mt-tissue-brand .ci-btn-row .btn-primary:active {
    transform: none !important;
  }
  body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab-pulse,
  body.mt-tissue-brand #mobile-app-tabbar .mob-tab-ic,
  body.mt-tissue-brand .mob-home-hero,
  body.mt-tissue-brand .mob-work-hero,
  body.mt-tissue-brand .mob-profile-hero,
  body.mt-tissue-brand #mobile-app-header,
  body.mt-tissue-brand .mob-work-featured-btn::after,
  body.mt-tissue-brand .mob-comp-mission-cta::after,
  body.mt-tissue-brand #s-checkin .ci-btn-row .btn-primary::after,
  body.mt-tissue-brand .aep-save-btn::after {
    animation: none !important;
  }
  body.mt-tissue-brand .mob-hero-banner-img,
  body.mt-tissue-brand .mob-hero-banner-shine,
  body.mt-tissue-brand .mob-hero-card--certainty {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Status card — Certainty product banner background + motion
   ═══════════════════════════════════════════════════════════ */
body.mt-tissue-brand .mob-hero-card--certainty {
  isolation: isolate;
  background: linear-gradient(145deg, #1E88E5 0%, #0F4C81 55%, #0A3A63 100%) !important;
  border: 1px solid rgba(15, 76, 129, 0.12) !important;
  box-shadow:
    0 10px 28px -8px rgba(15, 76, 129, 0.35),
    0 2px 8px rgba(15, 76, 129, 0.1) !important;
  animation: mt-cert-hero-breathe 6.5s ease-in-out infinite;
}

@keyframes mt-cert-hero-breathe {
  0%, 100% { box-shadow: 0 10px 28px -8px rgba(15, 76, 129, 0.32), 0 2px 8px rgba(15, 76, 129, 0.1); }
  50% { box-shadow: 0 14px 34px -6px rgba(30, 136, 229, 0.4), 0 4px 12px rgba(15, 76, 129, 0.14); }
}

body.mt-tissue-brand .mob-hero-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* Pin products to the right — no upscale blur from Ken Burns */
body.mt-tissue-brand .mob-hero-banner-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 72%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  object-fit: cover;
  object-position: 82% 50%;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: mt-cert-banner-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes mt-cert-banner-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-3%, 0, 0); }
}

body.mt-tissue-brand .mob-hero-banner-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 58%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: mt-cert-banner-shine 9s ease-in-out infinite;
  opacity: 0.55;
  pointer-events: none;
}

@keyframes mt-cert-banner-shine {
  0%, 40% { background-position: 120% 0; opacity: 0; }
  48% { opacity: 0.55; }
  62% { background-position: -40% 0; opacity: 0.35; }
  75%, 100% { background-position: -40% 0; opacity: 0; }
}

/* Soft wash on left only — no backdrop-filter (was blurring the products) */
body.mt-tissue-brand .mob-hero-card--certainty .mob-hero-deco {
  z-index: 1;
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.9) 34%,
      rgba(255, 255, 255, 0.55) 52%,
      rgba(255, 255, 255, 0.12) 68%,
      transparent 82%
    ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mt-tissue-brand .mob-hero-card--certainty .mob-hero-inner,
body.mt-tissue-brand .mob-hero-card--certainty .mob-hero-brand {
  z-index: 2;
}

body.mt-tissue-brand .mob-hero-card--certainty .mob-hero-title {
  letter-spacing: 0.01em;
}

body.mt-tissue-brand .mob-hero-card--certainty .mob-hero-brand-rule {
  background: linear-gradient(90deg, #E4002B, #F18A1F) !important;
  animation: mt-cert-rule-pulse 2.8s ease-in-out infinite;
}

@keyframes mt-cert-rule-pulse {
  0%, 100% { opacity: 1; transform: scaleX(1); transform-origin: right center; }
  50% { opacity: 0.75; transform: scaleX(0.92); transform-origin: right center; }
}

/* Active timeline node — soft Certainty glow */
body.mt-tissue-brand .mob-hero-card--certainty .mob-hero-step[data-step="1"] .mob-hero-node,
body.mt-tissue-brand .mob-hero-timeline[data-current="1"] .mob-hero-step[data-step="1"] .mob-hero-node {
  box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.22), 0 0 14px rgba(74, 163, 232, 0.55);
  animation: mt-cert-node-pulse 2.4s ease-in-out infinite;
}

@keyframes mt-cert-node-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.18), 0 0 10px rgba(74, 163, 232, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(30, 136, 229, 0.12), 0 0 18px rgba(74, 163, 232, 0.65); }
}

/* Admin mobile home (MT-TT shell) — Certainty */
body.mt-tissue-brand #s-admin-home.ah-mob-on{background:var(--mt-cert-wash,#F3F7FC)}
body.mt-tissue-brand .ah-mttt-top{border-bottom-color:var(--mt-cert-gold,#F5C542)}
body.mt-tissue-brand .ah-mttt-acc-t,
body.mt-tissue-brand .ah-mttt-ci-btn{color:var(--mt-cert-navy,#0F4C81)}
body.mt-tissue-brand .ah-mttt-sq{background:linear-gradient(145deg,var(--mt-cert-blue,#1E88E5),var(--mt-cert-navy,#0F4C81))}
html.dark body.mt-tissue-brand #s-admin-home.ah-mob-on{background:#0f172a}
html.dark body.mt-tissue-brand .ah-mttt-acc,
html.dark body.mt-tissue-brand .ah-mttt-search,
html.dark body.mt-tissue-brand #s-admin-home.ah-mob-on #ah-admin-mobile-approval{background:#1e293b;border-color:rgba(148,163,184,.2)}
html.dark body.mt-tissue-brand .ah-mttt-acc-t{color:#93c5fd}
html.dark body.mt-tissue-brand .ah-mttt-row{color:#e2e8f0;border-top-color:rgba(148,163,184,.15)}