.info-card {
  padding: 10px 12px;
  border: 1px solid rgba(91, 111, 132, 0.28);
  background: rgba(37, 45, 58, 0.74);
}

.info-card-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  font-size: 12px;
  color: rgba(230, 238, 248, 0.76);
}

.info-grid strong {
  display: block;
  color: rgba(181, 204, 229, 0.74);
  font-weight: 500;
  font-size: 11px;
  margin-bottom: 3px;
}

.action-button {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(86, 107, 129, 0.28);
  background: linear-gradient(180deg, rgba(27, 37, 49, 0.94), rgba(18, 27, 37, 0.96));
  color: rgba(232, 239, 247, 0.92);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 4px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.action-button:hover {
  border-color: rgba(101, 164, 212, 0.34);
  background: linear-gradient(180deg, rgba(31, 44, 58, 0.96), rgba(21, 32, 43, 0.98));
}

.action-button.is-selected {
  border-color: rgba(98, 188, 186, 0.42);
  background: linear-gradient(180deg, rgba(20, 77, 82, 0.92), rgba(16, 57, 62, 0.96));
  box-shadow: 0 0 16px rgba(42, 162, 161, 0.16);
}

.action-button-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(242, 247, 252, 0.96);
  line-height: 1.35;
}

.action-button-desc {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(190, 204, 220, 0.78);
}

.center-panel-head {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(14, 143, 129, 0.98), rgba(15, 108, 103, 0.98));
  font-size: 14px;
  font-weight: 700;
}

.center-panel-body {
  padding: 12px 14px;
  max-height: 268px;
  overflow: auto;
}

.source-list {
  display: grid;
  gap: 10px;
}

.source-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(229, 236, 246, 0.78);
  font-size: 12px;
}

.source-item.is-active {
  color: rgba(246, 251, 255, 0.96);
}

.source-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(104, 128, 152, 0.28);
  background: rgba(50, 61, 76, 0.82);
  font-size: 11px;
}

.source-item.is-active .source-icon {
  background: rgba(20, 124, 118, 0.96);
  border-color: rgba(90, 222, 202, 0.48);
  box-shadow: 0 0 14px rgba(61, 220, 198, 0.18);
}

.source-list.mode-overview,
.source-list.mode-detection {
  display: grid;
  gap: 10px;
}

.source-list.mode-analysis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.source-list.mode-analysis .source-item {
  display: block;
  min-height: 136px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(74, 99, 124, 0.32);
  background: linear-gradient(180deg, rgba(22, 25, 31, 0.96), rgba(15, 19, 26, 0.96));
}

.source-list.mode-analysis .source-item.is-active {
  border-color: rgba(88, 172, 241, 0.42);
  background: linear-gradient(180deg, rgba(18, 43, 69, 0.98), rgba(13, 29, 48, 0.98));
}

.source-list.mode-analysis .source-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}

.source-list.mode-analysis .source-text {
  line-height: 1.65;
}

.source-list.mode-execution {
  display: grid;
  gap: 10px;
}

.source-list.mode-execution .source-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 96px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(70, 99, 132, 0.28);
  background: rgba(10, 23, 42, 0.92);
}

.source-list.mode-execution .source-item::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 6px;
  background: rgba(25, 45, 70, 0.96);
}

.source-list.mode-execution .source-item::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 8px;
  height: 6px;
  width: var(--task-progress, 68%);
  background: linear-gradient(90deg, rgba(52, 139, 235, 0.98), rgba(88, 204, 255, 0.98));
}

.source-list.mode-execution .source-item.is-active {
  border-color: rgba(96, 174, 244, 0.44);
  background: rgba(15, 34, 61, 0.96);
}

.source-list.mode-execution .source-icon {
  width: 20px;
  height: 20px;
}

.source-list.mode-execution .source-text {
  line-height: 1.5;
  padding-right: 12px;
  min-width: 0;
}

.source-list.mode-execution .source-text strong,
.source-list.mode-execution .source-text div {
  word-break: break-word;
}

.source-list.mode-execution .source-meta {
  justify-self: end;
  min-width: 82px;
  padding: 3px 8px;
  border: 1px solid rgba(91, 164, 232, 0.28);
  background: rgba(13, 41, 75, 0.92);
  color: rgba(236, 244, 251, 0.86);
  font-size: 11px;
  text-align: center;
}

.source-list.mode-review {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.source-list.mode-review .source-item {
  display: block;
  min-height: 108px;
  padding: 12px 12px 14px;
  border-left: 3px solid rgba(78, 174, 218, 0.5);
  background: linear-gradient(180deg, rgba(17, 30, 40, 0.94), rgba(13, 23, 31, 0.94));
}

.source-list.mode-review .source-item.is-active {
  border-left-color: rgba(39, 197, 141, 0.86);
  background: linear-gradient(180deg, rgba(15, 43, 52, 0.96), rgba(12, 30, 37, 0.96));
}

.source-list.mode-review .source-icon {
  margin-bottom: 10px;
}

.source-list.mode-review .source-text {
  line-height: 1.6;
}

.gantt-board {
  padding: 2px 0 2px;
}

.gantt-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.gantt-tab {
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(82, 112, 148, 0.28);
  background: rgba(28, 40, 58, 0.92);
  color: rgba(223, 232, 241, 0.82);
  font-size: 11px;
  white-space: nowrap;
}

.gantt-tab.is-active {
  background: rgba(39, 77, 141, 0.96);
  border-color: rgba(99, 160, 232, 0.38);
  color: #f3f8fd;
}

.gantt-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  align-items: start;
}

.gantt-label-head,
.gantt-time-head {
  height: 28px;
  display: flex;
  align-items: center;
  color: rgba(180, 198, 220, 0.74);
  font-size: 11px;
}

.gantt-time-head {
  display: grid;
  gap: 0;
}

.gantt-time-head span {
  justify-self: center;
}

.gantt-labels,
.gantt-rows {
  display: grid;
  gap: 8px;
}

.gantt-label {
  min-height: 34px;
  display: flex;
  align-items: center;
  color: rgba(223, 232, 241, 0.86);
  font-size: 11px;
  line-height: 1.45;
}

.gantt-row {
  position: relative;
  min-height: 34px;
  border-bottom: 1px solid rgba(41, 58, 83, 0.72);
}

.gantt-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(79, 118, 164, 0.16) 1px, transparent 1px);
  background-size: calc(100% / var(--gantt-cols)) 100%;
}

.gantt-bar {
  position: absolute;
  top: 6px;
  height: 20px;
  left: calc((100% / var(--gantt-cols)) * var(--start));
  width: calc((100% / var(--gantt-cols)) * var(--span));
  background: linear-gradient(90deg, rgba(54, 103, 214, 0.98), rgba(43, 90, 184, 0.98));
  border: 1px solid rgba(112, 162, 246, 0.26);
  border-radius: 4px;
  color: #f2f7fd;
  font-size: 10px;
  line-height: 18px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-bar.is-ghost {
  background: rgba(55, 79, 109, 0.76);
  border-style: dashed;
  color: rgba(213, 223, 236, 0.78);
}

.gantt-bar.is-end {
  background: linear-gradient(90deg, rgba(73, 112, 214, 0.96), rgba(54, 88, 173, 0.96));
}

.gantt-compare .gantt-bar.is-old {
  background: rgba(86, 98, 117, 0.64);
  border-style: dashed;
}

.gantt-compare .gantt-bar.is-new {
  top: 9px;
  height: 16px;
  background: linear-gradient(90deg, rgba(56, 151, 234, 0.98), rgba(37, 113, 198, 0.98));
}

.timeline-board {
  display: grid;
  gap: 10px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 72px 16px 1fr;
  gap: 10px;
  align-items: start;
}

.timeline-time {
  color: rgba(169, 192, 216, 0.78);
  font-size: 11px;
  line-height: 1.4;
  padding-top: 2px;
}

.timeline-node {
  position: relative;
  width: 16px;
  min-height: 54px;
}

.timeline-node::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  bottom: -12px;
  width: 2px;
  background: rgba(67, 119, 172, 0.5);
}

.timeline-row:last-child .timeline-node::before {
  display: none;
}

.timeline-node::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(42, 194, 141, 0.96);
  box-shadow: 0 0 0 3px rgba(42, 194, 141, 0.14);
}

.timeline-card {
  padding: 10px 12px;
  border: 1px solid rgba(72, 109, 141, 0.24);
  background: rgba(17, 29, 41, 0.88);
}

.timeline-card strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(240, 246, 251, 0.94);
  font-size: 12px;
}

.timeline-card div {
  color: rgba(219, 230, 242, 0.74);
  font-size: 11px;
  line-height: 1.55;
}

.plan-sequence-board,
.plan-detail-board {
  margin-top: 12px;
  padding: 12px 12px 14px;
  border: 1px solid rgba(64, 76, 94, 0.28);
  background: rgba(18, 22, 29, 0.92);
}

.plan-sequence-title,
.plan-detail-title {
  margin-bottom: 10px;
  color: rgba(238, 244, 250, 0.94);
  font-size: 12px;
  font-weight: 700;
}

.video-popup.plan-popup .plan-sequence-board .gantt-grid {
  grid-template-columns: 136px 1fr;
}

.video-popup.plan-popup .plan-sequence-board .gantt-label {
  min-height: 30px;
  font-size: 10px;
}

.video-popup.plan-popup .plan-sequence-board .gantt-row {
  min-height: 30px;
}

.video-popup.plan-popup .plan-sequence-board .gantt-bar {
  top: 5px;
  height: 18px;
  font-size: 10px;
  line-height: 16px;
}

.plan-detail-table {
  border: 1px solid rgba(67, 80, 100, 0.28);
  background: rgba(15, 19, 26, 0.92);
}

.plan-detail-table-head,
.plan-detail-table-row {
  display: grid;
  grid-template-columns: 120px 170px 120px 170px 1fr;
}

.plan-detail-table-head {
  background: rgba(29, 37, 48, 0.94);
  border-bottom: 1px solid rgba(66, 79, 97, 0.32);
}

.plan-detail-table-head div {
  padding: 10px 10px;
  color: rgba(235, 241, 247, 0.9);
  font-size: 11px;
  font-weight: 700;
  border-right: 1px solid rgba(58, 70, 87, 0.26);
}

.plan-detail-table-head div:last-child {
  border-right: 0;
}

.plan-detail-table-body {
  display: grid;
}

.plan-detail-table-row {
  border-bottom: 1px solid rgba(56, 68, 84, 0.22);
}

.plan-detail-table-row:last-child {
  border-bottom: 0;
}

.plan-detail-table-row div {
  padding: 10px 10px;
  color: rgba(205, 216, 228, 0.8);
  font-size: 10px;
  line-height: 1.65;
  border-right: 1px solid rgba(58, 70, 87, 0.18);
}

.plan-detail-table-row div:last-child {
  border-right: 0;
}

.panel-tabs.mode-analysis,
.panel-tabs.mode-execution,
.panel-tabs.mode-review {
  justify-content: flex-start;
}

.panel-tabs.mode-analysis {
  background: rgba(10, 12, 18, 0.88);
}

.panel-tabs.mode-execution {
  background: rgba(8, 24, 41, 0.92);
}

.panel-tabs.mode-review {
  background: rgba(10, 24, 31, 0.9);
}

.info-list.mode-review {
  gap: 12px;
}

.info-list.mode-review .info-card {
  background: linear-gradient(180deg, rgba(17, 31, 39, 0.9), rgba(11, 22, 28, 0.92));
  border-left: 3px solid rgba(84, 175, 216, 0.42);
}

.section-content.mode-review {
  line-height: 1.7;
}

.subtitle-block,
.scene-rail,
.player-bar {
  width: 100%;
  background: rgba(10, 18, 28, 0.96);
  border: 1px solid rgba(85, 141, 193, 0.24);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.subtitle-block {
  padding: 12px 18px 14px;
}

.narrative-shell {
  position: relative;
}

.narrative-toggle-bar {
  width: 100%;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(85, 141, 193, 0.24);
  background: rgba(9, 16, 24, 0.92);
  color: rgba(218, 229, 240, 0.82);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.narrative-toggle-text {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.narrative-toggle-meta {
  font-size: 12px;
  color: rgba(167, 179, 193, 0.7);
}

.narrative-body {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.narrative-shell.is-collapsed .narrative-body {
  display: none;
}

.scene-rail {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 8px;
}

.timeline-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 18;
  overflow: hidden;
  background: rgba(18, 22, 30, 0.96);
  border: 1px solid rgba(88, 98, 114, 0.3);
  border-color: rgba(88, 98, 114, 0.3);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.36);
  height: 42px;
  max-height: 42px;
  transition: height 180ms ease, max-height 180ms ease;
}

.timeline-resize-handle {
  height: 12px;
  cursor: ns-resize;
  background:
    linear-gradient(180deg, rgba(86, 96, 110, 0.1), rgba(39, 45, 54, 0.12));
  border-bottom: 1px solid rgba(84, 94, 110, 0.16);
}

.timeline-resize-handle::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 4px auto 0;
  background: rgba(142, 152, 166, 0.52);
}

.timeline-toggle {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(31, 35, 44, 0.98), rgba(23, 27, 35, 0.98));
  color: rgba(233, 238, 244, 0.9);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.timeline-toggle-meta {
  color: rgba(171, 181, 194, 0.72);
  font-size: 12px;
}

.timeline-shell-body {
  height: calc(100% - 54px);
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(84, 94, 110, 0.18);
  background:
    linear-gradient(180deg, rgba(20, 24, 32, 0.98), rgba(16, 20, 28, 0.98));
}

.timeline-shell.is-collapsed .timeline-shell-body {
  display: none;
}

.timeline-shell.is-collapsed .timeline-resize-handle {
  display: none;
}

.timeline-scroll-viewport {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.global-timeline {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.global-timeline-tabs {
  display: flex;
  gap: 24px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(74, 83, 96, 0.22);
  color: rgba(191, 199, 209, 0.74);
  font-size: 12px;
}

.global-timeline-tab.is-active {
  color: rgba(237, 242, 247, 0.92);
}

.global-timeline-head {
  display: grid;
  grid-template-columns: 160px repeat(18, minmax(48px, 1fr));
  gap: 0;
  color: rgba(183, 191, 201, 0.8);
  font-size: 11px;
}

.global-timeline-head-label {
  padding: 0 10px 6px 0;
}

.global-timeline-head-time {
  text-align: center;
  padding-bottom: 6px;
}

.global-timeline-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: stretch;
  min-height: 54px;
}

.global-timeline-label {
  border: 0;
  background: transparent;
  padding: 14px 12px 0 0;
  color: rgba(231, 236, 242, 0.9);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.global-timeline-track {
  position: relative;
  min-height: 54px;
  border-top: 1px solid rgba(61, 70, 82, 0.28);
  border-bottom: 1px solid rgba(61, 70, 82, 0.28);
  background-image:
    linear-gradient(90deg, rgba(94, 108, 126, 0.14) 1px, transparent 1px);
  background-size: calc(100% / 18) 100%;
}

.global-timeline-bar {
  position: absolute;
  top: 12px;
  height: 28px;
  left: calc((100% / 18) * var(--start));
  width: calc((100% / 18) * var(--span));
  border: 1px solid rgba(112, 124, 144, 0.3);
  background: linear-gradient(90deg, rgba(60, 72, 92, 0.98), rgba(47, 59, 76, 0.98));
  color: rgba(240, 244, 248, 0.9);
  font-size: 11px;
  line-height: 26px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.global-timeline-label.is-active,
.global-timeline-bar.is-active {
  box-shadow: 0 0 0 1px rgba(110, 200, 255, 0.38), 0 0 16px rgba(62, 164, 232, 0.18);
  color: rgba(248, 252, 255, 0.98);
}

body.timeline-resizing {
  user-select: none;
  cursor: ns-resize;
}

.global-timeline-bar.is-alert {
  border-color: rgba(159, 103, 93, 0.32);
  background: linear-gradient(90deg, rgba(87, 61, 57, 0.96), rgba(70, 50, 48, 0.96));
}

.global-timeline-bar.is-action {
  border-color: rgba(98, 116, 141, 0.3);
  background: linear-gradient(90deg, rgba(56, 68, 88, 0.96), rgba(45, 57, 75, 0.96));
}

.global-timeline-bar.is-review {
  border-color: rgba(112, 120, 132, 0.28);
  background: linear-gradient(90deg, rgba(52, 58, 67, 0.96), rgba(42, 47, 56, 0.96));
}

.scene-node {
  min-height: 52px;
  padding: 8px 6px;
  border: 1px solid rgba(82, 118, 153, 0.22);
  background: rgba(17, 29, 41, 0.8);
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: center;
}

.scene-node-index {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(65, 92, 118, 0.58);
  color: rgba(233, 242, 250, 0.84);
  font-size: 10px;
  font-weight: 700;
}

.scene-node-label {
  font-size: 10px;
  line-height: 1.3;
  color: rgba(214, 226, 239, 0.68);
  text-align: center;
}

.scene-node.is-done {
  border-color: rgba(66, 182, 149, 0.3);
  background: rgba(16, 53, 54, 0.72);
}

.scene-node.is-done .scene-node-index {
  background: rgba(22, 141, 108, 0.9);
}

.scene-node.is-current {
  border-color: rgba(104, 211, 255, 0.44);
  background: rgba(13, 45, 68, 0.9);
  box-shadow: 0 0 18px rgba(62, 164, 232, 0.16);
}

.scene-node.is-current .scene-node-index {
  background: rgba(47, 141, 218, 0.96);
}

.scene-node.is-current .scene-node-label {
  color: rgba(245, 250, 255, 0.94);
}

.subtitle-title {
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  letter-spacing: 0.04em;
}

.subtitle-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(228, 236, 246, 0.7);
  text-align: center;
}

.player-bar {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(94, 118, 143, 0.32);
  background: rgba(19, 35, 51, 0.92);
  color: #e9f3fb;
  font-size: 13px;
  cursor: pointer;
}

.player-btn.primary {
  background: rgba(17, 126, 124, 0.94);
  border-color: rgba(77, 209, 204, 0.32);
}

.player-btn.is-running {
  background: rgba(13, 111, 109, 0.98);
  border-color: rgba(95, 228, 216, 0.46);
  box-shadow: 0 0 18px rgba(61, 220, 198, 0.2);
}

.player-btn.is-disabled {
  opacity: 0.56;
}

.player-progress {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}

.player-progress-value {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 16%;
  background: linear-gradient(90deg, #58c9f4, #1ab07f);
}

.player-status {
  font-size: 12px;
  color: rgba(220, 232, 244, 0.72);
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .left-panel {
    width: 300px;
  }

  .right-panel {
    width: 294px;
  }

  .scene-rail {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}