#ov {
      display: none !important
    }

    #ov:not(.hidden) .ov-card {
      max-width: 97vw !important;
      width: 97vw !important;
      height: 92vh !important;
      max-height: 92vh !important;
      padding: 0 !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      background: #00091a !important;
      border: 1px solid rgba(59, 130, 246, .18) !important;
      box-shadow: 0 40px 100px rgba(0, 0, 0, .95) !important;
      display: flex !important;
      flex-direction: column !important;
    }

    #ov-sub,
    #os1,
    #os2,
    #os3,
    #os4,
    #os5,
    #os6,
    #os7,
    #os8,
    #v9-ovprog {
      display: none !important
    }

    .lgb {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      background: #00091a;
      position: relative;
      overflow: hidden;
      font-family: 'DM Sans', system-ui, sans-serif;
    }

    .lgb::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 60;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .016) 2px, rgba(0, 0, 0, .016) 4px);
    }

    /* TOP */
    .lgb-top {
      height: 50px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
      background: rgba(0, 4, 16, .99);
      border-bottom: 1px solid rgba(59, 130, 246, .08);
      z-index: 20;
      position: relative;
    }

    .lgb-top::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 20px;
      right: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .25), transparent);
    }

    .lgb-brand {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .lgb-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: linear-gradient(135deg, #1a56db, #0891b2);
      display: grid;
      place-items: center;
      font-size: 15px;
      box-shadow: 0 0 14px rgba(59, 130, 246, .28);
      flex-shrink: 0;
    }

    .lgb-title {
      font-family: 'Syne', sans-serif;
      font-size: 13px;
      font-weight: 800;
      color: #dbeafe;
    }

    .lgb-ver {
      font-size: 9px;
      color: #0e1e30;
      text-transform: uppercase;
      letter-spacing: .9px;
      margin-top: 1px;
    }

    .lgb-live {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(34, 197, 94, .05);
      border: 1px solid rgba(34, 197, 94, .16);
    }

    .lgb-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 7px #22c55e;
      animation: lgb-pulse 1.1s ease infinite;
    }

    @keyframes lgb-pulse {

      0%,
      100% {
        opacity: 1;
        box-shadow: 0 0 7px #22c55e
      }

      50% {
        opacity: .15;
        box-shadow: none
      }
    }

    .lgb-live-lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      color: #22c55e;
    }

    .lgb-kpis {
      display: flex;
      gap: 4px;
      margin-left: auto;
    }

    .lgb-kpi {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(2, 5, 18, .8);
      border: 1px solid rgba(22, 45, 90, .14);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      transition: border-color .4s;
    }

    .lgb-kpi.lit {
      border-color: rgba(59, 130, 246, .24);
    }

    .lgb-kpi .lk {
      color: #081420;
    }

    .lgb-kpi .lv {
      color: #163450;
      font-weight: 800;
      transition: color .4s;
    }

    .lgb-kpi.lit .lv {
      color: #7dd3fc;
    }

    .lgb-kpi.crit .lv {
      color: #f87171;
    }

    /* STATUS */
    .lgb-status {
      height: 24px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 18px;
      background: rgba(0, 2, 10, .97);
      border-bottom: 1px solid rgba(14, 36, 72, .09);
      z-index: 20;
    }

    .lgb-phase {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(59, 130, 246, .05);
      border: 1px solid rgba(59, 130, 246, .09);
      color: #142640;
      transition: all .4s;
    }

    .lgb-phase.on {
      color: #60a5fa;
      background: rgba(59, 130, 246, .1);
      border-color: rgba(59, 130, 246, .26);
    }

    .lgb-msg {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      color: #081420;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lgb-msg b {
      color: #163450;
    }

    /* GANTT */
    .lgb-gantt {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .lgb-mhdr {
      height: 28px;
      flex-shrink: 0;
      display: flex;
      background: rgba(0, 2, 12, .99);
      border-bottom: 1px solid rgba(59, 130, 246, .06);
      z-index: 10;
    }

    .lgb-mhdr-left {
      width: 300px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-size: 7.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #04101e;
      border-right: 1px solid rgba(59, 130, 246, .04);
    }

    .lgb-mhdr-right {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    .lgb-month {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 7.5px;
      font-weight: 800;
      text-transform: uppercase;
      color: #03090f;
      border-right: 1px solid rgba(255, 255, 255, .006);
      opacity: 0;
      transition: opacity .3s ease, color .4s;
    }

    .lgb-month.show {
      opacity: 1;
    }

    .lgb-month.on {
      color: #12304e;
      background: rgba(59, 130, 246, .028);
    }

    .lgb-rows-wrap {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      scrollbar-width: thin;
      scrollbar-color: rgba(59, 130, 246, .1) transparent;
    }

    .lgb-rows-wrap::-webkit-scrollbar {
      width: 3px;
    }

    .lgb-rows-wrap::-webkit-scrollbar-thumb {
      background: rgba(59, 130, 246, .12);
      border-radius: 2px;
    }

    /* scan beam */
    .lgb-scan {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 300px;
      right: 0;
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
    }

    .lgb-scan::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 110px;
      background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .018), transparent);
      animation: lgb-scanmv 7s linear infinite;
    }

    @keyframes lgb-scanmv {
      from {
        left: -110px
      }

      to {
        left: 100%
      }
    }

    /* ─────────────────────────────────────────────
   ROW — starts invisible, JS fades it in
───────────────────────────────────────────── */
    .lgb-row {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, .01);
      /* invisible; opacity set to 1 by JS when it is time */
      opacity: 0;
    }

    /* WBS levels */
    .lgb-wl0 {
      min-height: 44px;
      background: linear-gradient(90deg, rgba(5, 16, 46, .97), rgba(2, 10, 30, .93));
      border-left: 3px solid #3b82f6;
    }

    .lgb-wl1 {
      min-height: 37px;
      background: linear-gradient(90deg, rgba(1, 10, 24, .94), rgba(0, 7, 16, .9));
      border-left: 3px solid #06b6d4;
    }

    .lgb-wl2 {
      min-height: 31px;
      background: linear-gradient(90deg, rgba(4, 2, 22, .9), rgba(2, 1, 14, .86));
      border-left: 3px solid #818cf8;
    }

    .lgb-wl3,
    .lgb-wl4 {
      min-height: 27px;
      background: rgba(1, 0, 10, .8);
      border-left: 3px solid #a5b4fc;
    }

    .lgb-act {
      min-height: 26px;
      background: rgba(0, 0, 6, .58);
      border-left: 2px solid transparent;
    }

    .lgb-crit {
      min-height: 26px;
      background: rgba(4, 0, 0, .65);
      border-left: 2px solid rgba(239, 68, 68, .4);
    }

    .lgb-lc {
      width: 300px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding: 0 10px;
      border-right: 1px solid rgba(59, 130, 246, .04);
      overflow: hidden;
    }

    .lgb-indent {
      flex-shrink: 0;
    }

    .lgb-lbl {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .lgb-wl0 .lgb-lbl {
      font-size: 12.5px;
      font-weight: 800;
      color: #dbeafe;
    }

    .lgb-wl1 .lgb-lbl {
      font-size: 12px;
      font-weight: 700;
      color: #cffafe;
    }

    .lgb-wl2 .lgb-lbl {
      font-size: 11.5px;
      font-weight: 700;
      color: #e0e7ff;
    }

    .lgb-wl3 .lgb-lbl,
    .lgb-wl4 .lgb-lbl {
      font-size: 11px;
      font-weight: 600;
      color: #c7d2fe;
    }

    .lgb-act .lgb-lbl {
      font-size: 11px;
      font-weight: 400;
      color: #14283a;
    }

    .lgb-crit .lgb-lbl {
      font-size: 11px;
      font-weight: 500;
      color: #fca5a5;
    }

    .lgb-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7.5px;
      color: #061018;
      flex-shrink: 0;
      padding: 0 3px;
    }

    .lgb-rc {
      flex: 1;
      position: relative;
      overflow: hidden;
      min-height: inherit;
    }

    .lgb-gl {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(255, 255, 255, .009);
      pointer-events: none;
    }

    .lgb-gl.maj {
      background: rgba(59, 130, 246, .028);
    }

    /* ─────────────────────────────────────────────
   WBS SUMMARY BAR
   Appears with the row, width pre-set at placeholder.
   After CPM → width/left transition to real values.
───────────────────────────────────────────── */
    .lgb-sbar {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 6px;
      border-radius: 1px;
      left: 0;
      width: 0;
      background: rgba(255, 255, 255, .48);
      /* no transition by default — set by JS when needed */
    }

    .lgb-sbar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--sc, #3b82f6);
    }

    /* ─────────────────────────────────────────────
   ACTIVITY BAR
   Drawn with a glowing right-edge tip.
   width animates from 0 → target when row appears.
   After CPM → left+width transition to real values.
───────────────────────────────────────────── */
    .lgb-bar {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 14px;
      border-radius: 3px;
      left: 0;
      width: 0;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .lgb-bar::after {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 36%;
      background: rgba(255, 255, 255, .09);
      border-radius: 3px 3px 0 0;
    }

    /* neon drawing tip */
    .lgb-bar::before {
      content: '';
      position: absolute;
      top: 0;
      right: -1px;
      bottom: 0;
      width: 3px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 0 8px 2px currentColor, 0 0 14px 4px rgba(255, 255, 255, .18);
      border-radius: 0 3px 3px 0;
      opacity: 0;
    }

    .lgb-bar.drawing::before {
      opacity: 1;
    }

    .lgb-bar.drawn::before {
      opacity: 0;
      transition: opacity .15s .02s;
    }

    .lgb-bar-lbl {
      font-size: 8px;
      font-weight: 700;
      color: rgba(255, 255, 255, .84);
      padding: 0 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      z-index: 1;
      opacity: 0;
      transition: opacity .18s .12s;
    }

    .lgb-bar.drawn .lgb-bar-lbl {
      opacity: 1;
    }

    .lgb-bar.crit-glow {
      animation: lgb-cglow 2.3s ease infinite;
    }

    @keyframes lgb-cglow {

      0%,
      100% {
        box-shadow: 0 0 5px rgba(239, 68, 68, .18)
      }

      50% {
        box-shadow: 0 0 16px rgba(239, 68, 68, .55)
      }
    }

    /* ARROWS */
    .lgb-arrows {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 6;
      overflow: visible;
    }

    .lgb-arrow {
      fill: none;
      stroke-width: 1.5;
    }

    .lgb-arrow.fs {
      stroke: rgba(6, 182, 212, .48);
    }

    .lgb-arrow.ss {
      stroke: rgba(34, 197, 94, .44);
    }

    .lgb-arrow.ff {
      stroke: rgba(139, 92, 246, .44);
    }

    /* SKELETON */
    .lgb-skel {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, .008);
      opacity: 0;
      transition: opacity .22s ease;
    }

    .lgb-skel.on {
      opacity: 1;
    }

    @keyframes lgb-shim {
      0% {
        background-position: -400px 0
      }

      100% {
        background-position: 400px 0
      }
    }

    .lgb-shim {
      background: linear-gradient(90deg, rgba(255, 255, 255, .01) 0%, rgba(59, 130, 246, .044) 38%, rgba(6, 182, 212, .052) 50%, rgba(59, 130, 246, .044) 62%, rgba(255, 255, 255, .01) 100%);
      background-size: 400px 100%;
      animation: lgb-shim 2.2s linear infinite;
      border-radius: 3px;
    }

    .lgb-skel.s0 {
      min-height: 44px;
      border-left: 3px solid rgba(59, 130, 246, .18);
      background: rgba(5, 16, 46, .6);
    }

    .lgb-skel.s1 {
      min-height: 37px;
      border-left: 3px solid rgba(6, 182, 212, .14);
      background: rgba(1, 10, 24, .55);
    }

    .lgb-skel.s2 {
      min-height: 26px;
      border-left: 2px solid transparent;
      background: rgba(0, 0, 6, .4);
    }

    .lgb-skel-lc {
      width: 300px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border-right: 1px solid rgba(59, 130, 246, .035);
    }

    .lgb-skel-rc {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    .lgb-skel-dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .lgb-skel.s0 .lgb-skel-dot {
      background: rgba(59, 130, 246, .22);
    }

    .lgb-skel.s1 .lgb-skel-dot {
      background: rgba(6, 182, 212, .18);
    }

    .lgb-skel.s2 .lgb-skel-dot {
      background: rgba(34, 197, 94, .14);
    }

    .lgb-skel-lbl {
      height: 9px;
      border-radius: 3px;
      flex: 1;
    }

    .lgb-skel.s0 .lgb-skel-lbl {
      height: 11px;
    }

    .lgb-skel-bar {
      height: 7px;
      border-radius: 3px;
      width: 0;
      transition: width 1s cubic-bezier(.2, 1, .3, 1);
    }

    .lgb-skel.s0 .lgb-skel-bar {
      height: 5px;
      background: rgba(255, 255, 255, .1);
    }

    .lgb-skel.s1 .lgb-skel-bar {
      height: 5px;
      background: rgba(255, 255, 255, .08);
    }

    .lgb-skel.s2 .lgb-skel-bar {
      height: 9px;
      background: rgba(34, 197, 94, .13);
    }

    /* BOTTOM STEPS */
    .lgb-bottom {
      height: 42px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 3px;
      background: rgba(0, 0, 6, .99);
      border-top: 1px solid rgba(14, 36, 72, .09);
      z-index: 20;
      overflow: hidden;
    }

    .lgb-step {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(10, 24, 52, .12);
      background: rgba(0, 2, 10, .7);
      font-size: 8.5px;
      font-weight: 700;
      color: #06121a;
      transition: all .28s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .lgb-step.done {
      border-color: rgba(34, 197, 94, .14);
      color: #22c55e;
      background: rgba(0, 4, 2, .7);
    }

    .lgb-step.active {
      border-color: rgba(59, 130, 246, .28);
      color: #93c5fd;
      background: rgba(2, 12, 36, .9);
      box-shadow: 0 0 8px rgba(59, 130, 246, .07);
    }

    .lgb-snum {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 7.5px;
      background: rgba(255, 255, 255, .018);
      flex-shrink: 0;
    }

    .lgb-step.active .lgb-snum {
      background: rgba(59, 130, 246, .14);
      animation: lgb-pulse .85s ease infinite;
    }

    .lgb-bot-msg {
      margin-left: auto;
      flex-shrink: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      color: #06121a;
      padding-left: 10px;
      border-left: 1px solid rgba(22, 45, 90, .07);
    }

    /* PROGRESS */
    .lgb-prog {
      height: 3px;
      flex-shrink: 0;
      background: rgba(59, 130, 246, .04);
    }

    .lgb-beam {
      height: 100%;
      background: linear-gradient(90deg, #1a56db, #0891b2, #06b6d4);
      width: 0;
      transition: width .5s cubic-bezier(.2, 1, .3, 1);
    }

    @keyframes lgb-done {
      0% {
        background: rgba(34, 197, 94, 0)
      }

      20% {
        background: rgba(34, 197, 94, .02)
      }

      100% {
        background: rgba(34, 197, 94, 0)
      }
    }

    .lgb-gantt.done-flash {
      animation: lgb-done 2.5s ease forwards;
    }