/* Premium Milky Theme — NN Mobile Work Tab */
@media (max-width: 959px) {
  html:not(.dark) body.mobile-app-enabled.mob-on-work #s-mobile-work.mob-work-v2 {
    background: transparent;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #s-mobile-work .mob-work-body {
    position: relative;
    padding: 10px 12px 24px;
    background-color: #f7f2ea;
    background-image:
      linear-gradient(165deg, #faf6f0 0%, #f3ebe0 38%, #ede4d4 100%),
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 248, 238, 0.9) 0%, transparent 55%),
      radial-gradient(circle at 1px 1px, rgba(210, 195, 170, 0.1) 0.6px, transparent 0);
    background-size: auto, auto, 4px 4px;
    min-height: 100%;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-bg-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-vortex {
    position: absolute;
    right: -40px;
    top: 120px;
    width: 200px;
    height: 200px;
    background: url('../../img/mob/milk-powder-vortex.svg') center / contain no-repeat;
    opacity: 0.35;
    animation: mobWorkVortexSpin 22s linear infinite;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-wm-nn {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translateX(-50%);
    font-size: clamp(28px, 8vw, 36px);
    font-weight: 900;
    letter-spacing: 0.14em;
    color: rgba(201, 162, 39, 0.06);
    white-space: nowrap;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-wm-osa {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translateX(-50%);
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(201, 162, 39, 0.05);
  }

  @keyframes mobWorkVortexSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mob-work-checker-menu,
  html:not(.dark) body.mobile-app-enabled.mob-on-work #mob-task-center {
    position: relative;
    z-index: 1;
  }

  /* ── Hero profile panel ── */
  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero--premium {
    margin-bottom: 16px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-panel {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(201, 162, 39, 0.28);
    box-shadow:
      0 8px 32px rgba(201, 162, 39, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
    position: relative;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-glow {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 230, 180, 0.35) 0%, transparent 55%),
      radial-gradient(ellipse 60% 40% at 90% 30%, rgba(255, 248, 238, 0.4) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px 14px;
    background: linear-gradient(135deg, #fff8ee 0%, #f5e6c8 42%, #e8d5a3 100%);
    color: #5c5348;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-card::after {
    display: none;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-photo-wrap {
    width: 60px;
    height: 60px;
    border: 2.5px solid rgba(255, 253, 249, 0.95);
    background: rgba(255, 253, 249, 0.6);
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.2);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-photo-wrap.has-photo {
    border-color: #fffdf9;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25), 0 4px 14px rgba(201, 162, 39, 0.18);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-kicker {
    color: #8a7f72;
    opacity: 1;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 11px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-name {
    color: #4a4238;
    font-size: 17px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-meta {
    color: #7a6f62;
    opacity: 1;
    font-size: 11px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-brand {
    position: absolute;
    right: 12px;
    bottom: 10px;
    text-align: right;
    pointer-events: none;
    line-height: 1.15;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-brand-nn {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: rgba(92, 83, 72, 0.55);
    letter-spacing: 0.06em;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-brand-team {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: rgba(184, 149, 106, 0.7);
    letter-spacing: 0.18em;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-hero-stats {
    background: rgba(255, 253, 249, 0.92);
    border: none;
    border-top: 1px solid rgba(201, 162, 39, 0.15);
    border-radius: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-stat-div {
    background: rgba(201, 162, 39, 0.18);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-stat-val {
    color: #a8842a;
    font-size: 14px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-stat-val.is-ok {
    color: #8a7340;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-stat-val.is-wait {
    color: #b87a3a;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-stat-val.is-muted {
    color: #8a7f72;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-stat-lbl {
    color: #a89888;
    font-size: 10px;
  }

  /* ── Category headers ── */
  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-field-cat {
    margin-bottom: 14px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-field-cat-title {
    color: #5c5348;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 10px;
    gap: 8px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-field-cat-ic {
    background: rgba(255, 253, 249, 0.9);
    border: 1px solid rgba(201, 162, 39, 0.22);
    color: #b8956a;
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.08);
  }

  /* ── OSA featured task card ── */
  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-featured {
    border: 1.5px solid rgba(201, 162, 39, 0.45);
    border-radius: 18px;
    box-shadow:
      0 6px 24px rgba(201, 162, 39, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-featured-shine {
    background:
      radial-gradient(ellipse 70% 80% at 85% 20%, rgba(255, 248, 238, 0.85) 0%, transparent 55%),
      linear-gradient(155deg, #fffdf9 0%, #faf6f0 48%, #f5ebe0 100%);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-osa .mob-work-featured-shine {
    background:
      radial-gradient(ellipse 60% 70% at 90% 30%, rgba(255, 235, 200, 0.5) 0%, transparent 50%),
      linear-gradient(155deg, #fffdf9 0%, #faf6f0 50%, #f3ebe0 100%);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-before-after .mob-work-featured-shine {
    background:
      radial-gradient(ellipse 60% 70% at 90% 30%, rgba(201, 162, 39, 0.22) 0%, transparent 50%),
      linear-gradient(155deg, #fffdf9 0%, #faf6f0 50%, #f3ebe0 100%);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-my-route .mob-work-featured-shine {
    background:
      radial-gradient(ellipse 60% 70% at 90% 30%, rgba(180, 83, 9, 0.18) 0%, transparent 50%),
      linear-gradient(155deg, #fffbeb 0%, #fef3c7 50%, #ffedd5 100%);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-before-after .mob-work-featured-ic {
    font-size: 22px;
    display: grid;
    place-items: center;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-featured-ic {
    background: rgba(255, 253, 249, 0.95);
    border: 1px solid rgba(201, 162, 39, 0.2);
    box-shadow: 0 3px 12px rgba(201, 162, 39, 0.1);
    border-radius: 14px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-featured-t {
    color: #4a4238;
    font-size: 16px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-featured-d {
    color: #8a7f72;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-featured-go {
    background: linear-gradient(145deg, #d4a017 0%, #b8860b 45%, #9a7209 100%);
    border: none;
    color: #fffdf9;
    font-size: 12px;
    font-weight: 800;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow:
      0 4px 16px rgba(154, 114, 9, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    letter-spacing: 0.02em;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-featured:active .mob-work-featured-go {
    transform: scale(0.97);
  }

  /* ── Soon cards ── */
  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-soon-card {
    background: rgba(255, 253, 249, 0.75);
    border: 1px solid rgba(201, 162, 39, 0.22);
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(201, 162, 39, 0.06);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-soon-badge {
    background: linear-gradient(135deg, #c4a882, #a8842a);
    color: #fffdf9;
    font-size: 8px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-soon-ic {
    background: rgba(255, 253, 249, 0.9);
    border-color: rgba(201, 162, 39, 0.18);
    opacity: 0.75;
    filter: sepia(0.35) saturate(0.7);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-soon-t {
    color: #6b6154;
    font-weight: 700;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-soon-d {
    color: #a89888;
  }

  /* ── Supervisor task boxes ── */
  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-task-box {
    background: rgba(255, 253, 249, 0.92);
    border: 1px solid rgba(201, 162, 39, 0.22);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(201, 162, 39, 0.08);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-task-box-title {
    color: #4a4238;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-task-tab.on {
    background: linear-gradient(145deg, #fff8ee, #f5e6c8);
    color: #8a7340;
    border-color: rgba(201, 162, 39, 0.35);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-task-tab {
    color: #8a7f72;
    border-color: rgba(201, 162, 39, 0.2);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-mission-hdr {
    color: #5c5348;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-mission-card {
    background: rgba(255, 253, 249, 0.9);
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: 16px;
  }

  /* ── Bottom nav: golden-brown, no pastel circles ── */
  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar {
    background: rgba(255, 253, 249, 0.98);
    border-top-color: rgba(201, 162, 39, 0.2);
    box-shadow: 0 -4px 24px rgba(201, 162, 39, 0.1);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab {
    color: #a89888;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab-ic {
    background: linear-gradient(160deg, #fffdf9 0%, #f5ebe0 100%);
    border: 2px solid rgba(201, 162, 39, 0.2);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.1);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab-ic img {
    filter: sepia(0.45) saturate(0.85) brightness(0.92);
    opacity: 0.88;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab.on .mob-tab-ic {
    background: linear-gradient(160deg, #fff8e8 0%, #f5e6c8 100%);
    border-color: rgba(201, 162, 39, 0.45);
    box-shadow: 0 6px 18px rgba(201, 162, 39, 0.22);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab.on {
    color: #a8842a;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab.on .mob-tab-lbl {
    color: #a8842a;
    font-weight: 800;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab-fab .mob-tab-ic {
    background: linear-gradient(145deg, #fffdf9 0%, #f5ebe0 100%);
    border: 3px solid rgba(255, 253, 249, 0.98);
    box-shadow:
      0 0 0 1px rgba(201, 162, 39, 0.25),
      0 8px 24px rgba(201, 162, 39, 0.22);
    animation: mobCheckinWaitPulse 2.8s ease-in-out infinite;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab-fab .mob-tab-ic img {
    filter: none;
    opacity: 1;
    width: 38px;
    height: 38px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab-fab .mob-tab-fab-lbl {
    color: #a8842a;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-done .mob-tab-ic {
    animation: none;
    background: linear-gradient(145deg, #e8e0d4, #d4c4a8);
  }

  @keyframes mobCheckinWaitPulse {
    0%, 100% {
      box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.25),
        0 8px 22px rgba(201, 162, 39, 0.2),
        0 0 0 0 rgba(201, 162, 39, 0.3);
    }
    50% {
      box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.35),
        0 10px 28px rgba(201, 162, 39, 0.32),
        0 0 0 8px rgba(201, 162, 39, 0);
    }
  }

  /* Supervisor work dropdowns — NN gold theme (KC structure) */
  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd {
    background: rgba(255, 253, 249, 0.92);
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: 18px;
    box-shadow:
      0 8px 22px rgba(168, 132, 42, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mob-work-dd-sup::before {
    background: linear-gradient(180deg, #dfc056, #c9a227);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mob-work-dd-field::before {
    background: linear-gradient(180deg, #3cb8a4, #2f9e8a);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd-hdr {
    background: transparent;
    padding: 14px 14px 14px 16px;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd-hdr:active {
    background: rgba(255, 248, 238, 0.55);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd.is-open .mob-work-dd-hdr {
    background: rgba(255, 253, 249, 0.55);
    border-bottom: 1px dashed rgba(201, 162, 39, 0.22);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd-title {
    color: #4a4238;
    font-weight: 800;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd.is-open .mob-work-dd-title {
    color: #a8842a;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd-sub {
    color: #8a7f72;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mob-work-dd-sup .mob-work-dd-ic {
    background: linear-gradient(145deg, #fff4d4, #f0df9a);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work #mob-work-dd-field .mob-work-dd-ic {
    background: linear-gradient(145deg, #dff7f2, #b8ebe1);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd-chevron {
    color: #a8842a;
    background: rgba(201, 162, 39, 0.12);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd.is-open .mob-work-dd-chevron {
    background: rgba(201, 162, 39, 0.22);
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-dd-body.mob-task-pane {
    background: transparent;
  }

  html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-task-tabs {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html:not(.dark) body.mobile-app-enabled.mob-on-work .mob-work-vortex,
    html:not(.dark) body.mobile-app-enabled.mob-on-work #mobile-app-tabbar .mob-tab-fab .mob-tab-ic {
      animation: none;
    }
  }
}