:root {
  --future-bg: #030812;
  --future-panel: rgba(8, 22, 38, .72);
  --future-panel-strong: rgba(11, 31, 50, .86);
  --future-line: rgba(117, 231, 255, .22);
  --future-line-strong: rgba(129, 241, 255, .42);
  --future-cyan: #54ecff;
  --future-teal: #42f0ba;
  --future-blue: #5d8cff;
  --future-gold: #ffc85a;
  --future-ink: #e9fcff;
  --future-muted: #8faec1;
  --future-dim: #5e788e;
  --radius-xl: 20px;
  --radius-lg: 14px;
  --radius-md: 9px;
  --shadow: 0 18px 52px rgba(0, 0, 0, .34), 0 0 28px rgba(49, 227, 255, .08);
  --shadow-panel: 0 28px 90px rgba(0, 0, 0, .52), 0 0 44px rgba(57, 244, 202, .12);
}

html.future-enabled {
  color-scheme: dark;
}

body.future-ui {
  height: 100dvh;
  min-height: 100vh;
  color: var(--future-ink);
  font-family: "Outfit", "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 20%), rgba(84, 236, 255, .16), transparent 22rem),
    radial-gradient(circle at 12% 9%, rgba(66, 240, 186, .18), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(93, 140, 255, .18), transparent 25rem),
    linear-gradient(180deg, #06101e 0%, #020610 48%, #030812 100%);
  overflow: hidden;
}

body.future-ui::before {
  background:
    radial-gradient(circle, rgba(180, 242, 255, .66) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(73, 154, 255, .42) 0 1px, transparent 1.6px),
    linear-gradient(rgba(84, 236, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 236, 255, .04) 1px, transparent 1px);
  background-size: 118px 118px, 73px 73px, 48px 48px, 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 92%);
  opacity: .52;
}

body.future-ui::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0 68%, rgba(42, 226, 196, .06) 69%, transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(255,255,255,.024) 7px);
  mix-blend-mode: screen;
}

.future-space,
.ambient-grid,
.noise-layer,
.shell {
  position: relative;
}

.future-space {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.future-space::before,
.future-space::after {
  content: "";
  position: absolute;
  left: -8vw;
  right: -8vw;
  height: 36vh;
  bottom: 0;
  opacity: .58;
  background:
    repeating-linear-gradient(10deg, transparent 0 18px, rgba(77, 238, 255, .2) 20px, transparent 23px),
    repeating-linear-gradient(-13deg, transparent 0 22px, rgba(64, 242, 179, .18) 24px, transparent 27px);
  filter: none;
  transform: perspective(820px) rotateX(66deg) translateY(16vh);
  transform-origin: bottom;
}

.future-space::after {
  opacity: .18;
  filter: blur(6px);
}

.beam {
  position: absolute;
  bottom: 0;
  width: 30vw;
  height: 40vh;
  opacity: .5;
  border: 1px solid rgba(84, 236, 255, .2);
  background: linear-gradient(180deg, rgba(84,236,255,.16), transparent 72%);
  filter: blur(.3px);
  transform-origin: bottom;
}

.beam-left {
  left: 8vw;
  transform: skewX(-28deg);
}

.beam-right {
  right: 8vw;
  transform: skewX(28deg);
}

.holo-base {
  position: absolute;
  left: 8vw;
  right: 8vw;
  bottom: 20px;
  height: 44px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(72,126,255,.72), rgba(66,240,186,.74)),
    linear-gradient(180deg, rgba(255,255,255,.45), transparent);
  box-shadow:
    0 0 24px rgba(84, 236, 255, .72),
    0 0 70px rgba(66, 240, 186, .38);
  opacity: .42;
  transform: perspective(720px) rotateX(58deg);
}

.ambient-grid {
  position: fixed;
  z-index: 0;
  opacity: .38;
  background:
    radial-gradient(circle at 16% 44%, rgba(66,240,186,.16), transparent 12rem),
    radial-gradient(circle at 82% 58%, rgba(84,236,255,.16), transparent 16rem),
    linear-gradient(114deg, transparent 0 48%, rgba(84,236,255,.13) 49%, transparent 50% 100%);
}

.noise-layer {
  position: fixed;
  z-index: 0;
  opacity: .12;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.9) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 50%, rgba(84,236,255,.42) 0 1px, transparent 1px);
  background-size: 17px 17px, 31px 31px;
}

.shell {
  z-index: 2;
  width: min(1680px, calc(100vw - 26px));
  height: 100dvh;
  padding: 8px 0 26px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.glass {
  background:
    linear-gradient(145deg, rgba(14, 38, 58, .76), rgba(4, 13, 26, .68)),
    radial-gradient(circle at 15% 0%, rgba(66,240,186,.16), transparent 34rem);
  border: 1px solid transparent;
  background-clip: padding-box, padding-box;
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(84, 236, 255, .18),
    0 0 26px rgba(66, 240, 186, .1),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 36px rgba(84,236,255,.04);
  backdrop-filter: blur(15px) saturate(1.12);
}

.topbar {
  min-height: 72px;
  padding: 11px 20px;
  border-radius: 22px;
  position: relative;
}

.cockpit-panel::before,
.cockpit-toolbar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(94deg, rgba(66,240,186,.98), rgba(84,236,255,.34) 34%, rgba(93,140,255,.96) 72%, rgba(66,240,186,.82)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.95), transparent 9rem);
  opacity: .98;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

.cockpit-board::before {
  content: none;
}

.cockpit-panel {
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(84,236,255,.24),
    0 20px 70px rgba(0,0,0,.42),
    0 0 28px rgba(84,236,255,.2),
    0 0 58px rgba(66,240,186,.18);
}

.cockpit-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 55%, rgba(93,140,255,.14) 56%, transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px);
}

.system-label {
  color: rgba(160, 211, 222, .78);
  letter-spacing: .18em;
}

h1 {
  color: var(--future-ink);
  font-size: clamp(24px, 2.35vw, 36px);
  text-shadow: 0 0 18px rgba(84,236,255,.22);
}

.brand-title {
  gap: 12px;
}

.brand-logo {
  height: clamp(24px, 2.5vw, 34px);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.18));
}

.status-pill,
.refresh-button {
  min-height: 34px;
  border: 1px solid rgba(111,230,255,.32);
  color: #c9faff;
  background: rgba(10, 31, 47, .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 16px rgba(84,236,255,.12);
}

.status-pill.ok {
  color: #7cf5c8;
  background: rgba(18, 76, 63, .46);
}

.status-pill.error {
  color: #ff8fa3;
  background: rgba(93, 21, 42, .54);
}

.refresh-button:hover {
  background: rgba(20, 67, 96, .82);
  box-shadow: 0 0 18px rgba(84,236,255,.24);
}

.summary-grid {
  gap: 10px;
  margin: 8px 0;
}

.metric {
  min-height: 48px;
  border-radius: 16px;
  padding: 8px 12px;
  color: var(--future-ink);
  background:
    linear-gradient(155deg, rgba(28, 66, 85, .68), rgba(5, 14, 27, .62)),
    radial-gradient(circle at 70% 0%, rgba(66,240,186,.18), transparent 8rem);
  border: 1px solid rgba(111,230,255,.42);
  box-shadow:
    0 0 0 1px rgba(66,240,186,.08),
    0 0 20px rgba(84,236,255,.1),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 28px rgba(0,0,0,.26);
}

.future-ui .metric,
.future-ui .search-box,
.future-ui .future-select-trigger,
.future-ui .product-meta span,
.future-ui .detail-card,
.future-ui .stage-item,
.future-ui .stage-group-card,
.future-ui .close-button {
  border-color: rgba(139, 241, 255, .44);
  box-shadow:
    0 0 0 1px rgba(66, 240, 186, .07),
    0 0 16px rgba(84, 236, 255, .11),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.metric::before,
.search-box::before,
.future-select-trigger::before {
  content: none;
}

.metric::after {
  background: linear-gradient(90deg, transparent, var(--future-cyan));
  box-shadow: 0 0 12px rgba(84,236,255,.9);
}

.metric span,
.metric small {
  color: rgba(181, 218, 227, .72);
}

.metric strong {
  color: #f3feff;
  font-size: 24px;
  text-shadow: 0 0 16px rgba(84,236,255,.18);
}

.toolbar {
  position: relative;
  z-index: 360;
  gap: 10px;
  border-radius: 18px;
  padding: 8px;
  background: rgba(10, 33, 48, .68);
  border-color: rgba(66,240,186,.58);
  box-shadow:
    0 0 0 1px rgba(84,236,255,.14),
    0 0 26px rgba(66,240,186,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.future-native-select {
  display: none;
}

.future-select {
  position: relative;
  min-width: 0;
  z-index: 40;
}

.future-select.open {
  z-index: 420;
}

.search-box,
.future-select-trigger {
  min-height: 34px;
  color: #d9fbff;
  border-color: rgba(135, 234, 255, .48);
  background: rgba(6, 17, 31, .58);
  box-shadow:
    0 0 14px rgba(84,236,255,.08),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.future-select-trigger {
  width: 100%;
  border: 1px solid rgba(135, 234, 255, .48);
  border-radius: var(--radius-md);
  padding: 0 34px 0 14px;
  display: flex;
  align-items: center;
  text-align: left;
  position: relative;
  font-size: 14px;
  font-weight: 800;
}

.future-select-trigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(210, 252, 255, .88);
  border-bottom: 2px solid rgba(210, 252, 255, .88);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .18s ease;
}

.future-select.open .future-select-trigger::after {
  transform: translateY(-25%) rotate(225deg);
}

.future-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  padding: 7px;
  border-radius: 13px;
  border: 1px solid rgba(126, 239, 255, .52);
  background:
    linear-gradient(180deg, rgba(13, 34, 52, .98), rgba(4, 13, 24, .98)),
    radial-gradient(circle at 30% 0%, rgba(66,240,186,.16), transparent 10rem);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(66, 240, 186, .14),
    0 0 30px rgba(84, 236, 255, .18),
    inset 0 1px 0 rgba(255,255,255,.14);
  transform-origin: top;
  transform: translateY(-6px) scaleY(.82);
  clip-path: inset(0 0 100% 0 round 13px);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path .2s cubic-bezier(.2,.8,.2,1),
    transform .2s cubic-bezier(.2,.8,.2,1),
    opacity .14s ease;
}

.future-select.open .future-select-menu {
  transform: translateY(0) scaleY(1);
  clip-path: inset(0 0 0 0 round 13px);
  opacity: 1;
  pointer-events: auto;
}

.future-select-option {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: #dffbff;
  background: transparent;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
}

.future-select-option:hover,
.future-select-option.is-selected {
  color: #06131d;
  background: linear-gradient(90deg, #6af2de, #5bc8ff);
  box-shadow: 0 0 16px rgba(84,236,255,.28);
}

.search-box span {
  color: rgba(158, 203, 215, .72);
}

.search-box input {
  color: #eafcff;
}

.search-box input::placeholder {
  color: rgba(158, 203, 215, .56);
}

.board {
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 0;
  border-radius: 22px;
  overflow: auto;
  scrollbar-color: rgba(107, 232, 255, .62) rgba(6, 16, 29, .32);
  border: 1px solid rgba(126, 239, 255, .38);
  box-shadow:
    0 0 0 1px rgba(66, 240, 186, .08),
    0 0 26px rgba(84, 236, 255, .13),
    inset 0 1px 0 rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(9, 29, 47, .76), rgba(2, 7, 16, .76)),
    radial-gradient(circle at 50% 40%, rgba(66,240,186,.1), transparent 34rem);
}

.timeline-head,
.gantt-row {
  grid-template-columns: 360px max-content;
}

.board::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.board::-webkit-scrollbar-track {
  background: rgba(3, 13, 25, .68);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(113, 225, 255, .16);
}

.board::-webkit-scrollbar-thumb {
  border: 3px solid rgba(3, 13, 25, .72);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(66, 240, 186, .86), rgba(91, 171, 255, .92));
  box-shadow: 0 0 12px rgba(84, 236, 255, .32);
}

.board::-webkit-scrollbar-corner {
  background: rgba(3, 13, 25, .68);
}

.timeline-head {
  z-index: 260;
  background:
    linear-gradient(180deg, rgba(24, 61, 82, .96), rgba(8, 24, 40, .96)),
    linear-gradient(90deg, rgba(66,240,186,.12), rgba(93,140,255,.1));
  border-bottom: 1px solid rgba(119, 223, 255, .34);
  box-shadow: 0 16px 32px rgba(0,0,0,.36), 0 0 24px rgba(84,236,255,.08);
}

.product-head {
  z-index: 270;
  background:
    linear-gradient(180deg, rgba(25, 66, 86, .98), rgba(9, 26, 43, .98));
  color: var(--future-cyan);
  border-right: 1px solid rgba(119, 223, 255, .34);
}

.product-head span {
  color: #7ff8ff;
  text-shadow: 0 0 14px rgba(84,236,255,.38);
}

.product-head small {
  color: rgba(160, 207, 219, .66);
}

.future-ui .period-head {
  min-height: 44px;
  background:
    linear-gradient(180deg, rgba(16, 44, 62, .96), rgba(5, 15, 27, .96)) !important;
}

.future-ui .month-block,
.future-ui .month-block:nth-child(even) {
  border-color: rgba(119, 223, 255, .22);
  grid-template-rows: 22px 22px;
  background: linear-gradient(180deg, rgba(16, 44, 62, .88), rgba(5, 15, 27, .86)) !important;
}

.future-ui .month-block.has-current {
  background:
    linear-gradient(180deg, rgba(41, 124, 126, .72), rgba(7, 24, 37, .84)) !important;
}

.future-ui .month-title {
  color: #e8fbff;
  background: rgba(7, 20, 34, .34);
  text-shadow: 0 0 12px rgba(84,236,255,.18);
}

.future-ui .month-parts span {
  color: rgba(199, 233, 240, .72);
  border-color: rgba(119, 223, 255, .18);
}

.future-ui .month-parts span.is-current {
  color: #041119;
  background: linear-gradient(180deg, #72f3df, #47d9f2);
  box-shadow: 0 0 18px rgba(66,240,186,.58);
}

.gantt-row {
  min-height: 60px;
  border-bottom: 1px solid rgba(119, 223, 255, .18);
  background: rgba(4, 12, 24, .28);
}

.gantt-row:hover {
  background: rgba(26, 74, 98, .22);
}

.product-cell {
  z-index: 24;
  padding: 7px 14px 13px;
  border-right: 1px solid rgba(119, 223, 255, .27);
  background:
    linear-gradient(90deg, rgba(24, 55, 74, .96), rgba(8, 19, 33, .95) 78%),
    radial-gradient(circle at 0 50%, hsla(var(--row-hue), 82%, 60%, .28), transparent 15rem);
}

.gantt-row.heavy .product-cell,
.gantt-row.high .product-cell,
.gantt-row.hot .product-cell,
.gantt-row.done .product-cell,
.gantt-row.paused .product-cell {
  background:
    linear-gradient(90deg, hsla(var(--row-hue), 72%, 48%, .18), rgba(8, 19, 33, .96) 34%),
    linear-gradient(180deg, rgba(26, 63, 83, .96), rgba(7, 18, 31, .96));
}

.product-title strong {
  color: #f3feff;
  font-size: 14px;
}

.product-meta span {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 10px;
  color: rgba(202, 233, 239, .76);
  background: rgba(12, 31, 48, .62);
  border-color: rgba(119, 223, 255, .2);
}

.product-meta b {
  color: rgba(119, 243, 220, .86);
}

.tag {
  color: #071422;
  border: 1px solid rgba(255,255,255,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 0 14px hsla(var(--row-hue), 74%, 58%, .22);
}

.tag.heavy {
  color: #332006;
  background: linear-gradient(135deg, #fff1aa 0%, #f6bd3b 44%, #a66c12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 18px rgba(255, 196, 60, .42);
}

.tag.hot {
  color: #2c1a05;
  background: linear-gradient(135deg, #ffe2a6, #d8952b 58%, #8f5810);
}

.tag.high {
  color: #fff7f2;
  background: linear-gradient(135deg, #ff9d7d, #d9503f 58%, #8d2532);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 0 16px rgba(255, 106, 86, .32);
}

.tag.mid {
  color: #062b28;
  background: linear-gradient(135deg, #9ffce1, #2fd0a7 58%, #087d73);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 0 14px rgba(66, 240, 186, .34);
}

.tag.low {
  color: #eaf4ff;
  background: linear-gradient(135deg, #7997bd, #465e80 62%, #243650);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 12px rgba(121, 151, 189, .2);
}

.wait-badge {
  color: #ffe5a3;
  background: rgba(104, 72, 18, .55);
  border-color: rgba(255, 200, 90, .38);
  box-shadow: 0 0 15px rgba(255,200,90,.16);
}

.progress-line {
  left: 14px;
  right: 16px;
  bottom: 7px;
  height: 3px;
  background: rgba(111, 230, 255, .13);
}

.progress-line span {
  background: linear-gradient(90deg, var(--future-teal), var(--future-cyan));
  box-shadow: 0 0 12px rgba(84,236,255,.5);
}

.progress-line em {
  color: rgba(216, 248, 255, .76);
}

.timeline-cell {
  min-height: 60px;
  box-shadow: inset 0 -1px 0 rgba(119, 223, 255, .18);
}

.timeline-slot {
  border-left: 1px solid rgba(119, 223, 255, .13);
  border-bottom: 1px solid rgba(119, 223, 255, .15);
  background: rgba(7, 18, 31, .2);
}

.timeline-slot.part-a {
  background: rgba(84, 236, 255, .035);
}

.timeline-slot.part-b {
  background: rgba(66, 240, 186, .052);
}

.timeline-slot.part-c {
  border-right: 1px solid rgba(119, 223, 255, .26);
  background: rgba(93, 140, 255, .035);
}

.timeline-slot.is-current {
  background:
    linear-gradient(180deg, rgba(66,240,186,.27), rgba(84,236,255,.06)),
    rgba(16, 55, 70, .28);
  box-shadow:
    inset 1px 0 0 rgba(91,245,223,.46),
    inset -1px 0 0 rgba(91,245,223,.46),
    0 0 28px rgba(66,240,186,.2);
}

.bar {
  top: 27px;
  height: 7px;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent, hsla(var(--row-hue), 78%, 58%, .54) 12%, rgba(78, 238, 255, .86) 52%, rgba(93, 140, 255, .82) 86%, transparent),
    linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  box-shadow:
    0 0 14px hsla(var(--row-hue), 84%, 62%, .34),
    0 0 28px rgba(84,236,255,.16);
}

.wait-segment {
  top: 27px;
  height: 6px;
  z-index: 4;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 236, 157, .92) 0 18%, rgba(255, 191, 76, .78) 46%, rgba(255, 170, 47, .34) 70%, transparent 100%),
    linear-gradient(90deg, transparent, rgba(255, 212, 112, .72) 16%, rgba(255, 177, 58, .82) 52%, rgba(255, 212, 112, .62) 84%, transparent);
  box-shadow:
    0 0 12px rgba(255, 200, 90, .46),
    0 0 26px rgba(255, 164, 43, .24);
  filter: blur(.25px);
}

.wait-segment::after {
  color: #ffe8ad;
  border-color: rgba(255, 200, 90, .4);
  background: rgba(21, 16, 7, .92);
  box-shadow: 0 10px 30px rgba(0,0,0,.36), 0 0 18px rgba(255,200,90,.18);
}

.stage-dot {
  top: 16px;
  z-index: 5;
  width: 32px;
  height: 32px;
}

.dot-core {
  width: 18px;
  height: 18px;
  border-color: rgba(225, 255, 255, .9);
  color: #eaffff;
  background: radial-gradient(circle at 35% 28%, #e8ffff 0 10%, hsl(var(--row-hue), 84%, 58%) 42%, hsl(var(--row-hue), 78%, 35%) 100%);
  box-shadow:
    0 0 0 5px hsla(var(--row-hue), 80%, 58%, .13),
    0 0 18px hsla(var(--row-hue), 84%, 58%, .42),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.dot-core span {
  display: none;
}

.stage-dot.is-key-node .dot-core {
  width: 19px;
  height: 19px;
  background: radial-gradient(circle at 35% 26%, #f1ffff 0 12%, #56f1e3 42%, #1593b2 100%);
  box-shadow:
    0 0 0 6px rgba(84,236,255,.13),
    0 0 18px rgba(84,236,255,.62),
    0 0 32px rgba(66,240,186,.2),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.stage-dot.is-key-node.key-ship .dot-core {
  border-radius: 7px;
  background: radial-gradient(circle at 32% 22%, #f2ffff 0 10%, #7ca7ff 42%, #4169e6 100%);
  box-shadow:
    0 0 0 6px rgba(93,140,255,.14),
    0 0 20px rgba(93,140,255,.6),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.stage-dot::before,
.stage-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

.stage-dot::after {
  border: 1px solid rgba(105, 226, 255, .24);
  box-shadow: 0 0 10px rgba(84,236,255,.16);
  animation: nodeSoftPulse 4.2s ease-out infinite;
}

.stage-dot.current-period-dot::before {
  border: 1px solid rgba(125, 251, 255, .76);
  box-shadow: 0 0 20px rgba(84,236,255,.54);
  animation: currentNodePulse 2.8s ease-out infinite;
}

.stage-dot.current-period-dot::after {
  border: 1px solid rgba(66, 240, 186, .54);
  box-shadow: 0 0 18px rgba(66,240,186,.36);
  animation: currentNodePulse 2.8s ease-out .95s infinite;
}

.stage-dot.mark-done .dot-core::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1px dashed rgba(140, 255, 231, .7);
  opacity: .9;
  filter: drop-shadow(0 0 8px rgba(66, 240, 186, .22));
  animation: doneRingSpin 7.5s linear infinite;
}

.stage-dot.mark-done .dot-core {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, #edfffb 0 10%, #58e8bf 42%, #159b82 100%);
  box-shadow:
    0 0 0 5px rgba(66, 240, 186, .11),
    0 0 16px rgba(66, 240, 186, .42),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.stage-dot small {
  top: 28px;
  color: #ddfbff;
  background: rgba(7, 18, 31, .88);
  border-color: rgba(119, 223, 255, .24);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.stage-dot.is-inferred .dot-core {
  outline-color: rgba(119, 223, 255, .38);
}

.stage-dot.mark-done.is-inferred .dot-core {
  opacity: 1;
  outline: 0;
}

.empty-state {
  color: var(--future-muted);
}

.detail-panel {
  z-index: 400;
  color: var(--future-ink);
  background:
    linear-gradient(160deg, rgba(14, 36, 56, .94), rgba(3, 11, 22, .96)),
    radial-gradient(circle at 0 0, rgba(66,240,186,.16), transparent 22rem);
  border: 1px solid rgba(119, 223, 255, .34);
  box-shadow: var(--shadow-panel);
  transform: translateY(-18px) scaleY(.94);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease;
}

.detail-panel.open {
  transform: translateY(0) scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

.close-button,
.detail-meta span,
.detail-card,
.stage-item,
.notes,
.stage-group-card {
  color: var(--future-ink);
  border-color: rgba(119, 223, 255, .22);
  background: rgba(8, 24, 40, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.close-button {
  color: #dffbff;
}

.detail-title {
  color: #f5feff;
}

.detail-meta,
.detail-card span,
.stage-item span,
.notes {
  color: rgba(186, 221, 230, .76);
}

.detail-card strong,
.stage-group-card header strong {
  color: #efffff;
}

.stage-group-card.dev {
  background: linear-gradient(90deg, rgba(93,140,255,.18), rgba(8,24,40,.62));
}

.stage-group-card.sample {
  background: linear-gradient(90deg, rgba(66,240,186,.16), rgba(8,24,40,.62));
}

.stage-group-card.bulk {
  background: linear-gradient(90deg, rgba(255,200,90,.16), rgba(8,24,40,.62));
}

.stage-group-card.sale {
  background: linear-gradient(90deg, rgba(84,236,255,.16), rgba(8,24,40,.62));
}

.stage-item.key-stage {
  border-color: rgba(255, 200, 90, .38);
  background: linear-gradient(90deg, rgba(255,200,90,.14), rgba(8,24,40,.68));
}

@keyframes currentNodePulse {
  0% {
    width: 20px;
    height: 20px;
    opacity: .74;
  }
  72% {
    width: 42px;
    height: 42px;
    opacity: 0;
  }
  100% {
    width: 42px;
    height: 42px;
    opacity: 0;
  }
}

@keyframes nodeSoftPulse {
  0% {
    width: 18px;
    height: 18px;
    opacity: .28;
  }
  70% {
    width: 34px;
    height: 34px;
    opacity: 0;
  }
  100% {
    width: 34px;
    height: 34px;
    opacity: 0;
  }
}

@keyframes doneRingSpin {
  to {
    transform: rotate(360deg);
  }
}

.state.done {
  color: #7af2c8;
  background: rgba(29, 107, 82, .42);
}

.state.pending {
  color: #ffe0a1;
  background: rgba(112, 73, 17, .44);
}

.state.paused {
  color: #d0d9e8;
  background: rgba(83, 96, 120, .42);
}

.state.planned {
  color: #91eef5;
  background: rgba(22, 84, 100, .42);
}

.scrim {
  z-index: 360;
  background: rgba(0, 5, 12, .56);
  backdrop-filter: blur(4px);
}

.image-grid img,
.image-placeholder {
  border-color: rgba(119, 223, 255, .22);
  background: rgba(8, 24, 40, .62);
}

@media (max-width: 980px) {
  .shell {
    width: min(100vw - 12px, 980px);
    padding: 6px 0 10px;
  }

  .topbar {
    min-height: 0;
    padding: 10px 14px;
  }

  .summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .metric {
    padding: 7px 9px;
  }

  .metric span,
  .metric small {
    font-size: 10px;
  }

  .metric strong {
    font-size: 22px;
  }

  .timeline-head,
  .gantt-row {
    grid-template-columns: 320px max-content;
  }

  .board {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .brand-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-head,
  .gantt-row {
    grid-template-columns: 280px max-content;
  }

  .product-cell {
    padding-inline: 10px;
  }
}