:root {
  --blue: #0059ff;
  --blue-soft: #2d7dff;
  --blue-wash: #eaf1ff;
  --ink: #06141b;
  --deep: #071116;
  --deep-2: #0c1b22;
  --teal: #17313b;
  --slate: #426372;
  --muted: #728590;
  --line: #dfe6ea;
  --paper: #f9f9f9;
  --white: #fff;
  --success: #13a77a;
  --warning: #d99415;
  --danger: #d94b51;
  --purple: #806cff;
  --radius: 10px;
  --shadow: 0 12px 35px rgba(6, 20, 27, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.studio-shell {
  --sidebar-width: 246px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--paper);
  transition: grid-template-columns .2s ease;
}
.studio-shell.sidebar-collapsed { --sidebar-width: 70px; }
.studio-shell.landing-mode,.studio-shell.landing-mode.sidebar-collapsed { --sidebar-width: 0; display: block; }
.landing-mode .sidebar { display: none; }
.landing-mode .studio-main { width: 100%; }
.sidebar {
  position: sticky;
  z-index: 70;
  top: 0;
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #d7e1e6;
  background: var(--deep);
  border-right: 1px solid rgba(255,255,255,.08);
  isolation: isolate;
  transform: translateZ(0);
}
.sidebar-brand { height: 70px; flex: 0 0 70px; display: flex; align-items: center; gap: 8px; padding: 0 13px 0 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-wordmark { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; overflow: hidden; text-decoration: none; white-space: nowrap; }
.sidebar-wordmark img { flex: 0 0 auto; width: 126px; height: 39px; object-fit: contain; object-position: left center; }
.sidebar-wordmark span { padding-left: 11px; border-left: 1px solid rgba(255,255,255,.19); color: #9fb2bc; font-size: 8px; font-weight: 800; letter-spacing: 1.8px; }
.sidebar-toggle { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: #a6b7c0; background: rgba(255,255,255,.045); cursor: pointer; font-size: 17px; transition: .18s; }
.sidebar-toggle:hover { color: white; background: rgba(255,255,255,.1); }
.side-nav { display: flex; flex-direction: column; gap: 4px; padding: 15px 10px 10px; }
.side-nav a { min-height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 9px; color: #9db0ba; text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; transition: .15s; }
.side-nav a:hover { color: white; background: rgba(255,255,255,.06); }
.side-nav a.active { color: white; background: rgba(0,89,255,.2); box-shadow: inset 2px 0 0 var(--blue); }
.side-nav svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-section { min-height: 0; padding: 12px 10px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-section-head { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #667d88; font-size: 8px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.sidebar-section-head a { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #93a8b2; text-decoration: none; font-size: 15px; }
.sidebar-section-head a:hover { color: white; background: rgba(255,255,255,.08); }
.sidebar-projects { max-height: 36vh; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.sidebar-projects a { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 9px; overflow: hidden; border-radius: 8px; color: #91a5af; text-decoration: none; font-size: 10px; white-space: nowrap; }
.sidebar-projects a:hover,.sidebar-projects a.active { color: white; background: rgba(255,255,255,.055); }
.sidebar-projects i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 3px; background: var(--project-color); }
.sidebar-projects span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-spacer { flex: 1; }
.sidebar-new { min-height: 39px; display: flex; align-items: center; gap: 10px; margin: 8px 10px; padding: 0 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; color: #b8c8cf; text-decoration: none; font-size: 10px; white-space: nowrap; }
.sidebar-new:hover { color: white; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.sidebar-new span { color: #6f9dff; font-size: 16px; }.sidebar-new b { font-weight: 650; }
.sidebar-user { min-height:54px;display:flex;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid rgba(255,255,255,.07);white-space:nowrap;overflow:hidden; }
.sidebar-user:empty { display:none; }.sidebar-user > img,.sidebar-user > i { width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;border-radius:7px;color:white;background:#26404c;object-fit:cover;font-size:9px;font-style:normal;font-weight:750; }
.sidebar-user > span { min-width:0;flex:1; }.sidebar-user b,.sidebar-user small { display:block;overflow:hidden;text-overflow:ellipsis; }.sidebar-user b { color:#dce6ea;font-size:8px; }.sidebar-user small { margin-top:2px;color:#708792;font-size:6px; }.sidebar-user > a { color:#6f8792;text-decoration:none;font-size:12px; }.sidebar-user > a:hover { color:white; }
.sidebar-service { height: 51px; flex: 0 0 51px; display: flex; align-items: center; gap: 9px; padding: 0 21px; color: #728995; border-top: 1px solid rgba(255,255,255,.07); font-size: 9px; white-space: nowrap; }
.sidebar-service i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #32d9a1; box-shadow: 0 0 14px rgba(50,217,161,.7); }
.sidebar-brand,.side-nav,.sidebar-section,.sidebar-new,.sidebar-service { position: relative; z-index: 1; transform: translateZ(0); }
.sidebar-collapsed .sidebar-brand { padding-left: 18px; }
.sidebar-collapsed .sidebar-wordmark { width: 31px; flex: 0 0 31px; }
.sidebar-collapsed .sidebar-wordmark img { width: 126px; }
.sidebar-collapsed .sidebar-wordmark span,
.sidebar-collapsed .side-nav span,
.sidebar-collapsed .sidebar-section,
.sidebar-collapsed .sidebar-new b,
.sidebar-collapsed .sidebar-service span { display: none; }
.sidebar-collapsed .sidebar-user { justify-content:center;padding:7px 0; }.sidebar-collapsed .sidebar-user > span,.sidebar-collapsed .sidebar-user > a { display:none; }
.sidebar-collapsed .sidebar-toggle { position: absolute; right: -12px; top: 22px; color: #d4e0e5; background: #17303a; transform: rotate(180deg); }
.sidebar-collapsed .side-nav { padding-left: 10px; padding-right: 10px; }
.sidebar-collapsed .side-nav a { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-new { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-service { justify-content: center; padding: 0; }
.studio-main { min-width: 0; }
.mobile-sidebar-toggle { display: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; cursor: pointer; }
.landing-brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; }
.landing-brand img { width: 123px; height: 38px; object-fit: contain; object-position: left center; }
.landing-brand span { padding-left: 11px; border-left: 1px solid rgba(255,255,255,.2); color: #91a7b1; font-size: 8px; font-weight: 800; letter-spacing: 1.8px; }

#app { min-height: 100vh; }
.shell { width: min(1560px, calc(100% - 28px)); margin: 0 auto; }
.tool-shell { width: calc(100% - 20px); max-width: none; margin: 0 auto; }
.route-loading { min-height: 70vh; display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--muted); font-size: 12px; }
.route-loading i { width: 14px; height: 14px; border: 2px solid #d4dfe4; border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-gate { min-height:100vh;display:grid;place-items:center;padding:24px;color:white;background:radial-gradient(700px 420px at 70% 15%,rgba(0,89,255,.22),transparent),var(--deep); }
.auth-panel { width:min(430px,100%);padding:28px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(12,27,34,.94);box-shadow:0 35px 100px rgba(0,0,0,.35); }
.auth-panel > img { width:145px;height:44px;object-fit:contain;object-position:left center;vertical-align:middle; }.auth-product { margin-left:11px;padding-left:11px;border-left:1px solid rgba(255,255,255,.18);color:#91a7b1;font-size:8px;font-weight:800;letter-spacing:1.8px; }
.auth-panel .kicker { margin-top:35px; }.auth-panel h1 { margin:8px 0;font-size:28px;letter-spacing:-1px; }.auth-panel p { margin:0;color:#95a9b2;font-size:11px;line-height:1.6; }.auth-panel .auth-login { width:100%;min-height:43px;margin-top:23px;font-size:11px; }.auth-panel > small { display:block;margin-top:12px;color:#607984;font-size:7px;line-height:1.5;text-align:center; }.auth-panel code { display:block;margin-top:18px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#9fc0ff;background:#071116;font-size:8px;word-break:break-all; }

.home { color: white; background: var(--deep); min-height: calc(100vh - 58px); overflow: hidden; }
.home-hero { position: relative; min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; padding: 76px 0 95px; }
.home-hero::before { content: ""; position: absolute; width: 720px; height: 720px; right: -230px; top: -310px; border: 1px solid rgba(0,89,255,.35); border-radius: 50%; box-shadow: 0 0 0 90px rgba(0,89,255,.035), 0 0 0 210px rgba(0,89,255,.02); }
.home-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, black, transparent 88%); }
.home-copy, .home-visual { position: relative; z-index: 2; }
.home-brand { display:flex;align-items:center;gap:11px;width:max-content;margin-bottom:34px;color:white;text-decoration:none; }.home-brand img { width:136px;height:42px;object-fit:contain;object-position:left center; }.home-brand span { padding-left:10px;border-left:1px solid rgba(255,255,255,.2);color:#91a7b1;font-size:8px;font-weight:800;letter-spacing:1.8px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #8eb4ff; font-size: 10px; font-weight: 750; letter-spacing: 2.3px; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 25px; height: 2px; background: var(--blue); }
.home h1 { max-width: 720px; margin: 22px 0 25px; font-size: clamp(48px, 6vw, 82px); line-height: .99; font-weight: 580; letter-spacing: -4.8px; }
.home h1 em { color: #6d9eff; font-style: normal; }
.home-copy > p { max-width: 650px; margin: 0; color: #a6b7bf; font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; gap: 11px; margin-top: 35px; }
.button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid transparent; border-radius: 7px; background: var(--blue); color: white; text-decoration: none; cursor: pointer; font-size: 10px; font-weight: 670; transition: .18s ease; }
.button:hover { background: #1b69ff; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,89,255,.22); }
.button.secondary { border-color: rgba(255,255,255,.17); color: #d4dfe4; background: rgba(255,255,255,.045); }
.button.secondary:hover { background: rgba(255,255,255,.09); box-shadow: none; }
.button.ghost { border-color: var(--line); color: var(--ink); background: white; }
.button.ghost:hover { border-color: #b7c6ce; box-shadow: none; }
.button.small { min-height: 30px; padding: 0 10px; font-size: 9px; }.button small { color: inherit; opacity: .65; font-size: 8px; }
.button.danger { background: #c73842; }.button.danger:hover { background: #b52b35; box-shadow: 0 8px 20px rgba(199,56,66,.2); }
.button:disabled { opacity: .5; cursor: wait; transform: none; }
.home-visual { min-height: 455px; }
.visual-card { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 23px; background: linear-gradient(145deg, rgba(26,52,64,.9), rgba(8,22,29,.96)); box-shadow: 0 35px 100px rgba(0,0,0,.35); }
.visual-main { width: 84%; right: 0; top: 25px; padding: 23px; transform: rotate(2.2deg); }
.visual-mini { z-index: 3; width: 54%; left: 0; bottom: 5px; padding: 19px; transform: rotate(-3deg); }
.visual-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; color: #c6d3d9; font-size: 11px; }
.visual-head i { width: 8px; height: 8px; border-radius: 50%; background: #32d9a1; }
.fake-image { position: relative; height: 230px; overflow: hidden; border-radius: 15px; background: linear-gradient(145deg,#101b2c,#345980); }
.fake-image::before { content: ""; position: absolute; width: 190px; height: 65px; left: 50%; top: 50%; border: 10px solid #82adff; border-radius: 50%; transform: translate(-50%,-50%) rotate(-13deg); box-shadow: inset 0 0 25px #0059ff, 0 0 35px rgba(0,89,255,.45); }
.fake-image::after { content: ""; position: absolute; width: 65px; height: 65px; border-radius: 50%; background: #eef4ff; left: 48%; top: 48%; transform: translate(-50%,-50%); box-shadow: 0 12px 35px #06141b; }
.fake-chart { height: 115px; border-radius: 12px; background: linear-gradient(180deg,rgba(0,89,255,.2),transparent), repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(255,255,255,.06) 29px), #0c1d26; clip-path: polygon(0 73%,7% 66%,14% 70%,21% 44%,28% 58%,35% 37%,42% 50%,49% 25%,56% 38%,63% 17%,70% 30%,77% 12%,84% 25%,91% 7%,100% 14%,100% 100%,0 100%); }
.visual-metric { display: flex; justify-content: space-between; align-items: flex-end; }
.visual-metric strong { font-size: 32px; letter-spacing: -1.5px; }.visual-metric span { color: #8ea4ae; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.home-features { padding: 80px 0 100px; background: #0b1a21; border-top: 1px solid rgba(255,255,255,.07); }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.09); }
.feature { min-height: 210px; padding: 27px; background: #0b1a21; }.feature b { display: block; color: var(--blue-soft); font-size: 11px; letter-spacing: 1.4px; }.feature h3 { margin: 29px 0 10px; font-size: 16px; }.feature p { margin: 0; color: #8097a2; font-size: 12px; line-height: 1.65; }

.page { padding: 24px 0 50px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.breadcrumbs { display: flex; gap: 7px; align-items: center; margin-bottom: 10px; color: #81939c; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; }.breadcrumbs a { text-decoration: none; }.breadcrumbs a:hover { color: var(--blue); }
.page-head h1 { margin: 0; font-size: clamp(26px,3vw,38px); line-height: 1; letter-spacing: -1.5px; font-weight: 620; }
.page-head p { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.head-actions { display: flex; gap: 9px; }
.kicker { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; }

.stats-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-bottom: 13px; }
.stat-card, .card { border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 12px 45px rgba(25,55,68,.045); }
.stat-card { padding: 12px 14px; }.stat-card span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .8px; }.stat-card strong { display: block; margin-top: 5px; color: var(--ink); font-size: 22px; letter-spacing: -.8px; }.stat-card strong.blue { color: var(--blue); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 10px; align-items: start; }
.card-head { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 8px 14px; border-bottom: 1px solid var(--line); }.card-head h2 { margin: 0; font-size: 13px; }.card-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.card-body { padding: 13px; }
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.project-card { position: relative; min-height: 142px; padding: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: white; text-decoration: none; transition: .15s; }.project-card:hover { border-color: #aec2cc; box-shadow: var(--shadow); }.project-card::before { content: ""; position: absolute; width: 78px; height: 78px; right: -31px; top: -35px; border-radius: 50%; background: var(--project-color,#0059ff); opacity: .1; }.project-card .project-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--project-color,#0059ff); font-size: 10px; font-weight: 750; }.project-card h3 { max-width:calc(100% - 98px);margin: 10px 0 3px; font-size: 13px; }.project-card > p { max-width:calc(100% - 98px);min-height: 25px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.35; }.project-facts { display: flex; gap: 11px; margin-top: 10px; color: #617782; font-size: 8px; }.project-facts b { color: var(--ink); }
.project-thumbnail { position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(111,135,147,.25);background:linear-gradient(145deg,#dce6eb,#bacbd3);color:#78909b; }.project-thumbnail > span { font-size:14px; }.project-thumbnail img { position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover; }.project-thumbnail.failed img { display:none; }.card-thumbnail { position:absolute;z-index:1;right:12px;top:31px;width:86px;height:64px;border-radius:7px;box-shadow:0 5px 14px rgba(7,24,32,.12); }.project-card:hover .card-thumbnail img { transform:scale(1.025); }.card-thumbnail img { transition:transform .18s; }
.run-list { display: flex; flex-direction: column; }
.dashboard-runs { max-height: 690px; overflow: auto; scrollbar-width: thin; }
.run-row { display: grid; grid-template-columns: minmax(170px,1fr) 90px 86px 120px; align-items: center; gap: 14px; min-height: 66px; padding: 10px 20px; border-bottom: 1px solid var(--line); text-decoration: none; transition: .15s; }.run-row:last-child { border-bottom: 0; }.run-row:hover { background: #f7f9fa; }.run-name { min-width: 0; }.run-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.run-name span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }.run-score { font-size: 12px; font-weight: 650; }.run-score small { display: block; color: var(--muted); font-size: 8px; font-weight: 550; text-transform: uppercase; }.mini-chart { width: 120px; height: 38px; }
.run-row.recommended { background: linear-gradient(90deg,#f3f7ff 0,#fff 46%); box-shadow: inset 3px 0 0 var(--blue); }.best-model { display: inline-flex; margin-left: 9px; padding: 3px 6px; border-radius: 99px; color: #075add; background: #e6efff; font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; vertical-align: 1px; }
.status { display: inline-flex; width: max-content; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 99px; color: #5d747f; background: #edf1f3; font-size: 8px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; }.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status.completed { color: #087958; background: #e5f6f0; }.status.training,.status.evaluating,.status.exporting,.status.validating,.status.queued { color: #075add; background: #e6efff; }.status.failed { color: #b6323a; background: #fae9ea; }
.empty { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--muted); }.empty-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-wash); font-size: 18px; }.empty h3 { margin: 9px 0 4px; color: var(--ink); font-size: 12px; }.empty p { max-width: 420px; margin: 0 0 11px; font-size: 9px; line-height: 1.4; }

.project-top { position: relative; padding-top: 15px; background: linear-gradient(110deg,#08171e,#102a35); color: white; }.project-top::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 110px at 86% 0,rgba(0,89,255,.2),transparent); }.project-top .shell { position: relative; z-index: 1; }.project-title { display: flex; align-items: center; gap: 9px; }.project-title .project-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--project-color); font-size: 11px; font-weight: 750; }.header-thumbnail { width:54px;height:36px;flex:0 0 54px;border-radius:6px;border-color:rgba(255,255,255,.14);background:#18303b;color:#708792; }.project-title > div { min-width: 0; }.project-title h1 { margin: 0 0 3px; font-size: 21px; letter-spacing: -.7px; }.project-title p { max-width: min(850px,70vw); margin: 0; overflow: hidden; color: #8fa5ae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.project-delete { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #8da0a9; background: rgba(255,255,255,.03); cursor: pointer; font-size: 8px; }.project-delete:hover { color: #ffb7bc; border-color: rgba(255,120,130,.35); background: rgba(201,54,64,.12); }.project-tabs { display: flex; gap: 2px; margin-top: 11px; }.project-tabs a { position: relative; padding: 10px 12px; color: #849aa4; text-decoration: none; font-size: 9px; font-weight: 650; }.project-tabs a:hover,.project-tabs a.active { color: white; }.project-tabs a.active::after { content: ""; position: absolute; height: 2px; left: 10px; right: 10px; bottom: 0; border-radius: 2px 2px 0 0; background: var(--blue); }
.project-access { margin-left:auto;padding:5px 8px;border:1px solid rgba(78,132,255,.3);border-radius:6px;color:#aac4ff;background:rgba(0,89,255,.12);cursor:pointer;font-size:8px; }.project-access:hover { color:white;border-color:rgba(90,140,255,.55);background:rgba(0,89,255,.22); }.project-title .project-access + .project-delete { margin-left:0; }
.role-badge { display:inline-flex;align-items:center;justify-content:center;min-width:45px;padding:3px 6px;border-radius:99px;color:#526c78;background:#eaf0f3;font-size:7px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.4px; }.project-title > .role-badge { color:#9eb6c2;background:rgba(255,255,255,.08); }.role-badge.owner { color:#075add;background:#e6efff; }.project-title > .role-badge.owner { color:#aac8ff;background:rgba(0,89,255,.2); }.role-badge.admin { color:#6b4bd0;background:#f0ebff; }.role-badge.editor { color:#087958;background:#e5f6f0; }
.access-modal { width:min(620px,100%); }.access-note { margin:0 0 10px;color:var(--muted);font-size:9px;line-height:1.5; }.member-loading { padding:24px;color:var(--muted);font-size:9px;text-align:center; }.member-list { border:1px solid var(--line);border-radius:7px;overflow:hidden; }.member-row { min-height:49px;display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid var(--line); }.member-row:last-child { border:0; }.member-row > img,.member-row > i { width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:7px;color:white;background:#294a59;object-fit:cover;font-size:9px;font-style:normal;font-weight:750; }.member-row > span { min-width:0;flex:1; }.member-row b,.member-row small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.member-row b { font-size:9px; }.member-row small { margin-top:2px;color:var(--muted);font-size:7px; }.member-row .icon-btn { margin-left:2px; }.member-form { display:grid;grid-template-columns:minmax(220px,1fr) 120px auto;align-items:end;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line); }.member-form .form-error { grid-column:1/-1; }
.read-only-note { margin-bottom:8px;padding:7px 9px;border:1px solid #c9d9e1;border-radius:6px;color:#466270;background:#eef4f7;font-size:8px; }
.project-page { padding: 12px 0 42px; }
.project-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.dataset-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }.summary-cell { min-height: 68px; padding: 12px; background: white; }.summary-cell span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }.summary-cell strong { display: block; margin-top: 5px; font-size: 17px; }.warning { padding: 8px 10px; border: 1px solid #f1d79f; border-radius: 7px; color: #8a6110; background: #fff8e8; font-size: 9px; line-height: 1.4; }
.shard-table { width: 100%; border-collapse: collapse; }.shard-table th { padding: 10px 13px; color: var(--muted); background: #f7f9fa; text-align: left; font-size: 8px; text-transform: uppercase; letter-spacing: .8px; }.shard-table td { padding: 13px; border-top: 1px solid var(--line); font-size: 10px; }.shard-table code { font-size: 9px; color: #58707c; }

.upload-card { max-width: 760px; margin: 14px auto; padding: 18px; }.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }.field > span { color: #536b76; font-size: 9px; font-weight: 700; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.input, .field input, .field select, .field textarea { width: 100%; min-height: 35px; padding: 0 9px; outline: none; border: 1px solid #d6e0e5; border-radius: 7px; color: var(--ink); background: white; font-size: 10px; }.field textarea { min-height: 72px; padding: 9px; resize: vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color: #88adf5; box-shadow: 0 0 0 3px rgba(0,89,255,.08); }.dropzone { position: relative; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; border: 1px dashed #abc1cd; border-radius: 9px; color: var(--muted); background: #f7f9fb; text-align: center; cursor: pointer; transition: .18s; }.dropzone:hover,.dropzone.drag { color: var(--blue); border-color: var(--blue); background: #f0f5ff; }.dropzone input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }.dropzone b { margin: 6px 0 3px; color: var(--ink); font-size: 11px; }.dropzone small { font-size: 9px; }.drop-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-wash); font-size: 16px; }.file-summary { max-width: 90%; margin-top: 7px; overflow: hidden; color: var(--blue); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.form-error { min-height: 14px; margin: 5px 0; color: var(--danger); font-size: 9px; }.dense-form h2 { margin: 5px 0 12px; font-size: 16px; }

.tool-frame { overflow: hidden; border: 1px solid #cad6dc; border-radius: 8px; background: white; }
.dataset-workspace { min-width: 0; display: grid; grid-template-columns: 238px minmax(0,1fr); align-items: stretch; overflow: hidden; border: 1px solid #cad6dc; border-radius: 8px; background: white; }.dataset-workspace > .tool-frame { border: 0; border-left: 1px solid #cad6dc; border-radius: 0; }.dataset-shard-rail { min-width: 0; display: flex; flex-direction: column; background: #f6f8f9; }.dataset-shard-rail > header { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 9px; border-bottom: 1px solid var(--line); background: white; }.dataset-shard-rail header b { display:block;font-size:10px; }.dataset-shard-rail header span { display:block;margin-top:2px;color:var(--muted);font-size:7px; }.dataset-shard-rail .select-all-shards { width:auto;min-width:29px;padding:0 6px;font-size:7px; }.dataset-shard-list { min-height: 210px; max-height: 515px; flex: 1; overflow: auto; padding: 5px; scrollbar-width: thin; }.dataset-shard-item { min-height: 52px; display: grid; grid-template-columns: auto 5px minmax(0,1fr) auto; align-items: center; gap: 7px; margin-bottom: 3px; padding: 6px 7px; overflow: hidden; border: 1px solid transparent; border-radius: 6px; color: #5d737e; background: transparent; cursor: pointer; }.dataset-shard-item:hover { background:white;border-color:#dae3e7; }.dataset-shard-item.active { color:var(--ink);border-color:#cbd9e0;background:white;box-shadow:0 3px 12px rgba(23,49,59,.05); }.dataset-shard-item input { width:12px;height:12px;margin:0;accent-color:var(--blue); }.dataset-shard-item i { width:4px;height:30px;border-radius:3px;background:var(--shard-color);opacity:.35; }.dataset-shard-item.active i { opacity:1; }.dataset-shard-item span { min-width:0; }.dataset-shard-item b { display:block;overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap; }.dataset-shard-item small { display:block;overflow:hidden;margin-top:4px;color:var(--muted);font-size:6.5px;text-overflow:ellipsis;white-space:nowrap; }.dataset-shard-item em { width:18px;height:18px;display:grid;place-items:center;border-radius:5px;color:#70858f;background:#edf1f3;font-size:7px;font-style:normal; }.support-shards { padding:8px 10px;border-top:1px solid var(--line); }.support-shards > b { display:block;margin-bottom:5px;color:#7b8d96;font-size:7px;text-transform:uppercase;letter-spacing:.7px; }.support-shards div { display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;color:#617680;font-size:7px; }.support-shards div span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.support-shards div small { flex:0 0 auto;color:#91a0a7;font-size:6.5px; }.dataset-shard-rail > footer { min-height: 53px; display:flex;align-items:center;justify-content:space-between;gap:7px;padding:7px 8px;border-top:1px solid var(--line);background:white; }.shard-selection-summary { color:var(--muted);font-size:6.5px;line-height:1.35; }.dataset-shard-rail footer .button { flex:0 0 auto; }.modal.shard-upload-modal { width:min(560px,100%); }.shard-upload-modal .dropzone { min-height:115px; }
.inspector-toolbar { min-height: 43px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: #fbfcfd; }.tool-group { display: flex; align-items: center; gap: 4px; padding-right: 6px; border-right: 1px solid var(--line); }.tool-group:last-child { border: 0; }.tool-label { color: var(--muted); font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }.tool-shortcuts { margin-left: auto; color: #91a0a7; font-size: 7px; white-space: nowrap; }.icon-btn { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: #4d6672; background: white; cursor: pointer; font-size: 9px; }.icon-btn:hover,.icon-btn.active { color: white; border-color: var(--blue); background: var(--blue); }.image-tools .icon-btn { width: auto; min-width: 27px; padding: 0 6px; }.compact-select { height: 27px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: white; font-size: 8px; }.position { min-width: 58px; color: #506975; font-size: 8px; text-align: center; font-variant-numeric: tabular-nums; }.range { width: 100%; accent-color: var(--blue); }
.timeline-row { min-height: 39px; display: grid; grid-template-columns: auto minmax(160px,1fr) auto; align-items: center; gap: 9px; padding: 5px 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; }.frame-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid #dfe7eb; border-radius: 5px; color: #5b727d; background: #f8fafb; font-size: 7px; }.chip b { color: var(--ink); }.chip.blue { color: #0456dc; border-color: #ccdcff; background: #eef4ff; }
.tool-split { min-height: 610px; display: grid; grid-template-columns: minmax(520px, 3fr) minmax(330px, 2fr); }.explorer-main { min-width: 0; overflow: hidden; border-right: 1px solid var(--line); }.tool-tabs { height: 36px; display: flex; align-items: end; gap: 1px; padding: 0 8px; border-bottom: 1px solid var(--line); background: #f8fafb; }.tool-tab { height: 35px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; color: #697e88; background: transparent; cursor: pointer; font-size: 9px; font-weight: 650; }.tool-tab:hover,.tool-tab.active { color: var(--blue); }.tool-tab.active { border-bottom-color: var(--blue); background: white; }.tool-panel { height: 574px; overflow: auto; }.tool-panel[hidden] { display: none; }.panel-heading { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line); }.panel-heading b { display: block; font-size: 10px; }.panel-heading span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }.overview-wrap { position: relative; padding: 6px 8px 8px; }.overview-canvas { width: 100%; height: 505px; display: block; cursor: crosshair; }.canvas-hint { display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; }.legend { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 7px; }.legend span::before { content:""; display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:2px; background:var(--legend); }
.signal-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 6px 8px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }.field-toggle { flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; color: #657c87; background: white; cursor: pointer; font-size: 7px; }.field-toggle.active { color: #075add; border-color: #b8cffc; background: #edf3ff; }.signal-canvas { display: block; width: 100%; height: 430px; }.signal-footer { display: flex; justify-content: space-between; padding: 6px 9px; color: var(--muted); border-top: 1px solid var(--line); font-size: 7px; }
.camera-sidebar { min-width: 0; overflow: hidden; background: #eef2f4; }.camera-sidebar-head { min-height: 36px; display: flex; align-items: center; padding: 5px 9px; color: #dce6ea; background: #102129; border-bottom: 1px solid #263b45; }.camera-sidebar-head b { display: block; font-size: 10px; }.camera-sidebar-head span { display: block; margin-top: 1px; color: #8399a3; font-size: 7px; }.camera-stack { height: 574px; overflow: auto; }.camera-pane { border-bottom: 1px solid #cbd6db; }.camera-pane-title { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #536a75; background: #f8fafb; font-size: 8px; }.camera-pane-title b { color: var(--ink); }.camera-frame { min-height: 150px; height: min(520px, max(150px, calc(var(--native-height) + 18px))); overflow: auto; padding: 8px; background: #061118; cursor: grab; touch-action: none; }.camera-frame:active { cursor: grabbing; }.camera-view { position: relative; min-width: 1px; min-height: 1px; overflow: hidden; background: #071116; }.camera-view img { display: block; width: 100%; height: 100%; object-fit: fill; image-rendering: auto; user-select: none; pointer-events: none; }
.tool-empty { min-height: 120px; display: grid; place-items: center; padding: 20px; color: var(--muted); font-size: 9px; text-align: center; }
.pipeline-strip { min-height:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr) auto) minmax(0,1fr);align-items:center;gap:6px;margin-bottom:9px;padding:8px;border:1px solid var(--line);border-radius:8px;background:white; }.pipeline-strip a { min-width:0;display:flex;align-items:center;gap:8px;padding:7px;border-radius:6px;color:#738790;text-decoration:none; }.pipeline-strip a:hover,.pipeline-strip a.active { background:var(--blue-wash); }.pipeline-strip a.done { color:var(--ink); }.pipeline-strip i { width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border:1px solid #cdd8dd;border-radius:50%;font-size:8px;font-style:normal;font-weight:750; }.pipeline-strip .done i { color:white;border-color:var(--blue);background:var(--blue); }.pipeline-strip .active i { color:var(--blue);border-color:var(--blue); }.pipeline-strip b,.pipeline-strip small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.pipeline-strip b { font-size:9px; }.pipeline-strip small { margin-top:2px;font-size:7px; }.pipeline-strip em { color:#a7b4ba;font-size:10px;font-style:normal; }
.raw-head { min-height:47px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 9px;border:1px solid #cad6dc;border-bottom:0;background:white; }.raw-head b,.raw-head span { display:block; }.raw-head b { font-size:10px; }.raw-head span { margin-top:2px;color:var(--muted);font-size:7px; }.raw-head > div:last-child { display:flex;gap:5px; }.raw-workspace { min-height:650px;display:grid;grid-template-columns:205px minmax(480px,1fr) 285px;border:1px solid #cad6dc;background:white; }.raw-episode-rail { min-width:0;border-right:1px solid var(--line);background:#f4f7f8; }.raw-episode-rail > header { height:35px;display:flex;align-items:center;padding:0 9px;border-bottom:1px solid var(--line);color:#687c86;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.6px; }.raw-episode { width:100%;min-height:51px;display:grid;grid-template-columns:4px minmax(0,1fr) auto;align-items:center;gap:7px;padding:6px 7px;border:0;border-bottom:1px solid #e4eaed;color:#647a84;background:transparent;text-align:left;cursor:pointer; }.raw-episode:hover,.raw-episode.active { color:var(--ink);background:white; }.raw-episode i { width:4px;height:29px;border-radius:3px;background:var(--project-color); }.raw-episode b,.raw-episode small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.raw-episode b { font-size:8px; }.raw-episode small { margin-top:3px;color:var(--muted);font-size:6.5px; }.raw-episode em { color:#91a1a8;font-size:10px;font-style:normal; }.raw-episode em.reviewed { color:var(--success); }.raw-viewer { min-width:0;border-right:1px solid var(--line); }.raw-viewer .raw-range { min-width:160px;flex:1; }.raw-images { height:605px;display:grid;grid-template-columns:1fr;gap:1px;overflow:auto;background:#061118; }.raw-images section { min-width:0;display:flex;flex-direction:column;align-items:center; }.raw-images header { width:100%;height:27px;display:flex;align-items:center;padding:0 8px;color:#8fa4ad;background:#102129;font-size:7px; }.raw-images img { display:block;max-width:100%;height:auto;object-fit:contain;image-rendering:auto; }.annotation-panel { min-width:0;padding:9px;overflow:auto;background:#fbfcfd; }.annotation-panel > header { margin:-9px -9px 9px;padding:9px;border-bottom:1px solid var(--line); }.annotation-panel > header b,.annotation-panel > header span { display:block; }.annotation-panel > header b { font-size:10px; }.annotation-panel > header span { margin-top:2px;color:var(--muted);font-size:7px; }.annotation-section { margin:9px -2px;padding:8px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }.annotation-section > div { display:flex;align-items:center;justify-content:space-between; }.annotation-section b { font-size:8px; }.annotation-section p { margin:4px 0 7px;color:var(--muted);font-size:7px;line-height:1.4; }.raw-segment { display:grid;grid-template-columns:45px auto 45px minmax(70px,1fr) 22px;align-items:center;gap:3px;margin:3px 0; }.raw-segment input { width:100%;height:25px;padding:3px;border:1px solid var(--line);border-radius:4px;font-size:7px; }.raw-segment span,.raw-segment label { color:var(--muted);font-size:7px; }.raw-segment label { display:flex;align-items:center;gap:3px; }.segment-remove { width:22px;height:22px;padding:0;border:0;border-radius:4px;color:#a95559;background:#fbecee;cursor:pointer; }.raw-upload-drawer { padding:10px;border:1px solid #cad6dc;border-top:0;background:white; }.raw-upload-drawer .dropzone { min-height:85px; }.raw-drop { margin-top:10px; }
.raw-images.has-depth { grid-template-columns:repeat(2,minmax(0,1fr));align-items:start; }.raw-images.has-depth img { width:100%; }

.run-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 8px; align-items: start; }.run-main { display: flex; flex-direction: column; gap: 8px; }.run-sidebar { display: flex; flex-direction: column; gap: 7px; position: sticky; top: 66px; }.progress { width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 3px; background: #e8edef; appearance: none; }.progress::-webkit-progress-bar { background:#e8edef; }.progress::-webkit-progress-value { background:linear-gradient(90deg,var(--blue),#6a9aff); }.progress::-moz-progress-bar { background:var(--blue); }.run-status-block { padding: 11px 13px; }.run-status-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }.run-status-block h2 { margin: 0; font-size: 13px; }.run-status-block > p { margin: 6px 0 0; color: var(--muted); font-size: 8px; }
.curve-toolbar { display: flex; gap: 3px; flex-wrap: wrap; padding: 6px 8px; border-bottom: 1px solid var(--line); }.curve-toggle { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: white; color: #657b85; cursor: pointer; font-size: 7px; }.curve-toggle.active { color: white; border-color: var(--curve); background: var(--curve); }.curve-grid { display: grid; grid-template-columns: repeat(2,minmax(260px,1fr)); gap: 1px; background: var(--line); }.scalar-panel { min-width: 0; background: white; }.scalar-panel header { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px; border-bottom: 1px solid #edf1f3; }.scalar-panel header span { min-width: 0; overflow: hidden; color: #4f6671; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.scalar-panel header span::before { content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--curve); }.scalar-panel header b { font-size: 9px; font-variant-numeric: tabular-nums; }.scalar-canvas { display: block; width: 100%; height: 190px; }
.metric-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--line); }.metric-box { min-height: 67px; padding: 10px; background: white; }.metric-box span { color: var(--muted); font-size: 7px; text-transform: uppercase; }.metric-box strong { display: block; margin-top: 5px; font-size: 17px; }.comparison { padding: 9px; }.comparison-line { display: grid; grid-template-columns: 70px 1fr 36px; align-items: center; gap: 6px; margin: 7px 0; color: var(--muted); font-size: 8px; }.comparison-track { height: 6px; overflow: hidden; border-radius: 4px; background: #e8edf0; }.comparison-track i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }.comparison-line.reference i { background: var(--slate); }
.reference-note { color: var(--muted); font-size: 8px; line-height: 1.55; }.reference-note b { color: #875500; }
.validation-note { margin: 12px 0 0; font-size: 8px; line-height: 1.5; }
.analysis-tabs { height: 35px; display: flex; padding: 0 8px; border-bottom: 1px solid var(--line); background: #f8fafb; }.analysis-tab { padding: 0 11px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: none; cursor: pointer; font-size: 9px; font-weight: 650; }.analysis-tab.active { color: var(--blue); border-bottom-color: var(--blue); background: white; }.analysis-global-bar { min-height: 39px; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-bottom: 1px solid var(--line); }.analysis-global-bar .range { min-width: 150px; flex: 1; }.analysis-grid { display: grid; grid-template-columns: minmax(520px,3fr) minmax(320px,2fr); min-height: 470px; }.analysis-media { min-width: 0; padding: 8px; border-left: 1px solid var(--line); background: #eef2f4; }.media-panel-title { height: 30px; display: flex; align-items: center; justify-content: space-between; color: #5a707a; font-size: 8px; }.media-panel-title b { color: var(--ink); font-size: 10px; }.analysis-image { min-height: 370px; display: grid; grid-template-columns: repeat(var(--camera-count,1),minmax(0,1fr)); gap: 1px; overflow: auto; background: #071116; }.analysis-camera { position: relative; min-width: 0; min-height: 180px; display: grid; place-items: center; }.analysis-camera > span { position: absolute; z-index: 1; left: 6px; top: 6px; padding: 3px 5px; border-radius: 4px; color: #dce7ec; background: rgba(4,16,22,.7); font-size: 7px; }.analysis-image img { display: block; max-width: 100%; max-height: 370px; object-fit: contain; }.analysis-controls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }.analysis-plot { min-width: 0; padding: 8px; }.analysis-options { padding-bottom: 6px; border-bottom: 1px solid var(--line); }.dimension-list { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }.dimension-toggle { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: white; color: #647a84; cursor: pointer; font-size: 7px; }.dimension-toggle.active { color: white; border-color: var(--dim-color); background: var(--dim-color); }.actor-canvas { display: block; width: 100%; height: 420px; }.model-checks { display: flex; flex-wrap: wrap; gap: 4px 10px; }.model-check { display: flex; align-items: center; gap: 5px; color: #536b75; font-size: 8px; }.model-check input { accent-color: var(--blue); }
.augment-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; padding: 15px; }.augment-item { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #071116; }.augment-item img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; }.augment-item span { display: block; padding: 7px; color: #89a0aa; background: #0c1b22; font-size: 8px; }.unavailable { min-height: 350px; display: grid; place-items: center; padding: 30px; color: var(--muted); text-align: center; }.unavailable strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 14px; }
.augment-settings { padding: 0 10px 10px; }.augment-settings .panel-heading { margin: 0 -10px 10px; }.augment-controls { display: flex; flex-wrap: wrap; gap: 5px; }.augmentation-contract { margin: 10px 0 4px; color: var(--ink); font-size: 10px; font-weight: 650; }.augmentation-note { margin: 0; color: var(--muted); font-size: 8px; }.augment-cameras { min-height: 400px; display: grid; grid-template-columns: repeat(var(--camera-count,1),minmax(0,1fr)); gap: 1px; overflow: auto; background: #071116; }.augment-camera { position: relative; min-width: 0; display: grid; place-items: center; }.augment-camera img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; }.augment-camera span { position: absolute; z-index: 1; top: 6px; left: 6px; padding: 3px 5px; border-radius: 4px; color: #dce9ef; background: rgba(6,20,27,.76); font-size: 7px; }.augment-slider-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 8px; }
.metadata-list { padding: 0 9px 9px; }.metadata-list details { border-top: 1px solid var(--line); }.metadata-list summary { display: flex; justify-content: space-between; padding: 8px 2px; color: var(--ink); cursor: pointer; font-size: 8px; font-weight: 650; }.metadata-list summary span { color: var(--muted); font-weight: 400; }.metadata-grid { display: grid; gap: 4px; padding: 0 0 8px; }.metadata-grid > div { display: grid; grid-template-columns: minmax(130px,.4fr) minmax(0,1fr); gap: 7px; align-items: start; }.metadata-grid span { color: var(--muted); font-size: 7px; }.metadata-grid code { max-height: 72px; overflow: auto; padding: 5px 6px; border-radius: 5px; color: #21424f; background: #f2f6f8; white-space: pre-wrap; word-break: break-word; font-size: 7px; }

.modal-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,14,19,.62); backdrop-filter: blur(4px); }.modal { width: min(430px,100%); padding: 16px; border: 1px solid #d7e1e5; border-radius: 10px; background: white; box-shadow: 0 24px 80px rgba(0,0,0,.28); }.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.modal h2 { margin: 4px 0 0; font-size: 18px; }.modal > p { margin: 12px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.modal-actions { display: flex; justify-content: flex-end; gap: 7px; }.danger-text { color: var(--danger); }

.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: 380px; padding: 12px 15px; border-radius: 10px; color: white; background: var(--ink); box-shadow: 0 15px 45px rgba(0,0,0,.25); font-size: 10px; transform: translateY(90px); opacity: 0; transition: .25s; }.toast.show { transform: translateY(0); opacity: 1; }.toast.error { background: #a82931; }
.compact-range { width: 90px; accent-color: var(--blue); }
.skeleton { overflow: hidden; border-radius: 6px; background: #e9eef1; }.skeleton::after { content:""; display:block; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); transform:translateX(-100%); animation: shimmer 1.3s infinite; }@keyframes shimmer { to { transform:translateX(100%); } }

@media (max-width: 1200px) {
  .dataset-workspace { grid-template-columns: 200px minmax(0,1fr); }.raw-workspace { grid-template-columns:170px minmax(380px,1fr) 260px; }.tool-split,.analysis-grid { grid-template-columns: minmax(400px,3fr) minmax(280px,2fr); }.curve-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .home-hero { grid-template-columns: 1fr; }.home-visual { display: none; }.feature-grid { grid-template-columns: 1fr 1fr; }.stats-grid { grid-template-columns: repeat(3,1fr); }.dashboard-grid,.run-layout { grid-template-columns: 1fr; }.run-sidebar { position: static; }.dataset-workspace,.raw-workspace { grid-template-columns:1fr; }.raw-episode-rail { max-height:145px;overflow:auto;border-right:0;border-bottom:1px solid var(--line); }.raw-viewer { border-right:0;border-bottom:1px solid var(--line); }.dataset-workspace > .tool-frame { border-left:0;border-top:1px solid #cad6dc; }.dataset-shard-list { min-height:0;max-height:145px;display:grid;grid-template-columns:1fr 1fr; }.tool-split,.analysis-grid { grid-template-columns: 1fr; }.explorer-main { border-right:0;border-bottom:1px solid var(--line); }.analysis-media { border-left:0;border-top:1px solid var(--line); }.camera-stack { height:auto;max-height:500px; }
}
@media (max-width: 760px) {
  .studio-shell,.studio-shell.sidebar-collapsed { display:block; }.sidebar { position:fixed;left:0;transform:translateX(-102%);width:246px;transition:transform .2s;box-shadow:15px 0 55px rgba(0,0,0,.3); }.sidebar-mobile-open .sidebar { transform:translateX(0); }.sidebar-collapsed .sidebar-section { display:block; }.sidebar-collapsed .sidebar-wordmark { width:auto;flex:1; }.sidebar-collapsed .sidebar-wordmark span,.sidebar-collapsed .side-nav span,.sidebar-collapsed .sidebar-new b,.sidebar-collapsed .sidebar-service span { display:initial; }.sidebar-collapsed .side-nav a { justify-content:flex-start;padding:0 12px; }.sidebar-collapsed .sidebar-new { justify-content:flex-start;padding:0 12px; }.sidebar-collapsed .sidebar-service { justify-content:flex-start;padding:0 21px; }.sidebar-collapsed .sidebar-toggle { position:static;transform:none;background:rgba(255,255,255,.045); }.mobile-sidebar-toggle { display:grid;place-items:center; }.shell,.tool-shell { width:calc(100% - 14px); }.home h1 { letter-spacing:-3px; }.home-hero { min-height:auto;padding:50px 0 70px; }.feature-grid,.project-grid,.project-summary,.field-row { grid-template-columns:1fr; }.stats-grid { grid-template-columns:1fr 1fr; }.page-head { align-items:flex-start;flex-direction:column; }.run-row { grid-template-columns:1fr auto; }.run-row .mini-chart,.run-row .run-score { display:none; }.timeline-row { grid-template-columns:auto 1fr; }.frame-meta { grid-column:1/-1;justify-content:flex-start; }.tool-shortcuts { display:none; }.analysis-global-bar { flex-wrap:wrap; }.analysis-global-bar .range { order:10;flex-basis:100%; }.augment-grid { grid-template-columns:1fr 1fr; }.augment-cameras { grid-template-columns:1fr; }.project-tabs { overflow-x:auto; }.project-page { padding-bottom:30px; }
}

/* Compact pipeline workspace: the sidebar is the only global chrome. */
#app { min-height: 100vh; }
.home { min-height: 100vh; }
.project-top { padding-top: 9px; }
.project-title .project-icon { width:32px;height:32px; }
.project-title h1 { font-size:18px; }
.project-tabs { margin-top:7px; }
.project-tabs a { padding:8px 10px;font-size:8px; }
.compact-page-head { align-items:center;margin-bottom:10px; }
.compact-page-head h1 { margin-top:2px; }
.pipeline-map { display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);align-items:stretch;margin-bottom:9px;border:1px solid #cfdbe0;background:white; }
.pipeline-map > em { display:grid;place-items:center;color:#8ca0aa;background:#f1f5f7;font-size:17px;font-style:normal; }
.pipeline-stage { min-width:0;min-height:105px;display:grid;grid-template-columns:27px minmax(0,1fr);align-items:center;gap:9px;padding:11px;color:#637983;text-decoration:none;background:white; }
.pipeline-stage:hover,.pipeline-stage.active { background:#eef4ff; }
.pipeline-stage > i { width:27px;height:27px;display:grid;place-items:center;border:1px solid #c4d1d7;border-radius:50%;font-size:9px;font-style:normal;font-weight:800; }
.pipeline-stage.done > i { color:white;border-color:var(--blue);background:var(--blue); }
.pipeline-stage.active > i { color:var(--blue);border-color:var(--blue); }
.pipeline-stage b,.pipeline-stage strong,.pipeline-stage small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pipeline-stage b { color:var(--blue);font-size:7px;letter-spacing:.7px; }
.pipeline-stage strong { margin-top:3px;color:var(--ink);font-size:10px; }
.pipeline-stage small { margin-top:4px;color:var(--muted);font-size:7px; }
.launch-layout { display:grid;grid-template-columns:minmax(550px,1fr) 280px;gap:8px;align-items:start; }
.launch-form { padding:13px; }
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px; }
.form-grid .wide { grid-column:1/-1; }
.field small { margin-top:3px;color:var(--muted);font-size:7px; }
.launch-summary { display:grid;grid-template-columns:100px minmax(0,1fr);gap:5px 10px;margin:10px 0;padding:9px;border:1px solid var(--line);background:#f7f9fa;font-size:8px; }
.launch-summary span { color:var(--muted); }.launch-summary b { font-weight:650; }
.launch-help { padding:12px; }.launch-help h2 { margin:5px 0 9px;font-size:13px; }.launch-help dl { margin:0; }.launch-help dl div { display:flex;justify-content:space-between;gap:9px;padding:7px 0;border-top:1px solid var(--line);font-size:8px; }.launch-help dt { color:var(--muted); }.launch-help dd { margin:0;font-weight:650;text-align:right; }.launch-help p { color:var(--muted);font-size:8px;line-height:1.5; }

.raw-workspace.native-annotation { min-height:690px;grid-template-columns:185px minmax(480px,1fr) minmax(470px,640px); }
.annotation-workbench { min-width:0;border-right:1px solid var(--line);background:#fbfcfd; }
.annotation-workbench .raw-range { min-width:100px;flex:1; }
.annotation-fieldbar { min-height:41px;display:flex;align-items:center;gap:5px;padding:5px 8px;border-bottom:1px solid var(--line);background:white; }
.annotation-fieldbar label { min-width:180px;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:8px; }.annotation-fieldbar label select { flex:1; }
.annotation-fieldbar .annotation-save { margin-left:auto; }
.annotation-plot-panel { border-bottom:1px solid var(--line);background:white; }
.annotation-plot-head { height:37px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 8px;color:var(--muted);font-size:7px; }.annotation-plot-head b,.annotation-plot-head span { display:block; }.annotation-plot-head b { color:var(--ink);font-size:9px; }.annotation-plot-head div span { margin-top:2px; }
.annotation-canvas { width:100%;height:300px;display:block;cursor:crosshair; }
.annotation-selection { min-height:35px;display:flex;align-items:center;gap:5px;padding:4px 8px;border-top:1px solid #edf1f3; }.annotation-selection > span { flex:1;color:var(--muted);font-size:8px; }
.annotation-state-buttons { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;padding:8px;background:#dfe6ea; }
.annotation-state-buttons button { min-height:42px;display:flex;align-items:center;gap:7px;padding:6px;border:0;color:#536b75;background:white;cursor:pointer;text-align:left; }.annotation-state-buttons button:hover { color:var(--ink);background:#edf3ff; }.annotation-state-buttons b { width:23px;height:23px;display:grid;place-items:center;border-radius:5px;color:white;background:var(--state-color);font-size:9px; }.annotation-state-buttons span { font-size:7px; }
.progress-editor { margin:8px;border:1px solid var(--line);background:white; }.progress-editor summary { padding:8px;cursor:pointer;font-size:8px;font-weight:700; }.progress-editor > p { margin:0;padding:0 8px;color:var(--muted);font-size:7px; }.progress-editor > button { margin:8px; }
.progress-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:7px;background:var(--line); }.progress-grid > div { padding:5px;background:#f9fbfc; }.progress-grid b { display:block;margin-bottom:4px;font-size:8px; }.progress-grid label { display:flex;align-items:center;gap:3px;margin:2px 0;color:var(--muted);font-size:6px; }.progress-grid input { min-width:0;width:100%;height:22px;padding:2px;border:1px solid var(--line);font-size:7px; }
.annotation-error { margin:5px 8px; }
.raw-media { min-width:0;overflow:hidden;background:#071116; }.raw-media > header { height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;color:#8fa4ad;background:#102129;font-size:7px; }.raw-media > header b { color:#d7e3e8;font-size:9px; }
.native-annotation .raw-images { height:610px;display:block;overflow:auto; }.native-annotation .raw-images section { align-items:flex-start; }.native-annotation .raw-images img { width:auto;max-width:none;height:auto; }
.episode-metadata { color:#c6d3d9;background:#102129; }.episode-metadata summary { padding:9px;cursor:pointer;font-size:8px;font-weight:700; }.episode-metadata > label,.episode-metadata > div { margin:0 8px 8px; }.episode-metadata input,.episode-metadata textarea,.episode-metadata select { color:var(--ink);background:white; }
.analysis-dataset-bar { min-height:39px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 8px;border-bottom:1px solid var(--line);background:white; }.analysis-dataset-bar label { min-width:320px;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:8px; }.analysis-dataset-bar select { min-width:230px; }.analysis-dataset-bar > span { color:var(--muted);font-size:7px; }.analysis-tab:disabled { opacity:.4;cursor:not-allowed; }.analysis-image.attention-active { box-shadow:inset 0 0 0 1px #0059ff; }
.analysis-shortcuts { display:flex;align-items:center;gap:6px; }.attention-availability { font-size:7px;color:#80919a;white-space:nowrap; }.attention-availability.ready { color:#006fe8;font-weight:700; }.analysis-tab em { display:inline-grid;place-items:center;min-width:15px;height:15px;margin-left:3px;border-radius:8px;background:#dbe9ff;color:#0059ff;font-size:7px;font-style:normal; }.analysis-tab.active em { background:#0059ff;color:white; }.attention-caption { margin:0;padding:5px 6px;border-bottom:1px solid #cbd8df;background:#eaf3ff;color:#315568;font-size:7px;line-height:1.35; }
.annotation-save.dirty { box-shadow:0 0 0 2px rgba(0,89,255,.15); }
.raw-field optgroup { color:#637983;font-weight:700; }.raw-field option { color:var(--ink);font-weight:400; }
.actor-display-controls,.native-analysis-toolbar,.critic-controls,.critic-series-toggles { min-height:37px;display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:5px 8px;border-bottom:1px solid var(--line);background:#fbfcfd; }
.actor-display-controls kbd { min-width:19px;padding:2px 4px;border:1px solid #ccd7dc;border-bottom-width:2px;border-radius:4px;color:#607680;background:white;font:7px ui-monospace,monospace;text-align:center; }
.compact-number { width:58px;height:24px;padding:2px 4px;border:1px solid var(--line);border-radius:4px;color:var(--ink);background:white;font-size:8px; }
.native-analysis-toolbar .range,.critic-controls .range { min-width:120px;flex:1; }
.critic-controls .chip { min-height:27px; }.critic-controls input[type="checkbox"] { margin:0;accent-color:var(--blue); }
.critic-series-toggles { min-height:33px;background:white; }
.critic-plots { display:grid;grid-template-rows:125px minmax(400px,1fr);min-height:560px;background:#dfe6ea;gap:1px; }
.critic-plots section { min-width:0;display:grid;grid-template-rows:28px minmax(0,1fr);background:white; }
.critic-plots header { display:flex;align-items:center;padding:0 8px;color:#5f747e;border-bottom:1px solid #eef2f4;font-size:8px;font-weight:700; }
.critic-plots canvas { width:100%;height:100%;display:block; }
.critic-loading { min-height:80px; }
.augment-layout .analysis-media { min-height:480px; }.augment-layout .augment-cameras { height:445px; }

/* Dataset format conversion is intentionally compact so the explorer remains primary. */
.modal.shard-upload-modal,.modal.raw-build-modal { width:min(650px,100%);max-height:calc(100vh - 28px);overflow:auto; }
.build-options { margin-top:7px;border:1px solid var(--line);background:#f8fafb; }
.build-options summary { padding:8px 10px;cursor:pointer;color:var(--ink);font-size:8px;font-weight:700; }
.build-option-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 9px 9px; }
.build-option-grid .wide { grid-column:1/-1; }
.depth-contract-fields { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
.depth-contract-fields.disabled { opacity:.42; }
.dataset-build-form > .button { margin-top:4px; }
.dataset-export { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px 8px;border-top:1px solid var(--line);background:#fbfcfd; }
.dataset-export > span { grid-column:1/-1;color:var(--muted);font-size:6.5px;text-transform:uppercase;letter-spacing:.5px; }
.dataset-export a { min-height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;color:#426170;background:white;text-decoration:none;font-size:7px;font-weight:700; }
.dataset-export a:hover { color:var(--blue);border-color:#a9c3ff; }
.dataset-contract-bar { min-height:39px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 9px;border:1px solid #cad6dc;border-bottom:0;background:white; }
.dataset-contract-bar b,.dataset-contract-bar span { display:block; }
.dataset-contract-bar b { font-size:9px; }
.dataset-contract-bar span { margin-top:2px;color:var(--muted);font-size:7px; }
.dataset-contract-bar > div:last-child { display:flex;gap:5px; }
.dataset-contract-bar > div:last-child span { margin:0;padding:4px 6px;border:1px solid var(--line);border-radius:4px;background:#f8fafb; }

@media (max-width: 1350px) {
  .raw-workspace.native-annotation { grid-template-columns:165px minmax(430px,1fr) minmax(380px,520px); }
  .pipeline-stage { padding:8px; }.pipeline-stage > i { display:none; }.pipeline-stage { grid-template-columns:1fr; }
}
@media (max-width: 980px) {
  .pipeline-map { grid-template-columns:1fr; }.pipeline-map > em { min-height:22px;transform:rotate(90deg); }.pipeline-stage { min-height:72px; }
  .launch-layout,.raw-workspace.native-annotation { grid-template-columns:1fr; }.raw-media { max-height:650px; }.annotation-workbench { border-right:0; }
}
@media (max-width: 760px) {
  .mobile-sidebar-toggle { position:fixed;z-index:80;left:8px;top:8px;box-shadow:0 5px 18px rgba(0,0,0,.16); }
  .project-title { padding-left:40px; }.form-grid { grid-template-columns:1fr; }.form-grid .wide { grid-column:auto; }.analysis-dataset-bar { align-items:flex-start;flex-direction:column; }.analysis-dataset-bar label,.analysis-dataset-bar select { min-width:0;width:100%; }
  .build-option-grid,.depth-contract-fields { grid-template-columns:1fr; }.build-option-grid .wide { grid-column:auto; }.dataset-contract-bar { align-items:flex-start;flex-direction:column; }
}