:root {
  --ink: #10242d;
  --ink2: #19343e;
  --paper: #eef2f3;
  --paper2: #fff;
  --line: #cbd6d9;
  --muted: #61737b;
  --cyan: #b8ffdb;
  --cyan2: #42cbb4;
  --amber: #f6b35c;
  --lime: #c7f089;
  --rust: #f46f4d;
  --shadow: 0 14px 40px rgba(26, 54, 65, .1);
}

body { font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
.workspace-view[hidden] { display: none !important; }
.workspace-page { min-height: calc(100vh - 58px); padding: 48px 0 90px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-heading h1 { margin: 0; font: 800 clamp(36px, 5vw, 62px)/1 Inter, "PingFang SC", sans-serif; letter-spacing: -.055em; }
.page-heading p:not(.kicker) { max-width: 680px; margin: 13px 0 0; color: var(--muted); }
.heading-actions { display: flex; gap: 8px; }
.page-action { border: 1px solid #9fb0b5; background: white; padding: 11px 15px; font-weight: 800; font-size: 11px; cursor: pointer; text-decoration: none; }
.page-action:hover { background: var(--cyan); }
.file-action { display: inline-flex; align-items: center; }

.workspace-view[data-view="overview"] .hero { min-height: 460px; padding: 52px 0; }
.workspace-view[data-view="overview"] .hero h1,
.section-head h2,
.dialog-shell h2,
.method-grid h2 { font-family: Inter, "PingFang SC", sans-serif; }
.workspace-view[data-view="overview"] .hero h1 { font-size: clamp(44px, 5vw, 72px); letter-spacing: -.06em; }
.workspace-view[data-view="overview"] .hero-ledger { border-radius: 0; box-shadow: 12px 12px 0 #6ce0ca; }
.workspace-view[data-view="overview"] .hero-ledger strong { font-family: ui-monospace, SFMono-Regular, monospace; }
.workspace-view[data-view="overview"] .section { padding: 60px 0; }
.workspace-view[data-view="overview"] .decision-card { border-radius: 0; }
.catalog-section { padding-top: 48px; }
.catalog-section .section-head h2 { font-size: 52px; }

.compare-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: #dfe7e9; padding: 10px; }
.compare-picker label { background: white; border: 1px solid var(--line); padding: 10px; }
.compare-picker span { display: block; margin-bottom: 6px; color: var(--muted); font: 9px ui-monospace, monospace; }
.compare-picker select { width: 100%; border: 0; background: white; font-weight: 800; outline: 0; }
.workspace-empty { margin-top: 18px; padding: 90px 20px; text-align: center; background: white; border: 1px dashed #aebdc1; }
.workspace-empty b { font-size: 18px; }
.workspace-empty p { color: var(--muted); }
.workspace-empty a { font-weight: 900; color: #087d6a; }
.compare-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.compare-summary article { min-height: 128px; padding: 18px; background: var(--ink); color: white; display: flex; flex-direction: column; align-items: flex-start; }
.compare-summary small { color: #89a0a8; font: 9px ui-monospace, monospace; }
.compare-summary button { border: 0; background: transparent; color: white; padding: 9px 0; text-align: left; font-weight: 900; font-size: 16px; cursor: pointer; }
.compare-summary .robot-tag { margin-top: auto; color: var(--ink); }
.comparison-workspace { margin-top: 8px; overflow: auto; background: white; border: 1px solid var(--line); }
.comparison-workspace table { min-width: 1000px; }
.comparison-workspace th { position: static; background: #dfe7e9; }
.comparison-workspace thead th { background: #15303a; color: white; }
.comparison-workspace tbody th { width: 150px; }
.comparison-workspace td { min-width: 220px; }

.annotation-layout { display: grid; grid-template-columns: 230px minmax(420px, 1fr) 290px; gap: 10px; align-items: start; }
.asset-browser,
.annotation-canvas,
.annotation-form,
.annotation-log { background: white; border: 1px solid var(--line); }
.asset-browser,
.annotation-form { padding: 14px; }
.work-panel-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.work-panel-title b { font-size: 12px; }
.work-panel-title span { font: 9px ui-monospace, monospace; color: var(--muted); }
.asset-browser label,
.annotation-form label { display: grid; gap: 6px; margin: 12px 0; color: var(--muted); font-size: 10px; font-weight: 800; }
.asset-browser select,
.annotation-form select,
.annotation-form input,
.annotation-form textarea { width: 100%; border: 1px solid var(--line); background: #f7f9f9; padding: 10px; outline: 0; }
.annotation-assets { display: grid; gap: 6px; }
.annotation-asset { border: 1px solid var(--line); background: white; padding: 11px; text-align: left; cursor: pointer; }
.annotation-asset.active { border-color: #27a88f; background: #e8fff7; }
.annotation-asset span,
.annotation-asset b,
.annotation-asset small { display: block; }
.annotation-asset span { font: 8px ui-monospace, monospace; color: #168673; }
.annotation-asset b { margin: 4px 0; font-size: 11px; }
.annotation-asset small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.annotation-canvas { padding: 14px; }
.annotation-stage { position: relative; background: #081117; min-height: 440px; display: grid; place-items: center; overflow: hidden; }
.annotation-stage video,
.annotation-stage img { display: block; width: 100%; height: 440px; object-fit: contain; }
.stage-empty { color: #76909b; }
.media-note { position: absolute; left: 12px; bottom: 12px; background: #10242de8; color: white; padding: 7px 10px; font: 9px ui-monospace, monospace; }
.timeline-shell { padding: 14px 0 7px; }
.annotation-timeline { height: 52px; position: relative; background: repeating-linear-gradient(90deg, #edf2f3 0, #edf2f3 calc(10% - 1px), #cbd6d9 calc(10% - 1px), #cbd6d9 10%); overflow: hidden; }
.annotation-timeline button { position: absolute; top: 13px; height: 26px; min-width: 3px; border: 0; background: #f46f4dcc; color: white; font-size: 8px; overflow: hidden; cursor: pointer; }
.timeline-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #10242d; z-index: 2; }
.transport { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 8px; }
.transport button { border: 1px solid var(--line); background: white; padding: 7px 10px; cursor: pointer; font-size: 10px; font-weight: 800; }
.transport span { font: 10px ui-monospace, monospace; }
.save-annotation { width: 100%; border: 0; background: #1a9a83; color: white; padding: 13px; font-weight: 900; cursor: pointer; }
.annotation-log { margin-top: 10px; padding: 14px; }
.annotation-log article { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #e1e8ea; }
.annotation-log article span { display: inline-block; margin-right: 8px; padding: 3px 6px; background: #dff4ed; color: #156d5f; font-size: 8px; }
.annotation-log article b { font-size: 12px; }
.annotation-log article small { display: block; margin-top: 5px; color: var(--muted); font: 9px ui-monospace, monospace; }
.annotation-log article p { margin: 6px 0 0; color: #52636a; font-size: 11px; }
.annotation-log article > button { border: 0; background: transparent; color: #a65b47; cursor: pointer; font-size: 20px; }
.log-empty { padding: 40px; text-align: center; color: var(--muted); }

.resource-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.resource-kpis article { background: white; border: 1px solid var(--line); padding: 16px; }
.resource-kpis b,
.resource-kpis span { display: block; }
.resource-kpis b { font: 800 30px/1 ui-monospace, SFMono-Regular, monospace; }
.resource-kpis span { margin-top: 7px; color: var(--muted); font-size: 10px; }
.resource-toolbar { display: grid; grid-template-columns: 1fr 180px 180px; gap: 8px; margin: 14px 0; }
.resource-toolbar select { border: 1px solid var(--line); background: white; padding: 0 11px; }
.resource-table-wrap { max-height: 690px; overflow: auto; border: 1px solid var(--line); background: white; }
.resource-table { min-width: 1050px; }
.resource-table th { top: 0; }
.resource-table td:first-child button { display: block; border: 0; background: transparent; padding: 0; font-weight: 900; cursor: pointer; }
.resource-table td:first-child small,
.resource-table td:nth-child(5) small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }
.resource-status { display: inline-block; padding: 4px 7px; font-size: 9px; font-weight: 900; }
.resource-status.verified { background: #c9f4df; color: #176a55; }
.resource-status.partial { background: #fff0c7; color: #7a5913; }
.resource-status.entry { background: #dae8f4; color: #365a78; }
.resource-status.none { background: #e7e9e9; color: #69777c; }
.no-download { display: inline-block; padding: 5px 7px; background: #ffe1d8; color: #9f3f25; font-size: 9px; font-weight: 900; }

.workspace-brand .brand-mark { font: 900 15px/1 "PingFang SC", sans-serif; }
.dashboard-command { padding-top: 28px; }
.dashboard-company { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.dashboard-company b { font-size: 18px; letter-spacing: .05em; }
.dashboard-company span { color: #268a78; font: 800 10px ui-monospace, monospace; letter-spacing: .15em; }
.dashboard-company small { margin-left: auto; color: var(--muted); font: 9px ui-monospace, monospace; }
.dashboard-search { display: grid; grid-template-columns: 46px 1fr auto; min-height: 66px; background: white; border: 1px solid #aebdc1; box-shadow: 0 10px 30px rgba(25, 53, 63, .08); }
.dashboard-search > span { display: grid; place-items: center; font-size: 24px; color: #1a9a83; }
.dashboard-search input { border: 0; min-width: 0; outline: 0; background: transparent; font-size: 15px; }
.dashboard-search button { border: 0; margin: 8px; min-width: 100px; background: var(--ink); color: white; font-weight: 900; cursor: pointer; }
.dashboard-search button:hover { background: #1a9a83; }
.dashboard-tabs { display: flex; margin-top: 12px; border-bottom: 1px solid var(--line); }
.dashboard-tabs button { min-width: 180px; padding: 15px 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; text-align: left; cursor: pointer; }
.dashboard-tabs button.active { color: #0e7867; border-bottom-color: #1a9a83; background: #e5f3f0; }
.dashboard-tabs span,
.dashboard-tabs small { display: block; }
.dashboard-tabs span { font-weight: 900; }
.dashboard-tabs small { margin-top: 4px; color: var(--muted); font: 8px ui-monospace, monospace; }
.dashboard-panel[hidden] { display: none !important; }
.dashboard-samples { padding: 64px 0 86px; }
.dashboard-samples > header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.dashboard-samples h2 { margin: 0; font-size: 38px; letter-spacing: -.04em; }
.dashboard-samples > header button { border: 0; background: transparent; color: #107765; font-weight: 900; cursor: pointer; }
.dashboard-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dashboard-video-card { min-width: 0; background: white; border: 1px solid var(--line); }
.video-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; background: #071116; overflow: hidden; cursor: zoom-in; }
.video-thumb video,
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.video-thumb i { position: absolute; top: 10px; left: 10px; padding: 5px 7px; background: #10242ddd; color: #b8ffdb; font: 8px ui-monospace, monospace; font-style: normal; }
.expand-media { position: absolute; inset: auto 10px 10px auto; padding: 7px 9px; background: #fff; color: var(--ink); font-size: 9px; font-weight: 900; opacity: 0; transform: translateY(4px); transition: .18s; }
.video-thumb:hover .expand-media,
.video-thumb:focus-visible .expand-media { opacity: 1; transform: translateY(0); }
.dashboard-video-card > div { padding: 14px; }
.dashboard-video-card small,
.dashboard-video-card b,
.dashboard-video-card p { display: block; }
.dashboard-video-card small { color: #168673; font: 8px ui-monospace, monospace; }
.dashboard-video-card b { margin-top: 6px; font-size: 15px; }
.dashboard-video-card p { margin: 5px 0; color: var(--muted); font-size: 11px; }
.dashboard-video-card footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e2e8ea; color: var(--muted); font-size: 8px; }
.search-count { min-width: 90px; padding: 12px; background: var(--ink); color: white; text-align: center; font: 800 11px ui-monospace, monospace; }
.dashboard-search-results { display: grid; gap: 7px; }
.dashboard-search-results > article { display: grid; grid-template-columns: minmax(230px, 1.2fr) minmax(190px, .8fr) minmax(180px, .8fr) 150px; gap: 18px; align-items: center; padding: 16px 18px; background: white; border: 1px solid var(--line); }
.search-result-main small { color: #168673; font: 8px ui-monospace, monospace; }
.search-result-main button { display: block; margin-top: 4px; padding: 0; border: 0; background: transparent; text-align: left; font-size: 14px; font-weight: 900; cursor: pointer; }
.search-result-main p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.search-result-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.search-result-meta span { padding: 4px 6px; background: #edf3f2; font-size: 8px; }
.search-result-scale small,
.search-result-scale b { display: block; }
.search-result-scale small { color: var(--muted); font: 8px ui-monospace, monospace; }
.search-result-scale b { margin-top: 5px; font-size: 10px; }
.search-result-action { display: grid; justify-items: start; gap: 7px; }
.search-result-action button { border: 1px solid #8caaa4; background: #e7fff6; padding: 6px 8px; color: #0e705f; font-size: 9px; font-weight: 900; cursor: pointer; }
.search-result-action > span:not(.robot-tag) { color: var(--muted); font-size: 9px; }
.media-inspector-shell { position: relative; width: min(1450px, calc(100% - 28px)); max-height: calc(100vh - 28px); overflow: auto; margin: 14px auto; background: #f3f6f6; padding: 28px; box-shadow: var(--shadow); }
.inspector-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 20px; padding-right: 54px; }
.inspector-head h2 { margin: 0; font-size: clamp(32px, 4vw, 54px); letter-spacing: -.05em; }
.inspector-head > div > p:last-child { margin: 7px 0 0; color: var(--muted); }
.inspector-head > button { border: 0; background: #1a9a83; color: white; padding: 12px 15px; font-weight: 900; cursor: pointer; }
.media-inspector-grid { display: grid; grid-template-columns: minmax(480px, 1.45fr) minmax(330px, .55fr); gap: 12px; }
.inspector-media { background: #071116; }
.inspector-media video,
.inspector-media img { display: block; width: 100%; height: min(62vh, 660px); object-fit: contain; }
.inspector-media > div { padding: 10px 13px; color: #94a9b1; font: 9px ui-monospace, monospace; }
.inspector-meta { display: grid; gap: 7px; align-content: start; }
.inspector-meta article { background: white; border: 1px solid var(--line); padding: 14px; }
.inspector-meta small,
.inspector-meta b { display: block; }
.inspector-meta small { margin-bottom: 6px; color: var(--muted); font: 8px ui-monospace, monospace; }
.inspector-meta b { font-size: 11px; }
.inspector-annotations { margin-top: 12px; background: white; border: 1px solid var(--line); padding: 15px; }
.inspector-annotations header { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.inspector-annotations header span { color: var(--muted); font-size: 9px; }
.inspector-annotations article { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e4eaec; }
.inspector-annotations article > span { color: #0f7463; font-size: 9px; }
.inspector-annotations article small { color: var(--muted); font: 9px ui-monospace, monospace; }
.inspector-annotations article p { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: 10px; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid #f6b35c; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 1200px) {
  .annotation-layout { grid-template-columns: 210px 1fr; }
  .annotation-form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .annotation-form .work-panel-title { grid-column: 1 / -1; }
  .annotation-form label { margin: 0; }
  .annotation-form .save-annotation { align-self: end; }
  .resource-kpis { grid-template-columns: repeat(3, 1fr); }
  .dashboard-search-results > article { grid-template-columns: 1fr 1fr; }
  .media-inspector-grid { grid-template-columns: 1fr; }
  .inspector-meta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .workspace-page { min-height: calc(100vh - 116px); }
  .compare-picker,
  .compare-summary { grid-template-columns: 1fr 1fr; }
  .annotation-layout { grid-template-columns: 1fr; }
  .annotation-form { grid-column: auto; display: block; }
  .annotation-stage,
  .annotation-stage video,
  .annotation-stage img { height: 360px; min-height: 360px; }
  .resource-toolbar { grid-template-columns: 1fr 1fr; }
  .resource-toolbar .search { grid-column: 1 / -1; }
  .dashboard-video-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-tabs { overflow-x: auto; }
  .dashboard-tabs button { min-width: 150px; }
}

@media (max-width: 600px) {
  .page-heading { display: block; }
  .heading-actions { margin-top: 16px; }
  .compare-picker,
  .compare-summary,
  .resource-kpis { grid-template-columns: 1fr; }
  .annotation-stage,
  .annotation-stage video,
  .annotation-stage img { height: 260px; min-height: 260px; }
  .resource-toolbar { grid-template-columns: 1fr; }
  .resource-toolbar .search { grid-column: auto; }
  .dashboard-company small { display: none; }
  .dashboard-search { grid-template-columns: 38px 1fr; }
  .dashboard-search button { grid-column: 1 / -1; min-height: 42px; }
  .dashboard-video-grid,
  .dashboard-search-results > article,
  .inspector-meta { grid-template-columns: 1fr; }
  .media-inspector-shell { padding: 18px; }
  .inspector-head { display: block; }
  .inspector-head > button { margin-top: 12px; }
  .inspector-media video,
  .inspector-media img { height: 44vh; }
}