body { font-family:'Inter',system-ui,sans-serif; background:#080d1a; color:#e2e8f0; overflow-x:hidden; }
  #monthly-target-presentation-modal { padding:0 !important; overflow:hidden !important; }
  #monthly-target-presentation-modal .monthly-presentation-shell { width:100vw; height:100vh; max-width:none !important; gap:0 !important; }
  #monthly-target-presentation-modal .monthly-presentation-toolbar {
    position:fixed;
    left:50%;
    top:12px;
    z-index:10002;
    width:min(calc(100vw - 32px),1440px);
    transform:translateX(-50%);
    background:rgba(2,6,23,.78) !important;
    backdrop-filter:blur(14px);
  }
  #monthly-target-presentation-modal .monthly-presentation-stage { width:100vw; height:100vh; padding:0 !important; align-items:stretch !important; justify-content:stretch !important; }
  #monthly-target-presentation-modal #monthly-target-active-slide {
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    border-width:0 !important;
    padding:clamp(92px,11vh,124px) clamp(28px,4vw,78px) clamp(48px,6vh,78px) !important;
  }
  #monthly-target-presentation-modal #monthly-target-active-slide > .relative.z-10 { min-height:0; }
  #monthly-target-presentation-modal .monthly-presentation-dots {
    position:fixed;
    left:50%;
    bottom:16px;
    z-index:10002;
    transform:translateX(-50%);
  }
  #monthly-target-presentation-modal .monthly-go-live-focus-slide { flex:1 1 auto; min-height:0; margin-top:clamp(16px,2.2vh,28px) !important; }
  #monthly-target-presentation-modal .monthly-go-live-focus-slide > .monthly-go-live-focus-graph { height:100%; min-height:0; }
  #monthly-target-presentation-modal .monthly-go-live-focus-graph { padding:clamp(14px,1.4vw,24px) !important; }
  #monthly-target-presentation-modal .monthly-go-live-focus-graph > .relative.z-10 { min-height:0; }
  #monthly-target-presentation-modal .monthly-go-live-focus-panel { min-height:0 !important; }
  #monthly-target-presentation-modal .monthly-go-live-focus-ring { height:clamp(180px,26vh,300px) !important; width:clamp(180px,26vh,300px) !important; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen { padding:0 !important; background:#020617 !important; backdrop-filter:none !important; overflow:hidden !important; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-presentation-shell { width:100vw; height:100vh; max-width:none !important; gap:0 !important; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-presentation-toolbar { display:none !important; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-presentation-stage { width:100vw; height:100vh; padding:0 !important; align-items:stretch !important; justify-content:stretch !important; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen #monthly-target-active-slide {
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    border-width:0 !important;
    padding:clamp(18px,2.4vw,38px) !important;
  }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen #monthly-target-active-slide > .relative.z-10 { min-height:0; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-go-live-focus-graph,
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-go-live-focus-panel { min-height:0 !important; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-go-live-focus-ring { height:clamp(180px,26vh,310px) !important; width:clamp(180px,26vh,310px) !important; }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-presentation-dots {
    position:fixed;
    left:50%;
    bottom:14px;
    z-index:10001;
    transform:translateX(-50%);
    opacity:.16;
    transition:opacity .15s;
  }
  #monthly-target-presentation-modal.monthly-presentation-fullscreen .monthly-presentation-dots:hover { opacity:1; }
  #monthly-target-deck-preview-modal .monthly-target-slide {
    min-height:auto !important;
  }
  #monthly-target-deck-preview-modal .monthly-target-slide h2 {
    margin-top:.45rem !important;
    font-size:1.25rem !important;
    line-height:1.18 !important;
  }
  #monthly-target-deck-preview-modal .monthly-target-slide p {
    margin-top:.35rem !important;
    font-size:.72rem !important;
    line-height:1rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-target-slide > .relative.z-10 {
    min-height:0 !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-slide {
    margin-top:.45rem !important;
    min-height:0 !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-graph {
    min-height:0 !important;
    padding:.55rem !important;
    border-radius:16px !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-graph > .relative.z-10 {
    min-height:0 !important;
    gap:.45rem !important;
    grid-template-columns:.78fr 1.22fr !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel {
    min-height:0 !important;
    border-radius:16px !important;
    padding:.65rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .text-\[10px\] {
    font-size:.45rem !important;
    line-height:.62rem !important;
    letter-spacing:.08em !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .text-3xl {
    font-size:1.05rem !important;
    line-height:1.2rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .text-base {
    font-size:.72rem !important;
    line-height:.9rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .text-\[9px\] {
    font-size:.42rem !important;
    line-height:.55rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .h-16.w-16 {
    height:2.1rem !important;
    width:2.1rem !important;
    border-radius:.75rem !important;
    font-size:1rem !important;
    line-height:1rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel > .grid,
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel > .grid > .grid {
    gap:.45rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-ring {
    height:5.9rem !important;
    width:5.9rem !important;
    margin-top:.3rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-ring .text-6xl {
    font-size:1.75rem !important;
    line-height:1.75rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-ring .text-\[10px\] {
    font-size:.42rem !important;
    line-height:.55rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .mt-3 {
    margin-top:.35rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .mt-4 {
    margin-top:.45rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .mt-5 {
    margin-top:.45rem !important;
    gap:.25rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .p-6 {
    padding:.6rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .px-3\.5 {
    padding-left:.45rem !important;
    padding-right:.45rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .py-1\.5 {
    padding-top:.2rem !important;
    padding-bottom:.2rem !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .text-\[11px\] {
    font-size:.45rem !important;
    line-height:.6rem !important;
    letter-spacing:.05em !important;
  }
  #monthly-target-deck-preview-modal .monthly-go-live-focus-panel .rounded-\[24px\] {
    border-radius:16px !important;
  }
  .sidebar { background:#040810; }
  .nav-item { transition:background .15s; }
  .nav-item:hover,.nav-item.active { background:#1e3a5f; }
  .sidebar,
  #app-content-shell,
  #app-global-loading,
  #sync-fail-banner {
    transition:width .18s ease, margin-left .18s ease, max-width .18s ease, left .18s ease;
  }
  @media (min-width: 768px) {
    #sync-fail-banner {
      left:14rem !important;
    }
    body.sidebar-collapsed #sync-fail-banner {
      left:4.25rem !important;
    }
  }
  #sidebar-collapse-icon { transition:transform .18s ease; }
  body.sidebar-collapsed .sidebar {
    width:4.5rem !important;
  }
  body.sidebar-collapsed #app-content-shell {
    margin-left:4.5rem !important;
    max-width:calc(100vw - 4.5rem) !important;
  }
  body.sidebar-collapsed #app-global-loading {
    left:4.5rem;
  }
  body.sidebar-collapsed #app-global-loading-label {
    max-width:min(360px, calc(100vw - 8rem));
  }
  body.sidebar-collapsed #sidebar-brand-row {
    flex-direction:column;
    align-items:center;
    gap:.55rem;
  }
  body.sidebar-collapsed #sidebar-logo-wrap {
    width:42px !important;
    height:42px !important;
    border-radius:10px !important;
  }
  body.sidebar-collapsed #sidebar-title,
  body.sidebar-collapsed #sidebar-subtitle,
  body.sidebar-collapsed #sidebar-version,
  body.sidebar-collapsed #sb-name,
  body.sidebar-collapsed #sb-role,
  body.sidebar-collapsed #sync-status,
  body.sidebar-collapsed #sync-last-saved,
  body.sidebar-collapsed #quick-switch-label,
  body.sidebar-collapsed #quick-switch-mode-badge,
  body.sidebar-collapsed #sa-label {
    display:none !important;
  }
  body.sidebar-collapsed .sidebar > .px-4.py-5,
  body.sidebar-collapsed .sidebar > .px-4.py-3,
  body.sidebar-collapsed .sidebar > .px-4.py-2,
  body.sidebar-collapsed .sidebar > #quick-switch-wrapper,
  body.sidebar-collapsed .sidebar > .mt-auto {
    padding-left:.6rem !important;
    padding-right:.6rem !important;
  }
  body.sidebar-collapsed .sidebar > .px-4.py-2,
  body.sidebar-collapsed .sidebar > .px-4.py-3 button[onclick="doLogout()"] {
    display:none !important;
  }
  body.sidebar-collapsed .sidebar nav {
    padding-left:.5rem !important;
    padding-right:.5rem !important;
  }
  body.sidebar-collapsed .sidebar .nav-item {
    justify-content:center !important;
    gap:0 !important;
    font-size:0 !important;
    padding-left:.6rem !important;
    padding-right:.6rem !important;
  }
  body.sidebar-collapsed .sidebar .nav-item svg,
  body.sidebar-collapsed .sidebar nav button svg,
  body.sidebar-collapsed #quick-switch-btn svg,
  body.sidebar-collapsed #sa-btn svg {
    flex:none;
  }
  body.sidebar-collapsed #proj-mgr-nav-section,
  body.sidebar-collapsed #admin-nav-section {
    padding-left:.5rem !important;
    padding-right:.5rem !important;
  }
  body.sidebar-collapsed #proj-mgr-nav-section > button,
  body.sidebar-collapsed #admin-nav-section > button,
  body.sidebar-collapsed #quick-switch-btn,
  body.sidebar-collapsed #sa-btn {
    justify-content:center !important;
    gap:0 !important;
    font-size:0 !important;
    padding-left:.6rem !important;
    padding-right:.6rem !important;
  }
  body.sidebar-collapsed #proj-mgr-sub,
  body.sidebar-collapsed #admin-sub {
    padding-left:0 !important;
  }
  body.sidebar-collapsed #proj-mgr-chevron,
  body.sidebar-collapsed #admin-chevron {
    display:none !important;
  }
  body.sidebar-collapsed #sidebar-collapse-icon {
    transform:rotate(180deg);
  }
  @media (min-width: 768px) {
    body.sidebar-collapsed .sidebar {
      width:4.25rem !important;
      box-shadow:6px 0 22px rgba(2,6,23,.22);
    }
    body.sidebar-collapsed #app-content-shell {
      margin-left:4.25rem !important;
      max-width:calc(100vw - 4.25rem) !important;
    }
    body.sidebar-collapsed #app-global-loading {
      left:4.25rem;
    }
    body.sidebar-collapsed #sidebar-brand-row {
      gap:.55rem;
    }
    body.sidebar-collapsed #sidebar-logo-wrap {
      width:40px !important;
      height:40px !important;
      border-radius:12px !important;
      background:#0b1324;
      box-shadow:none;
    }
    body.sidebar-collapsed #sidebar-collapse-btn {
      width:40px;
      height:32px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto;
      border-radius:10px;
      background:#0b1324;
      border-color:#1e3050;
      box-shadow:none;
    }
    body.sidebar-collapsed .sidebar nav {
      display:flex;
      flex-direction:column;
      gap:.16rem;
      padding:.55rem .45rem !important;
      overflow-x:visible;
    }
    body.sidebar-collapsed .sidebar .nav-item,
    body.sidebar-collapsed #proj-mgr-nav-section > button,
    body.sidebar-collapsed #admin-nav-section > button,
    body.sidebar-collapsed #quick-switch-btn,
    body.sidebar-collapsed #sa-btn {
      position:relative;
      width:40px !important;
      min-height:40px;
      margin-left:auto;
      margin-right:auto;
      border:1px solid transparent;
      border-radius:10px;
      background:transparent;
      box-shadow:none;
      color:#94a3b8 !important;
      transition:background .14s ease, border-color .14s ease, color .14s ease;
    }
    body.sidebar-collapsed .sidebar .nav-item:hover,
    body.sidebar-collapsed #proj-mgr-nav-section > button:hover,
    body.sidebar-collapsed #admin-nav-section > button:hover,
    body.sidebar-collapsed #quick-switch-btn:hover,
    body.sidebar-collapsed #sa-btn:hover {
      background:rgba(30,58,95,.68);
      border-color:#25405f;
      color:#fff !important;
    }
    body.sidebar-collapsed .sidebar .nav-item.active {
      background:#1e3a5f;
      border-color:#3b82f6;
      color:#fff !important;
      box-shadow:none;
    }
    body.sidebar-collapsed .sidebar .nav-item.active::before {
      content:"";
      position:absolute;
      left:-8px;
      top:50%;
      width:2px;
      height:20px;
      border-radius:999px;
      background:#60a5fa;
      transform:translateY(-50%);
      box-shadow:none;
    }
    body.sidebar-collapsed #proj-mgr-nav-section,
    body.sidebar-collapsed #admin-nav-section {
      margin-top:.2rem;
      padding:.35rem .45rem !important;
      border-top-color:rgba(30,48,80,.75);
    }
    body.sidebar-collapsed #proj-mgr-sub,
    body.sidebar-collapsed #admin-sub {
      margin-top:.25rem !important;
      padding-left:0 !important;
    }
    body.sidebar-collapsed .sidebar > .px-4.py-3 {
      padding:.55rem .5rem !important;
    }
    body.sidebar-collapsed .sidebar > .px-4.py-3 > div[onclick="navigate('profile')"] {
      position:relative;
      justify-content:center;
      width:40px;
      min-height:40px;
      margin:0 auto;
      border:1px solid transparent;
      border-radius:12px;
      background:transparent;
      box-shadow:none;
    }
    body.sidebar-collapsed .sidebar > .px-4.py-3 > div[onclick="navigate('profile')"]:hover {
      border-color:#25405f;
      background:rgba(30,58,95,.68);
    }
    body.sidebar-collapsed #sb-avatar {
      width:32px !important;
      height:32px !important;
      box-shadow:none;
    }
    body.sidebar-collapsed .sidebar > #quick-switch-wrapper,
    body.sidebar-collapsed .sidebar > .mt-auto {
      padding:.45rem .5rem !important;
    }
    body.sidebar-collapsed #quick-switch-btn {
      color:#fbbf24;
      border-color:transparent;
      background:transparent;
    }
    body.sidebar-collapsed #sa-btn {
      border-color:transparent;
      background:transparent;
      color:#f59e0b !important;
    }
  }
  .page { display:none; }
  .page.active { display:block; }
  #pages-wrap.pages-loading { cursor:wait; }
  #pages-wrap.pages-loading > .page { visibility:hidden; pointer-events:none; }
  #app-global-loading { position:fixed; top:0; left:14rem; right:0; z-index:95; height:3px; opacity:0; pointer-events:none; transition:opacity .16s ease; }
  #app-global-loading.active { opacity:1; }
  .app-global-loading-track { position:absolute; inset:0; overflow:hidden; background:rgba(15,23,42,.08); }
  .app-global-loading-bar { position:absolute; top:0; bottom:0; left:-38%; width:38%; border-radius:999px; background:linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,.92), rgba(99,102,241,.92), rgba(59,130,246,0)); animation:appGlobalLoadingSlide 1.05s ease-in-out infinite; }
  #app-global-loading-label { position:fixed; top:10px; right:18px; z-index:96; display:none; max-width:min(360px, calc(100vw - 18rem)); border:1px solid rgba(59,130,246,.18); border-radius:999px; background:rgba(255,255,255,.94); color:#1e3a8a; box-shadow:0 10px 25px rgba(15,23,42,.12); padding:5px 10px; font-size:11px; font-weight:800; line-height:1; pointer-events:none; }
  #app-global-loading-label.active { display:flex; align-items:center; gap:7px; }
  #app-global-loading-label .app-global-loading-dot { width:6px; height:6px; border-radius:999px; background:#2563eb; animation:appGlobalLoadingPulse .85s ease-in-out infinite; }
  #app-data-status-badge { position:relative; z-index:4; display:none; min-width:220px; max-width:min(320px, 36vw); border:1px solid rgba(148,163,184,.24); border-radius:999px; background:rgba(15,23,42,.94); color:#e2e8f0; box-shadow:0 10px 24px rgba(15,23,42,.18); backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:opacity .18s ease, border-color .18s ease, box-shadow .18s ease; }
  #app-data-status-badge.active { display:block; opacity:1; pointer-events:auto; }
  #app-data-status-badge:focus { outline:2px solid rgba(96,165,250,.35); outline-offset:2px; }
  #app-data-status-badge.is-ready { border-color:rgba(34,197,94,.35); }
  #app-data-status-badge.is-fetching { border-color:rgba(59,130,246,.45); }
  #app-data-status-badge.is-saving { border-color:rgba(245,158,11,.45); }
  #app-data-status-badge.is-stale { border-color:rgba(251,191,36,.50); }
  #app-data-status-badge.is-error { border-color:rgba(248,113,113,.55); }
  .app-data-status-shell { padding:7px 10px 6px 11px; }
  .app-data-status-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .app-data-status-title { display:flex; align-items:center; min-width:0; gap:8px; font-size:11px; font-weight:900; line-height:1; }
  .app-data-status-title span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-data-status-dot { width:8px; height:8px; flex:none; border-radius:999px; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.14); }
  #app-data-status-badge.is-fetching .app-data-status-dot { background:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.14); animation:appGlobalLoadingPulse .85s ease-in-out infinite; }
  #app-data-status-badge.is-saving .app-data-status-dot,
  #app-data-status-badge.is-stale .app-data-status-dot { background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.16); }
  #app-data-status-badge.is-error .app-data-status-dot { background:#f87171; box-shadow:0 0 0 4px rgba(248,113,113,.15); }
  .app-data-status-count { flex:none; border-radius:999px; background:rgba(148,163,184,.14); color:#cbd5e1; padding:2px 7px; font-size:10px; font-weight:900; line-height:1.15; }
  .app-data-status-detail { display:none; position:absolute; top:calc(100% + 8px); right:0; width:min(320px, calc(100vw - 24px)); border:1px solid rgba(148,163,184,.22); border-radius:10px; background:rgba(15,23,42,.96); color:#cbd5e1; box-shadow:0 18px 34px rgba(15,23,42,.24); padding:9px 10px; font-size:11px; line-height:1.35; }
  #app-data-status-badge:hover .app-data-status-detail,
  #app-data-status-badge:focus-within .app-data-status-detail,
  #app-data-status-badge:focus .app-data-status-detail { display:block; }
  .app-data-status-progress { margin-top:5px; height:3px; overflow:hidden; border-radius:999px; background:rgba(51,65,85,.9); }
  .app-data-status-progress > span { display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#60a5fa,#818cf8); transition:width .2s ease; }
  @keyframes appGlobalLoadingSlide { 0% { transform:translateX(0); } 58%, 100% { transform:translateX(365%); } }
  @keyframes appGlobalLoadingPulse { 0%, 100% { opacity:.35; transform:scale(.85); } 50% { opacity:1; transform:scale(1.1); } }
  @media (max-width: 900px) {
    #app-global-loading { left:0; }
    #app-global-loading-label { right:10px; max-width:calc(100vw - 20px); }
    #app-data-status-badge { min-width:0; max-width:min(260px, 48vw); }
    .app-data-status-count { display:none; }
    .app-data-status-detail { right:0; }
  }
  .page-sync-overlay { position:fixed; top:49px; right:0; bottom:0; left:14rem; z-index:19; display:none; overflow:hidden; background:#080d1a; padding:24px; }
  .page-sync-overlay.active { display:block; }
  body.sidebar-collapsed .page-sync-overlay { left:4.25rem; }
  .page-skeleton { width:100%; max-width:1600px; margin:0 auto; }
  .page-skeleton-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
  .page-skeleton-label { flex:none; min-width:150px; border:1px solid #1e3050; border-radius:999px; background:#0f172a; color:#94a3b8; padding:8px 12px; font-size:11px; font-weight:800; text-align:center; }
  .page-skeleton-line,
  .page-skeleton-card span,
  .page-skeleton-card strong,
  .page-skeleton-card em,
  .page-skeleton-row,
  .page-skeleton-chart { display:block; border-radius:7px; background:linear-gradient(100deg,#111d31 20%,#1d304d 42%,#111d31 64%); background-size:240% 100%; animation:pageSkeletonShimmer 1.25s ease-in-out infinite; }
  .page-skeleton-title { width:230px; height:24px; }
  .page-skeleton-subtitle { width:330px; max-width:56vw; height:11px; margin-top:10px; }
  .page-skeleton-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
  .page-skeleton-card { min-height:118px; border:1px solid #172640; border-radius:10px; background:#0b1425; padding:18px; }
  .page-skeleton-card span { width:42%; height:9px; }
  .page-skeleton-card strong { width:58%; height:25px; margin-top:18px; }
  .page-skeleton-card em { width:76%; height:8px; margin-top:14px; }
  .page-skeleton-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr); gap:18px; }
  .page-skeleton-panel { min-height:310px; border:1px solid #172640; border-radius:10px; background:#0b1425; padding:20px; }
  .page-skeleton-panel-title { width:34%; height:14px; margin-bottom:22px; }
  .page-skeleton-row { width:100%; height:42px; margin-top:11px; }
  .page-skeleton-row-short { width:72%; }
  .page-skeleton-chart { width:180px; height:180px; margin:18px auto 20px; border-radius:50%; }
  .page-skeleton-chart-caption { width:64%; height:9px; margin:0 auto; }
  @keyframes pageSkeletonShimmer { 0% { background-position:100% 0; } 100% { background-position:-120% 0; } }
  @media (max-width:900px) {
    .page-sync-overlay { padding:16px; }
    .page-skeleton-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .page-skeleton-grid { grid-template-columns:1fr; }
    .page-skeleton-panel { min-height:230px; }
    .page-skeleton-grid .page-skeleton-panel:last-child { display:none; }
  }
  @media (max-width:767px) {
    .page-sync-overlay,
    body.sidebar-collapsed .page-sync-overlay { left:0; }
  }
  @media (max-width:560px) {
    .page-skeleton-head { display:block; }
    .page-skeleton-label { width:max-content; min-width:0; margin-top:14px; }
    .page-skeleton-stats { gap:10px; }
    .page-skeleton-card { min-height:92px; padding:14px; }
  }
  @media (prefers-reduced-motion:reduce) {
    .page-skeleton-line,
    .page-skeleton-card span,
    .page-skeleton-card strong,
    .page-skeleton-card em,
    .page-skeleton-row,
    .page-skeleton-chart { animation:none; }
  }
  @keyframes ptPulseBorder {
    0%, 100% { border-color:#ef4444; box-shadow:0 0 0 1px rgba(239,68,68,.30), 0 0 0 0 rgba(239,68,68,.18); }
    50% { border-color:#fca5a5; box-shadow:0 0 0 1px rgba(239,68,68,.45), 0 0 0 4px rgba(239,68,68,.10); }
  }
  @keyframes ptPulseBadge {
    0%, 100% { box-shadow:0 0 0 1px rgba(239,68,68,.35), 0 0 0 0 rgba(239,68,68,.22); }
    50% { box-shadow:0 0 0 1px rgba(248,113,113,.65), 0 0 0 4px rgba(239,68,68,.14); }
  }
  .pt-pulse-border { animation:ptPulseBorder 1.15s ease-in-out infinite; }
  .pt-pulse-badge { background:#7f1d1d; color:#fecaca; border:1px solid #ef4444; animation:ptPulseBadge 1.15s ease-in-out infinite; }
  /* ── Badges — bold + pop ───────────────────────────────────────────── */
  .badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:9999px; }
  .badge-on-track   { background:#16a34a; color:#fff; }
  .badge-at-risk    { background:#d97706; color:#fff; }
  .badge-delayed    { background:#dc2626; color:#fff; }
  .badge-completed  { background:#2563eb; color:#fff; }
  .badge-done       { background:#16a34a; color:#fff; }
  .badge-progress   { background:#d97706; color:#fff; }
  .badge-todo       { background:#334155; color:#94a3b8; }
  .badge-on-hold    { background:#7c3aed; color:#fff; }
  .badge-terminated { background:#be123c; color:#fff; }
  .badge-archived   { background:#475569; color:#e2e8f0; }
  .badge-live       { background:#059669; color:#fff; }
  .badge-db-current { background:#16a34a; color:#fff; }
  .badge-db-backup  { background:#2563eb; color:#fff; }
  .badge-db-old     { background:#475569; color:#e2e8f0; }
  .badge-db-deleted { background:#dc2626; color:#fff; text-decoration:line-through; }
  /* ────────────────────────────────────────────────────────────────────── */
  .status-btn { cursor:pointer; transition:opacity .15s; }
  .status-btn:hover { opacity:.8; }
  .progress-bar { height:6px; border-radius:3px; background:#1e3050; overflow:hidden; }
  .sidebar nav::-webkit-scrollbar { width:4px; }
  .sidebar nav::-webkit-scrollbar-track { background:transparent; }
  .sidebar nav::-webkit-scrollbar-thumb { background:#1e3050; border-radius:2px; }
  .sidebar nav::-webkit-scrollbar-thumb:hover { background:#2a4268; }
  .progress-fill { height:100%; border-radius:3px; transition:width .3s; }
  .avatar { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; margin-right:-6px; border:2px solid #141d2e; }
  .card { background:#141d2e; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.5); }
  #health-summary { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .gantt-bar { height:20px; border-radius:4px; position:absolute; top:50%; transform:translateY(-50%); min-width:4px; }
  .gantt-row { position:relative; height:36px; border-bottom:1px solid #1e3050; }
  .tab-btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; transition:background .15s; color:#64748b; }
  .tab-btn.active { background:#3b82f6; color:#fff; }
  input, select, textarea { outline:none; background:#0f172a; color:#e2e8f0; border-color:#253555; }
  input:focus, select:focus, textarea:focus { border-color:#3b82f6; }
  input::placeholder, textarea::placeholder { color:#475569; }
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:50; align-items:center; justify-content:center; }
  .modal-overlay.open { display:flex; }
  body.chronos-authenticated > #standup-project-update-modal.open {
    display:flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .needs-card { transition:opacity .15s, box-shadow .15s; }
  .needs-card.dragging { opacity:.4; }
  .needs-card.drag-over { box-shadow:0 0 0 2px #3b82f6, 0 4px 12px rgba(59,130,246,.3); }
  .drag-handle { cursor:grab; }
  .drag-handle:active { cursor:grabbing; }
  .color-swatch { width:24px; height:24px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:border-color .1s; }
  .color-swatch.selected { border-color:#3b82f6; }
  .mod-picker-dropdown { box-shadow:0 8px 24px rgba(0,0,0,.5); }
  @media (max-width:1100px) { #health-summary { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
  @media (max-width:640px) { #health-summary { grid-template-columns:1fr !important; } }
  /* ── Dark surface overrides for Tailwind utilities ─────────────────── */
  .bg-white  { background-color:#141d2e !important; }
  .bg-slate-50  { background-color:#0f172a !important; }
  .bg-slate-100 { background-color:#1a2640 !important; }
  .bg-slate-200 { background-color:#253555 !important; }
  .text-slate-900,.text-slate-800 { color:#f1f5f9 !important; }
  .text-slate-700 { color:#e2e8f0 !important; }
  .text-slate-600 { color:#cbd5e1 !important; }
  .text-slate-500 { color:#94a3b8 !important; }
  .border-slate-50,.border-slate-100 { border-color:#1e3050 !important; }
  .border-slate-200,.border-slate-300 { border-color:#253555 !important; }
  .hover\:bg-slate-50:hover,.hover\:bg-slate-100:hover { background-color:#1e3050 !important; }
  .hover\:bg-blue-100:hover  { background-color:#1e3a6f !important; }
  .hover\:text-blue-700:hover { color:#93c5fd !important; }
  .text-blue-600 { color:#60a5fa !important; }
  .text-blue-500 { color:#60a5fa !important; }
  /* Overdue / late text — keep it bright red */
  .text-red-500 { color:#f87171 !important; }
  .text-red-400 { color:#f87171 !important; }
  /* ── Login ── */
  #login-page { position:fixed; inset:0; z-index:9999; background:linear-gradient(135deg,#040810 0%,#0d1b35 100%); display:flex; align-items:center; justify-content:center; }
  #login-page,.login-card,#local-login-form { font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
  .login-card { background:#fff; border-radius:16px; padding:36px 40px; width:100%; max-width:400px; box-shadow:0 25px 60px rgba(0,0,0,.5); }
  #local-login-form { display:flex;flex-direction:column;gap:10px;margin-bottom:12px;min-width:0; }
  .login-field-label { color:#64748b;font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.35;text-transform:uppercase; }
  .login-password-field { display:flex;flex-direction:column;gap:10px; }
  .login-password-row { display:flex;gap:8px; }
  .login-input { width:100%; border:1.5px solid #e2e8f0; border-radius:8px; padding:10px 14px; font-size:13px; color:#1e293b !important; background-color:#ffffff !important; outline:none; transition:border .15s; box-sizing:border-box; color-scheme:light; }
  .login-password-input { flex:1; min-width:0; }
  .login-input:focus { border-color:#0055c4;box-shadow:0 0 0 3px rgba(0,85,196,.12); }
  .login-password-toggle { border:1px solid #cbd5e1;border-radius:8px;padding:0 10px;background:#fff;color:#475569;font-size:11px;font-weight:800;cursor:pointer; }
  .login-btn { width:100%; background:#1e3a5f; color:#fff; border:none; border-radius:8px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s; }
  .login-btn:hover { background:#2563eb; }
  .login-btn:disabled { background:#94a3b8; cursor:not-allowed; }
  .login-sso-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:#0f172a; color:#fff; border:1px solid #1e293b; border-radius:8px; padding:11px; font-size:14px; font-weight:800; text-decoration:none; transition:background .15s,border-color .15s; box-sizing:border-box; }
  .login-sso-btn:hover { background:#1d4ed8; border-color:#2563eb; }
  .login-divider { display:flex; align-items:center; gap:10px; margin:16px 0; color:#94a3b8; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
  .login-divider::before, .login-divider::after { content:""; flex:1; height:1px; background:#e2e8f0; }
  .login-input:-webkit-autofill, .login-input:-webkit-autofill:hover, .login-input:-webkit-autofill:focus { -webkit-text-fill-color:#1e293b; -webkit-box-shadow:0 0 0px 1000px #fff inset; transition:background-color 5000s ease-in-out 0s; }
  /* Dark-styled inputs throughout the main app */
  #main-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  #main-app select,
  #main-app textarea {
    background-color:#1e293b !important;
    color:#e2e8f0 !important;
    border-color:#334155 !important;
    color-scheme:dark;
  }
  #main-app input::placeholder, #main-app textarea::placeholder { color:#475569 !important; }
  /* Dark-themed modals — consistent with app dark aesthetic */
  .modal-overlay > div { background-color:#0d1b35 !important; color:#e2e8f0 !important; color-scheme:dark; }
  /* Text colours inside modals */
  .modal-overlay .text-slate-800, .modal-overlay .text-slate-700 { color:#e2e8f0 !important; }
  .modal-overlay .text-slate-600 { color:#cbd5e1 !important; }
  .modal-overlay .text-slate-500 { color:#94a3b8 !important; }
  .modal-overlay .text-slate-400 { color:#64748b !important; }
  .modal-overlay label { color:#94a3b8 !important; }
  /* Borders inside modals */
  .modal-overlay .border-slate-100, .modal-overlay .border-slate-200 { border-color:#1e3050 !important; }
  .modal-overlay .border-t { border-top-color:#1e3050 !important; }
  /* Inputs inside modals — dark styled */
  .modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .modal-overlay select,
  .modal-overlay textarea {
    background-color:#1e293b !important;
    border-color:#334155 !important;
    color:#e2e8f0 !important;
    color-scheme:dark;
  }
  .modal-overlay input::placeholder, .modal-overlay textarea::placeholder { color:#475569 !important; }
  /* Hover/focus states */
  .modal-overlay .hover\:bg-slate-50:hover { background-color:#1e3050 !important; }
  .modal-overlay .bg-slate-50 { background-color:#1a2d4a !important; }
  .modal-overlay .bg-slate-100 { background-color:#1e3050 !important; }
  /* Cancel/close buttons */
  .modal-overlay .border-slate-200.text-slate-600 { border-color:#334155 !important; color:#94a3b8 !important; }
  /* Sub-section dividers */
  .modal-overlay .pt-4.border-t, .modal-overlay .mt-4.border-t { border-top-color:#1e3050 !important; }
  /* Error text stays red, success green */
  .modal-overlay .text-red-400, .modal-overlay .text-red-500 { color:#f87171 !important; }
  .modal-overlay .text-emerald-600 { color:#34d399 !important; }
  .sidebar-nav-submenu {
    transform-origin:top;
    transition:height 240ms cubic-bezier(.22,1,.36,1), opacity 180ms ease-out, transform 240ms cubic-bezier(.22,1,.36,1);
    will-change:height, opacity, transform;
  }
  .sidebar-nav-chevron {
    transform-origin:center;
    transition:transform 240ms cubic-bezier(.22,1,.36,1);
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar-nav-submenu,
    .sidebar-nav-chevron {
      transition:none !important;
    }
  }
  @media (max-width: 767px) {
    html, body { width:100%; min-width:0; overflow-x:hidden; }
    body { display:block; }
    #main-app { flex-direction:column; min-width:0; }
    #sync-fail-banner { left:0; right:0; align-items:flex-start; padding:10px 12px; font-size:12px; flex-direction:column; }
    .sidebar {
      position:relative !important;
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;
      border-bottom:1px solid #1e3050;
    }
    .sidebar > .px-4.py-5 { padding:12px 14px !important; }
    .sidebar > .px-4.py-5 .w-14.h-14 { width:44px !important; height:44px !important; border-radius:10px !important; }
    body.sidebar-collapsed .sidebar { width:100% !important; }
    body.sidebar-collapsed .sidebar > .px-4.py-2 {
      display:flex !important;
    }
    body.sidebar-collapsed .sidebar > .px-4.py-3 button[onclick="doLogout()"] {
      display:block !important;
    }
    body.sidebar-collapsed #sidebar-brand-row {
      flex-direction:row;
      align-items:flex-start;
      gap:.75rem;
    }
    body.sidebar-collapsed #sidebar-title,
    body.sidebar-collapsed #sidebar-subtitle,
    body.sidebar-collapsed #sidebar-version,
    body.sidebar-collapsed #sb-name,
    body.sidebar-collapsed #sb-role,
    body.sidebar-collapsed #sync-status,
    body.sidebar-collapsed #sync-last-saved,
    body.sidebar-collapsed #quick-switch-label,
    body.sidebar-collapsed #quick-switch-mode-badge,
    body.sidebar-collapsed #sa-label {
      display:block !important;
    }
    .sidebar nav {
      display:flex;
      gap:8px;
      padding:10px 12px !important;
      overflow-x:auto;
      overflow-y:hidden;
      white-space:nowrap;
      border-top:1px solid #0f172a;
      scrollbar-width:thin;
    }
    .sidebar nav .nav-item,
    .sidebar nav button {
      flex:0 0 auto;
      min-height:38px;
    }
    .sidebar nav .nav-item {
      gap:8px !important;
      padding:8px 10px !important;
      font-size:12px !important;
      border:1px solid #1e3050;
      background:#0b1324;
    }
    body.sidebar-collapsed .sidebar .nav-item,
    body.sidebar-collapsed .sidebar nav button,
    body.sidebar-collapsed #quick-switch-btn,
    body.sidebar-collapsed #sa-btn {
      justify-content:flex-start !important;
      gap:8px !important;
      font-size:12px !important;
    }
    .sidebar nav .nav-item.active { border-color:#3b82f6; background:#1e3a5f; }
    #main-nav-section,
    #proj-mgr-nav-section,
    #admin-nav-section,
    #pc-project-nav-section {
      flex:0 0 auto;
      margin:0 !important;
      padding:0 !important;
      border:0 !important;
    }
    #main-nav-section > button,
    #proj-mgr-nav-section > button,
    #admin-nav-section > button {
      min-height:38px;
      border:1px solid #1e3050;
      background:#0b1324;
    }
    #main-nav-sub {
      display:flex;
      gap:8px;
      margin:0 !important;
      padding:0 !important;
    }
    #main-nav-sub.hidden { display:none !important; }
    #proj-mgr-sub,
    #admin-sub {
      position:absolute;
      left:12px;
      right:12px;
      top:100%;
      z-index:70;
      max-height:50vh;
      overflow:auto;
      padding:8px !important;
      border:1px solid #1e3050;
      border-radius:12px;
      background:#040810;
      box-shadow:0 18px 50px rgba(0,0,0,.55);
    }
    .sidebar > .px-4.py-3,
    .sidebar > .px-4.py-2,
    .sidebar > #quick-switch-wrapper,
    .sidebar > .mt-auto {
      padding:10px 14px !important;
    }
    #app-content-shell {
      margin-left:0 !important;
      width:100% !important;
      max-width:100vw !important;
      min-width:0 !important;
    }
    body.sidebar-collapsed #app-content-shell {
      margin-left:0 !important;
      max-width:100vw !important;
    }
    #app-content-shell > .sticky {
      padding:10px 14px !important;
      gap:10px;
      align-items:flex-start;
    }
    #page-title {
      max-width:58vw;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:13px !important;
    }
    #app-content-shell > .sticky .flex.items-center.gap-3 {
      gap:8px !important;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    #pages-wrap {
      padding:14px !important;
      min-width:0 !important;
      overflow-x:hidden !important;
    }
    .page.active { min-width:0; }
    .card { border-radius:10px; }
    #page-dashboard .grid.grid-cols-4,
    #page-dashboard .grid.grid-cols-5,
    #page-gantt .grid.grid-cols-6,
    #page-calendar .grid.grid-cols-5,
    #page-consultants .grid.grid-cols-3,
    #page-needs .grid.grid-cols-3,
    #page-config .grid.grid-cols-2,
    #page-config .grid.grid-cols-3,
    #page-config .grid.grid-cols-5,
    #page-profile .grid.grid-cols-2,
    #page-profile .grid.grid-cols-3,
    #page-mmr .grid.grid-cols-2,
    #page-mmr .grid.grid-cols-3,
    #page-mmr .grid.grid-cols-5 {
      grid-template-columns:minmax(0,1fr) !important;
    }
    #consultant-columns,
    #consultants-grid,
    #needs-grid,
    #training-menu-cards {
      display:flex !important;
      overflow-x:auto;
      gap:12px !important;
      padding-bottom:8px;
      scroll-snap-type:x proximity;
    }
    #consultant-columns > *,
    #consultants-grid > *,
    #needs-grid > *,
    #training-menu-cards > * {
      min-width:min(320px,86vw);
      scroll-snap-align:start;
    }
    #dash-charts-row {
      height:auto !important;
      min-height:0 !important;
    }
    #dash-charts-row > .card {
      height:auto !important;
      min-height:0 !important;
      overflow:visible !important;
    }
    #cons-load-list {
      overflow:visible !important;
      min-height:0 !important;
    }
    #cons-load-list > div {
      flex-direction:column !important;
      gap:5px !important;
    }
    #cons-load-list > div > div[style*="width:1px"] {
      display:none !important;
    }
    #cons-load-list > div > div[style*="flex-direction:column"] {
      flex:none !important;
      width:100% !important;
      gap:5px !important;
    }
    #cons-load-list > div > div > div {
      grid-template-columns:54px minmax(76px,1fr) 34px 30px !important;
      gap:4px !important;
    }
    #cons-load-list span {
      min-width:0 !important;
    }
    #page-dashboard > div:first-child {
      flex-direction:column !important;
      align-items:stretch !important;
      justify-content:flex-start !important;
      gap:8px !important;
      margin-bottom:14px !important;
    }
    #page-dashboard > div:first-child > div:first-child {
      width:100% !important;
      flex-wrap:wrap !important;
      align-items:flex-start !important;
      gap:8px !important;
    }
    #page-dashboard > div:first-child > div:last-child {
      width:100% !important;
      line-height:1.35 !important;
    }
    #dash-pmt-sync-status {
      max-width:100% !important;
      white-space:normal !important;
      line-height:1.3 !important;
    }
    #page-dashboard select,
    #page-dashboard button,
    #page-gantt select,
    #page-calendar select,
    #page-training input,
    #page-training select,
    #page-needs input,
    #page-standup select,
    #page-standup input,
    #page-config input,
    #page-config select,
    #page-profile input,
    #page-profile select {
      max-width:100%;
    }
    table { max-width:none; }
    .overflow-x-auto { -webkit-overflow-scrolling:touch; }
    .modal-overlay {
      align-items:flex-start !important;
      justify-content:center !important;
      padding:12px !important;
      overflow-y:auto;
    }
    .modal-overlay > div,
    .modal-box {
      width:100% !important;
      max-width:calc(100vw - 24px) !important;
      max-height:calc(100dvh - 24px) !important;
      margin:0 !important;
      overflow:auto;
    }
    #cloud-diagnostics-modal > div {
      width:100% !important;
      max-width:calc(100vw - 24px) !important;
    }
    #cloud-diagnostics-modal [style*="grid-template-columns"] {
      grid-template-columns:minmax(0,1fr) !important;
    }
  }