:root {
  color-scheme: light;
  --page: #edf1f4;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --ink: #17212b;
  --muted: #697889;
  --line: #d7e0e7;
  --teal: #166b78;
  --teal-dark: #0f5560;
  --blue: #2d92d0;
  --token: #b95d3a;
  --changed: #c92727;
  --shadow: 0 18px 48px rgba(24, 42, 56, 0.14);
  font-family: "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(640px, 1.35fr) minmax(430px, 0.85fr);
  gap: 22px;
  min-height: 100vh;
  padding: 22px;
}

.media-pane,
.editor-pane {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.media-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
}

.editor-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 20px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.file-select {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(720px, 100%);
  min-height: 44px;
  border: 1px solid #6e7b86;
  border-radius: 7px;
  background: #65717b;
  color: #fff;
  padding: 0 14px;
  font-size: 20px;
  line-height: 1;
}

.file-select span {
  flex: 0 0 auto;
  margin-right: 10px;
}

.file-select strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.status-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-picker {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  max-width: 520px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px 4px 12px;
}

.demo-picker span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.demo-project-select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0 8px 0 12px;
  font-weight: 700;
}

.demo-project-select option {
  color: var(--ink);
}

.demo-project-select option.annotated-option {
  color: #1d8a4a;
  font-weight: 800;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.actions .nav-link {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.actions .nav-link:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(36, 55, 68, 0.10);
}

.actions button {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 0;
  font-size: 20px;
}

#loginButton {
  width: auto;
  min-width: 104px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.video-shell {
  position: relative;
  align-self: start;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #0a1d25;
  border-radius: 8px;
  background: #101820;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}

.annotation-status {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  padding: 10px 12px;
  font-size: 14px;
}

.annotation-status.saved {
  border-color: rgba(53, 162, 104, 0.36);
  background: #edf8f2;
  color: #207246;
  font-weight: 800;
}

video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.empty-video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 72%, rgba(37, 86, 64, 0.86) 0 18%, transparent 19%),
    linear-gradient(to bottom, #bd9f70 0 54%, #2f605a 54% 100%);
}

.empty-video[hidden] {
  display: none !important;
}

.empty-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(50, 32, 20, 0.14) 0 2px, transparent 2px 18px),
    linear-gradient(to bottom, transparent 0 55%, rgba(0, 0, 0, 0.24) 55% 100%);
}

.play-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.44);
  font-size: 30px;
  padding-left: 5px;
}

.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
}

.timeline-head strong {
  color: var(--ink);
  margin-right: 8px;
}

.time-separator {
  color: var(--muted);
  margin: 0 4px;
}

#currentLabel {
  color: #c92727;
  font-weight: 800;
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analysis-tracks {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.track-head strong {
  color: var(--ink);
}

.track-chart {
  overflow: hidden;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.track-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.track-chart .grid line {
  stroke: #e7eef3;
  stroke-width: 1;
}

.track-chart .pitch-bars rect {
  fill: rgba(45, 146, 208, 0.58);
}

.track-chart .f0-line {
  fill: none;
  stroke: #d78362;
  stroke-width: 2;
}

.timeline-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #dfe9ef;
}

.timeline {
  position: relative;
  min-width: 100%;
  height: 92px;
  background:
    linear-gradient(to bottom, #edf6fa 0 28px, #dfe9ef 28px 100%),
    repeating-linear-gradient(90deg, rgba(19, 55, 68, 0.08) 0 1px, transparent 1px 60px);
}

.segments {
  position: absolute;
  inset: 28px 0 8px;
}

.segment {
  position: absolute;
  top: 0;
  min-width: 76px;
  height: 54px;
  overflow: hidden;
  border: 1px solid #9ecfe9;
  border-radius: 6px;
  background: #f8fcff;
  color: var(--ink);
  padding: 28px 8px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.segment::before {
  content: "";
  position: absolute;
  inset: 5px 4px 20px;
  opacity: 0.95;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Crect width='600' height='40' fill='%23f8fcff'/%3E%3Cpath stroke='%232d92d0' stroke-width='2' d='M0 20V8 M8 20V34 M16 20V4 M24 20V36 M32 20V10 M40 20V31 M48 20V7 M56 20V38 M64 20V3 M72 20V35 M80 20V8 M88 20V37 M96 20V6 M104 20V34 M112 20V12 M120 20V30 M128 20V5 M136 20V38 M144 20V7 M152 20V36 M160 20V12 M168 20V32 M176 20V4 M184 20V37 M192 20V8 M200 20V34 M208 20V7 M216 20V38 M224 20V8 M232 20V35 M240 20V13 M248 20V31 M256 20V5 M264 20V39 M272 20V8 M280 20V36 M288 20V11 M296 20V33 M304 20V4 M312 20V38 M320 20V9 M328 20V35 M336 20V7 M344 20V38 M352 20V12 M360 20V31 M368 20V6 M376 20V36 M384 20V8 M392 20V34 M400 20V4 M408 20V39 M416 20V8 M424 20V32 M432 20V13 M440 20V36 M448 20V6 M456 20V38 M464 20V10 M472 20V33 M480 20V5 M488 20V37 M496 20V7 M504 20V39 M512 20V12 M520 20V32 M528 20V4 M536 20V38 M544 20V9 M552 20V35 M560 20V6 M568 20V38 M576 20V11 M584 20V32 M592 20V8 M600 20V37'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 220px 100%;
}

.segment strong {
  position: relative;
  z-index: 1;
}

.segment small {
  display: none;
}

.segment.active {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 2px var(--blue);
}

.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #d03a3a;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82), 0 0 12px rgba(208, 58, 58, 0.72);
}

.ticks {
  position: absolute;
  inset: 0 0 auto;
  height: 24px;
}

.tick {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
}

.editor-header {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.editor-header .eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.editor-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.badge {
  justify-self: start;
  border-radius: 999px;
  background: #edf3f7;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
}

.badge.dirty {
  background: #fff0ed;
  color: var(--changed);
}

.meta-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.meta-summary div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.meta-summary span {
  color: var(--muted);
  font-size: 12px;
}

.meta-summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.validation-panel {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.advanced-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  overflow: hidden;
}

.advanced-panel > summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.advanced-panel[open] {
  display: grid;
  gap: 10px;
  max-height: 330px;
  overflow: auto;
  padding-bottom: 12px;
}

.advanced-panel[open] > summary {
  border-bottom: 1px solid var(--line);
}

.advanced-panel .validation-panel,
.advanced-panel .analysis-tracks,
.advanced-panel .advanced-grid {
  margin: 0 12px;
}

.advanced-grid .token-strip {
  min-height: 42px;
}

.validation-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.validation-summary strong {
  border-radius: 999px;
  padding: 4px 10px;
}

.validation-summary.ok strong {
  background: #e8f6ee;
  color: #207246;
}

.validation-summary.warn strong {
  background: #fff4db;
  color: #9a6500;
}

.validation-summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.validation-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.validation-panel li {
  position: relative;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.validation-panel li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.validation-panel li.ok::before {
  background: #35a268;
}

.validation-panel li.warn::before {
  background: #d68a00;
}

.table-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 8px;
}

.tabs {
  display: flex;
  gap: 4px;
}

.tab,
#playSegment {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}

.tab.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.annotation-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
  padding: 12px;
}

.empty-state {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--muted);
  font-size: 15px;
}

.aligned-table {
  display: grid;
  grid-template-columns: 44px repeat(var(--cols), minmax(42px, 1fr));
  gap: 4px;
  min-width: max-content;
}

.label-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 0 7px;
}

.row-table {
  display: grid;
  gap: 6px;
}

.row-table.compact {
  gap: 8px;
}

.row-line {
  display: grid;
  gap: 4px;
}

.row-line header {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.token-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 8px;
}

.token-cell {
  min-width: 32px;
  min-height: 26px;
  border: 1px solid #efd4c7;
  border-radius: 6px;
  background: #fff;
  color: var(--token);
  padding: 2px 7px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.35;
}

.token-cell:hover {
  border-color: var(--token);
  background: #fff8f5;
}

.token-cell.changed {
  border-color: #ef9a9a;
  background: #fff1f1;
  color: var(--changed);
  font-weight: 800;
}

.savebar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.savebar button,
.savebar button.primary {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font-size: 15px;
}

.comment-panel {
  display: grid;
  /* 标题 / 留言列表（弹性、可滚动）/ 输入框 / 按钮 / 状态 */
  grid-template-rows: auto minmax(48px, 1fr) auto auto auto;
  gap: 10px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.comment-panel label {
  display: grid;
  gap: 8px;
}

.comment-panel-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.comment-list {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 48px;
  overflow-y: auto;
}

.comment-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 8px 10px;
}

.comment-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.delete-comment {
  border: 0;
  background: transparent;
  color: #a13b3b;
  cursor: pointer;
  font: inherit;
  padding: 2px 0;
  white-space: nowrap;
}

.delete-comment:hover {
  color: #6f2424;
}

.comment-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.comment-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.comment-panel textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  font: inherit;
}

.comment-panel button {
  justify-self: end;
  min-height: 36px;
  border: 1px solid var(--teal);
  border-radius: 7px;
  background: #fff;
  color: var(--teal);
  padding: 0 12px;
  font-weight: 800;
}

.comment-panel small {
  color: var(--muted);
}

.savebar button.primary {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.savebar button:hover,
.actions button:hover,
.tab:hover,
#playSegment:hover {
  border-color: var(--teal);
}

dialog {
  width: min(420px, calc(100vw - 32px));
  border: 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 24px 64px rgba(18, 24, 38, 0.24);
}

dialog::backdrop {
  background: rgba(18, 24, 38, 0.42);
}

.dialog-card {
  display: grid;
  gap: 14px;
  background: #fff;
  padding: 18px;
}

.dialog-card header,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog-card h3 {
  margin: 0;
  font-size: 18px;
}

#closeDialog,
#closeLogin {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.dialog-card label {
  display: grid;
  gap: 6px;
}

.dialog-advanced {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 0;
}

.dialog-advanced > summary {
  cursor: pointer;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.dialog-advanced[open] {
  padding-bottom: 10px;
}

.dialog-advanced[open] > summary {
  border-bottom: 1px solid var(--line);
}

.dialog-advanced label {
  margin: 0 10px;
}

.dialog-card label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dialog-card input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
}

.dialog-actions {
  justify-content: flex-end;
}

.dialog-actions button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 0 12px;
}

.dialog-actions button.primary {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.guide-card {
  max-width: 520px;
}

.guide-card ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

.guide-card code {
  border-radius: 4px;
  background: var(--surface-soft);
  padding: 1px 5px;
  color: var(--token);
}

.logged-in-note {
  margin: 0;
  border: 1px solid rgba(53, 162, 104, 0.36);
  border-radius: 8px;
  background: #edf8f2;
  color: #207246;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.5;
}

.login-status {
  min-height: 18px;
  color: var(--teal);
  font-size: 13px;
}

.dialog-actions button[hidden] {
  display: none;
}

@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .media-pane {
    min-height: 640px;
  }
}

@media (max-width: 680px) {
  .workspace {
    min-height: auto;
    padding: 12px;
    gap: 12px;
  }

  .media-pane,
  .editor-pane {
    padding: 14px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .file-select {
    width: 100%;
    font-size: 18px;
  }

  .actions {
    justify-content: flex-end;
  }

  .savebar {
    grid-template-columns: 1fr 1fr;
  }
}

/* Polished workbench skin */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(45, 146, 208, 0.12), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(22, 107, 120, 0.10), transparent 30%),
    linear-gradient(135deg, #eef4f7 0%, #e3ebef 100%);
}

.media-pane,
.editor-pane {
  border-color: rgba(127, 148, 164, 0.35);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(36, 55, 68, 0.14);
}

.file-select {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #4d5f6d 0%, #647786 100%);
  box-shadow: 0 8px 18px rgba(57, 73, 86, 0.18);
}

.status-text {
  border-left: 3px solid #c9d8df;
  padding-left: 12px;
}

.actions button,
.tab,
#playSegment,
.savebar button {
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.actions button:hover,
.tab:hover,
#playSegment:hover,
.savebar button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(36, 55, 68, 0.10);
}

.video-shell {
  border-color: rgba(10, 29, 37, 0.35);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(18, 31, 38, 0.10);
}

.timeline-head {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.timeline-wrap {
  border-color: #c7d7df;
  border-radius: 10px;
  background: #e9f2f6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline {
  background:
    linear-gradient(to bottom, #f4fafc 0 28px, #e4eef4 28px 100%),
    repeating-linear-gradient(90deg, rgba(20, 72, 89, 0.10) 0 1px, transparent 1px 60px);
}

.segment {
  border-color: #94cce9;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(45, 146, 208, 0.12);
}

.segment.active {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px var(--blue), 0 10px 20px rgba(45, 146, 208, 0.20);
}

.editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.editor-header h2 {
  font-size: 30px;
}

.badge {
  align-self: flex-start;
}

.meta-summary,
.advanced-panel,
.table-panel {
  border-color: #cbdbe3;
  border-radius: 10px;
  background: #fbfdfe;
}

.meta-summary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.advanced-panel > summary {
  background: linear-gradient(180deg, #fbfdfe 0%, #f3f8fa 100%);
}

.table-toolbar {
  background: linear-gradient(180deg, #fbfdfe 0%, #f4f8fb 100%);
}

.tab.active {
  border-color: var(--teal);
  background: linear-gradient(135deg, var(--teal) 0%, #218391 100%);
}

.annotation-grid {
  background:
    linear-gradient(180deg, rgba(248, 251, 253, 0.72), rgba(255, 255, 255, 1) 32px),
    #fff;
}

.row-table {
  gap: 14px;
}

.row-line header {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #eef5f8;
  color: #536679;
  padding: 3px 8px;
}

.token-strip {
  border-color: #d3e1e8;
  border-radius: 10px;
  background: #f8fbfd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.token-cell {
  border-color: #f0cbb9;
  border-radius: 8px;
  background: #fffdfb;
  box-shadow: 0 1px 0 rgba(183, 93, 58, 0.08);
  font-weight: 650;
}

.token-cell:hover {
  background: #fff5ef;
  box-shadow: 0 6px 14px rgba(183, 93, 58, 0.12);
}

.savebar {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.savebar button,
.savebar button.primary {
  border-radius: 9px;
}

.savebar button.primary {
  background: linear-gradient(135deg, var(--teal) 0%, #1f7d89 100%);
  box-shadow: 0 10px 22px rgba(22, 107, 120, 0.22);
}

dialog {
  border-radius: 14px;
}

.dialog-card {
  border-radius: 14px;
}

/* Keep the primary annotation panel usable when advanced details are open. */
.editor-pane {
  display: grid;
  /* 行依次为：头部 / 概要 / 高级面板 / 标注表格 / 保存栏 / 留言区 */
  grid-template-rows: auto auto auto minmax(160px, 1.4fr) auto minmax(220px, 1fr);
  align-content: stretch;
}

.advanced-panel {
  min-height: 41px;
}

.advanced-panel[open] {
  gap: 8px;
  max-height: min(220px, 24vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 10px;
}

.advanced-panel[open] > summary {
  position: sticky;
  top: 0;
  z-index: 2;
}

.advanced-panel .validation-panel,
.advanced-panel .analysis-tracks,
.advanced-panel .advanced-grid {
  margin: 0 10px;
}

.advanced-panel .validation-panel {
  gap: 5px;
  padding: 9px;
}

.advanced-panel .validation-panel ul {
  gap: 3px;
}

.advanced-panel .validation-panel li {
  font-size: 11px;
  line-height: 1.25;
}

.advanced-panel .track-chart {
  height: 48px;
}

.table-panel {
  min-height: 0;
  height: 100%;
}