:root {
  color-scheme: dark;
  --bg: #0c0a10;
  --surface: #17131e;
  --surface-raised: #201928;
  --ink: #f5f0fc;
  --muted: #ad9fbb;
  --line: #302637;
  --accent: #c1a0fc;
  --accent-light: #c1a0fc15;
  --pink: #efa7d6;
  --red: #f5a7c7;
  --amber: #e7b8d1;
  --sidebar: 222px;
  --radius: 16px;
  font-family: Inter, "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-size: 14px; line-height: 1.5; }
::selection { background: #b897f54a; color: #fff; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline-offset: 4px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #41324d; border-radius: 9px; background: #211a2a; color: #e8dff3; padding: 11px 17px; font-weight: 550; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
button:hover:not(:disabled) { background: #2c2238; border-color: #6e5387; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .36; }
button svg { width: 17px; height: 17px; }
button.primary { background: #c5a4fc; border-color: #d4b9ff; color: #20152f; box-shadow: 0 3px 18px #b17cff12, inset 0 1px #fff3; }
button.primary:hover:not(:disabled) { background: #d4baff; border-color: #e4d2ff; box-shadow: 0 4px 24px #b17cff2b; }
button.danger { background: #321b2b; border-color: #67364e; color: #f1adc9; }
button.danger:hover:not(:disabled) { background: #472238; border-color: #ac5e85; }
button.small { padding: 7px 11px; font-size: 12px; }
button.icon-button { padding: 8px; border-color: transparent; background: transparent; }
button.ghost { background: transparent; }
button.full { width: 100%; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: #100d16; border-right: 1px solid #2a2034; padding: 32px 18px 20px; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; padding: 0 12px; font-size: 27px; font-weight: 760; letter-spacing: -1.5px; color: #faf7ff; }
.brand-dot { color: var(--pink); }
.brand-symbol { display: grid; grid-template-columns: 7px 7px; gap: 3px; margin-right: 12px; transform: rotate(-12deg); }
.brand-symbol i { display: block; background: #c3a0ff; height: 7px; border-radius: 2px; }
.brand-symbol i:nth-child(2) { background: #e9a4d3; }
.brand-symbol i:last-child { background: #f4e7ff; }
.workspace-label { font-size: 9px; font-weight: 600; letter-spacing: 1.8px; color: #8f7ca2; margin: 48px 12px 14px; }
nav { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; color: #a99bb8; font-weight: 500; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { background: #201729; color: #e6d8f7; }
.nav-item.active { background: linear-gradient(105deg, #b287ed1f, #c99ce90d); border-color: #b58be82b; color: #d6b9ff; }
.nav-item .nav-dot { margin-left: auto; width: 5px; height: 5px; background: #e5b5ea; border-radius: 50%; box-shadow: 0 0 8px #e5b5ea66; }
.sidebar-bottom { margin-top: auto; }
.hardware-label { font-size: 8px; letter-spacing: 1.3px; font-weight: 600; color: #8e7d9e; display: flex; justify-content: space-between; margin: 0 11px 14px; }
.device-row { display: flex; align-items: center; gap: 10px; font-size: 11px; padding: 7px 11px; color: #b6a8c5; }
.device-icon { display: grid; place-items: center; width: 25px; height: 25px; background: #211829; border: 1px solid #372940; border-radius: 7px; font-size: 10px; color: #c7aedf; }
.led { width: 6px; height: 6px; border-radius: 50%; background: #4e3e5e; margin-left: auto; }
.led.on { background: #c8a4ff; box-shadow: 0 0 0 3px #c8a4ff0b, 0 0 10px #c8a4ff4d; }
.sidebar-note { border-top: 1px solid var(--line); margin-top: 22px; padding: 19px 10px 0; display: flex; align-items: center; gap: 7px; color: #9f8cb1; font-size: 9px; }
.mini-dot { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: #dba9e7; }
.version { margin-left: auto; font-size: 8px; color: #776784; }
.workspace { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 85% 0, #3b17491c, transparent 47%); }
.topbar { position: sticky; top: 0; z-index: 10; height: 78px; padding: 0 44px; border-bottom: 1px solid #2e2338; display: flex; align-items: center; justify-content: space-between; background: #100d16e8; backdrop-filter: blur(18px); }
.breadcrumb { display: flex; gap: 14px; color: #93829f; font-size: 11px; }
.breadcrumb span { color: #5b456a; }
.breadcrumb strong { font-weight: 500; color: #d6c4e8; }
.topbar-right { display: flex; gap: 20px; align-items: center; }
.connection-label { font-size: 10px; color: #bcabd0; display: flex; align-items: center; gap: 7px; }
.connection-label:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #d8aeed; box-shadow: 0 0 8px #b895ed55; }
.connection-label.offline:before { background: var(--red); box-shadow: none; }
.topbar-separator { width: 1px; height: 21px; background: var(--line); }
.avatar { height: 29px; width: 29px; background: linear-gradient(135deg, #3c2c4f, #3c253e); border: 1px solid #674c79; display: grid; place-items: center; border-radius: 50%; font-size: 11px; color: #ead1fb; }
main { padding: 38px 44px 30px; max-width: 1760px; width: 100%; margin: auto; flex: 1; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.eyebrow { color: #bb9ed9; font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.page-heading h1 { font-size: 29px; line-height: 1.2; font-weight: 590; letter-spacing: -1px; margin: 0 0 9px; color: #f8f3ff; }
.page-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.date-tag { display: flex; align-items: center; gap: 8px; color: #bfacca; font-size: 11px; padding: 8px 11px; border: 1px solid #3a2b43; background: #19121f; border-radius: 7px; }
.date-tag svg { width: 14px; height: 14px; color: var(--pink); }
.home-intro { position: relative; border: 1px solid #6e4c894d; border-radius: var(--radius); background: radial-gradient(ellipse at 84% 65%, #8e47962b, transparent 43%), linear-gradient(112deg, #20162e, #1c1324 62%, #221528); padding: 38px 42px; min-height: 230px; overflow: hidden; margin-bottom: 30px; box-shadow: inset 0 1px #e7c7ff06; }
.home-intro:after { position: absolute; content: ""; right: 0; top: 0; width: 49%; height: 100%; background-image: radial-gradient(#d0a3ee30 1px, transparent 1px); background-size: 17px 17px; mask-image: linear-gradient(to right, transparent, black); }
.home-intro .eyebrow { color: #ceacec; }
.home-intro h2 { font-size: 34px; line-height: 1.28; letter-spacing: -1.1px; font-weight: 550; margin: 0 0 14px; position: relative; z-index: 1; }
.home-intro p { color: #c1accf; font-size: 12px; margin: 0; max-width: 435px; position: relative; z-index: 1; }
.gradient-text { background: linear-gradient(95deg, #d2b5ff 0%, #f0add5 95%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.intro-graphic { position: absolute; right: 8%; top: 23px; width: 230px; height: 184px; z-index: 1; color: #d7b0f1; filter: drop-shadow(0 0 24px #b981e61c); }
.section-title { font-size: 13px; letter-spacing: -.1px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 9px; color: #e8ddf3; }
.section-kicker { font-size: 9px; color: #9983ac; font-weight: 450; letter-spacing: .6px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.workflow-card { display: flex; flex-direction: column; position: relative; background: linear-gradient(150deg, #1b1523, #15111b); border: 1px solid #3c2b4a; border-radius: var(--radius); padding: 25px 26px 22px; min-height: 278px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.workflow-card:hover { transform: translateY(-3px); box-shadow: 0 12px 35px #09050e70, 0 0 25px #b880ed0b; border-color: #9d75c3; }
.workflow-card:nth-child(2) { border-color: #49303f; background: linear-gradient(150deg, #20151f, #171018); }
.workflow-card:nth-child(2):hover { border-color: #b46f9f; }
.workflow-card:nth-child(3) { border-color: #38303f; background: linear-gradient(150deg, #1b1720, #141118); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px; }
.card-icon { width: 47px; height: 47px; background: #bc8dff12; border: 1px solid #bd96f52e; display: grid; place-items: center; color: #c9a3fc; border-radius: 12px; }
.card-icon svg { width: 24px; height: 24px; }
.card-number { font-family: monospace; font-size: 10px; color: #8c739c; }
.workflow-card:nth-child(2) .card-icon { background: #ed8dc914; border-color: #e99ac42b; color: #efa8d4; }
.workflow-card:nth-child(3) .card-icon { background: #e6d5ff0b; border-color: #dfcbf426; color: #eee0ff; }
.workflow-card h3 { margin: 0 0 9px; font-size: 21px; font-weight: 570; letter-spacing: -.6px; color: #dfc9fc; }
.workflow-card:nth-child(2) h3 { color: #f2bfde; }
.workflow-card:nth-child(3) h3 { color: #f4edf9; }
.workflow-card p { margin: 0 0 23px; font-size: 12px; color: #b4a2c3; line-height: 1.8; max-width: 270px; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; border-top: 1px solid #b98cda1c; padding-top: 16px; font-size: 11px; color: #c3a5de; }
.card-bottom svg { width: 16px; height: 16px; color: #d3b0f3; }
.workflow-card:nth-child(2) .card-bottom, .workflow-card:nth-child(2) .card-bottom svg { color: #e7a8cb; }
.home-bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 28px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 23px; box-shadow: inset 0 1px #e7c7ff03; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.panel-title h2, .panel-title h3 { font-size: 13px; letter-spacing: -.1px; font-weight: 600; margin: 0; color: #ede4f5; }
.panel-title>svg { width: 18px; height: 18px; flex-shrink: 0; color: #c5a0e5; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #c19ae012; border-radius: 5px; background: #2a1f33; color: #c7afd9; font-size: 9px; white-space: nowrap; }
.pill.green { background: #bd8ff017; border-color: #c299f126; color: #d6b9ff; }
.pill.amber { background: #ee9ac01a; border-color: #e79abf26; color: #f1b9d7; }
.pill.red { background: #f592b21a; border-color: #ed86aa2e; color: #f3a5c1; }
.empty-state { min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #9b85ad; font-size: 11px; gap: 9px; padding: 22px; }
.empty-state svg { width: 25px; height: 25px; color: #846997; }
.empty-state strong { font-weight: 500; color: #bca4d1; }
.quick-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.quick-stat { padding: 17px 0; border-right: 1px solid var(--line); }
.quick-stat:last-child { border: none; }
.quick-stat span { display: block; color: #af97c2; font-size: 11px; margin-bottom: 9px; }
.quick-stat strong { font-size: 32px; font-weight: 450; letter-spacing: -1px; color: #e6d3ff; }
.quick-stat:nth-child(2) strong { color: #f0b7da; }
.quick-stat:nth-child(3) strong { color: #fbf1ff; }
.quick-stat small { font-size: 10px; color: #ae92c5; margin-left: 5px; }
.footer { padding: 22px 44px; display: flex; justify-content: space-between; border-top: 1px solid #2d2235; font-size: 9px; color: #887096; margin-top: 14px; gap: 15px; }
.camera-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.camera-panel { background: #17121e; border: 1px solid #3a2a46; border-radius: var(--radius); overflow: hidden; }
.camera-header { padding: 15px 19px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.camera-header h2 { font-size: 12px; margin: 0; font-weight: 550; display: flex; align-items: center; gap: 9px; color: #eadcf8; }
.camera-header h2 svg { width: 16px; height: 16px; color: #c6a5e0; }
.camera-header-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.depth-toggle { font-size: 9px; padding: 5px 8px; border-radius: 5px; min-height: 24px; background: #2c1e3c; border-color: #5c3c76; color: #d5b2f7; }
.depth-toggle[aria-pressed="false"] { background: #1b1422; border-color: #403049; color: #b69ac9; }
.camera-view { position: relative; background: #0a0810; aspect-ratio: 4/3; overflow: hidden; }
.camera-view img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.camera-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #a98abb; font-size: 11px; background: radial-gradient(ellipse at center, #281c35, #120e1a); }
.camera-placeholder svg { width: 33px; height: 33px; opacity: .5; }
.camera-overlay { position: absolute; z-index: 2; top: 13px; left: 13px; display: flex; align-items: center; gap: 5px; font-family: monospace; font-size: 9px; background: #1c102eae; color: #ecd7ff; border: 1px solid #e7c7ff30; padding: 4px 7px; border-radius: 5px; backdrop-filter: blur(6px); }
.camera-overlay i { width: 5px; height: 5px; background: #ddafff; border-radius: 50%; box-shadow: 0 0 6px #d5a6ff66; }
.camera-overlay.waiting i { background: #eeb5cf; box-shadow: none; }
.camera-foot { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #a68aba; padding: 11px 18px; gap: 10px; }
.depth-inset { position: absolute; right: 13px; bottom: 13px; width: 30%; border: 2px solid #e4b8ff75; z-index: 3; border-radius: 7px; overflow: hidden; background: #160d20; box-shadow: 0 3px 16px #09031080; aspect-ratio: 4/3; }
.depth-inset img { width: 100%; height: 100%; object-fit: cover; }
.depth-inset span { position: absolute; bottom: 0; left: 0; right: 0; background: #1e102ddb; color: #eedcff; padding: 3px 6px; font-size: 8px; z-index: 2; }
.camera-error { font-size: 11px; color: var(--red); margin: 0 0 15px; }
.session-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 22px; padding: 21px 25px; }
.session-info { min-width: 0; flex: 1; }
.session-info h2 { font-size: 13px; font-weight: 550; margin: 0 0 7px; display: flex; align-items: center; gap: 9px; color: #e8d7f7; }
.session-info p { font-size: 11px; color: #b19bc1; margin: 0; }
.session-timer { text-align: center; padding: 0 26px; border-right: 1px solid var(--line); margin-right: 3px; min-width: 177px; }
.timer { font-family: "SFMono-Regular", Consolas, monospace; font-size: 31px; font-weight: 400; letter-spacing: -1.8px; font-variant-numeric: tabular-nums; line-height: 1.2; color: #e3caff; }
.timer-label { display: block; font-size: 8px; color: #a68abc; letter-spacing: 1px; margin-top: 5px; }
.session-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.progress { height: 4px; overflow: hidden; border-radius: 5px; background: #34213f; margin-top: 12px; max-width: 450px; }
.progress>span { display: block; background: linear-gradient(90deg, #be9afc, #eeadd8); height: 100%; width: 0; transition: width .2s; }
.phase-error .progress>span { background: #f09fbf; }
.phase-recording .progress>span { background: #efabd1; }
.hint { font-size: 11px; line-height: 1.8; color: #a88dbb; margin: 12px 0 0; }
.hint strong { font-weight: 550; color: #d6b4ec; }
.hint.error { color: var(--red); }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.data-table th { font-size: 9px; letter-spacing: 1.1px; font-weight: 500; text-transform: uppercase; color: #b49bc5; border-bottom: 1px solid var(--line); padding: 10px; }
.data-table td { padding: 15px 10px; font-size: 12px; color: #c4acd5; border-bottom: 1px solid #35213e; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-weight: 500; color: #e2cfee; }
.task-name { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.table-sub { color: #a58ab7; font-size: 9px; font-weight: 400; margin-top: 3px; }
.section-count { background: #3b2648; padding: 2px 6px; font-size: 9px; color: #d7b1f0; border-radius: 4px; }
.dialog { border: 1px solid #77518f; border-radius: 19px; padding: 30px; background: #1b1423; max-width: 550px; width: calc(100% - 32px); max-height: 90vh; overflow: auto; box-shadow: 0 24px 100px #050109ae, 0 0 40px #995dd51a; color: var(--ink); }
.dialog::backdrop { background: #07030cc2; backdrop-filter: blur(7px); }
.dialog.wide-dialog { max-width: 880px; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dialog-header h2 { font-size: 22px; letter-spacing: -.7px; font-weight: 560; margin: 0; color: #eddaff; }
.dialog-intro { color: #b8a0ca; font-size: 12px; margin: 0 0 25px; }
.field { display: block; margin-bottom: 17px; min-width: 0; }
.field-label { display: block; color: #d8c1e9; font-size: 11px; font-weight: 550; margin-bottom: 7px; }
.field-label small { color: #a88abf; font-size: 10px; font-weight: 400; margin-left: 5px; }
input, select, textarea { background: #110d18; border: 1px solid #493355; border-radius: 8px; color: #f1e5fb; padding: 11px 12px; width: 100%; min-width: 0; font-size: 13px; min-height: 41px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: #c59aea; outline: none; box-shadow: 0 0 0 3px #bc8fe51a; }
textarea { resize: vertical; min-height: 86px; }
input::placeholder, textarea::placeholder { color: #8a6f9c; opacity: 1; }
input[type="number"] { font-variant-numeric: tabular-nums; }
select option { color: #ede1f9; background: #1d1526; }
.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 15px; }
.form-row.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 21px; margin-top: 22px; }
.dialog-actions button { min-width: 125px; }
.field-note { font-size: 11px; color: #a48ab6; margin-top: 7px; line-height: 1.7; }
.info-box { background: #af79e40b; border: 1px solid #9d6fc530; border-radius: 9px; padding: 11px 14px; color: #c6a9dd; font-size: 11px; line-height: 1.8; }
.info-box.amber { background: #e998bd0a; border-color: #c87e9d3b; color: #deb1cc; }
.info-box a { color: #f2c4e2; }
.training-layout { display: grid; grid-template-columns: 355px minmax(0,1fr); gap: 21px; align-items: start; }
.form-panel { padding: 25px; }
.form-panel .panel-title { margin-bottom: 25px; }
.form-panel, .chart-panel, .stack { min-width: 0; }
.target-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 4px; background: #100c17; border: 1px solid #34243f; border-radius: 9px; margin-bottom: 17px; }
.target-toggle button { background: transparent; border-color: transparent; font-size: 10px; padding: 9px 6px; color: #b095c5; }
.target-toggle button.active { background: #32203f; border-color: #704d89; box-shadow: 0 2px 8px #05000940; color: #e3c7fc; }
.gpu-grid { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.gpu-button { position: relative; width: 31px; height: 31px; padding: 0; font-family: monospace; font-size: 11px; border-radius: 7px; color: #b49bc7; }
.gpu-button.selected { border-color: #c6a0f2; background: #8f56c62e; color: #e6c8ff; }
.gpu-button.busy { background: #351f31; border-color: #77415e; color: #eab2ce; }
.gpu-button.busy:after { content: ""; position: absolute; width: 3px; height: 3px; background: #e9a7c6; border-radius: 50%; bottom: 4px; }
.gpu-info { font-size: 10px; color: #b89dca; min-height: 17px; margin-bottom: 17px; }
.stack { display: grid; gap: 21px; }
.chart-panel { min-height: 305px; }
.chart-area { position: relative; height: 220px; width: 100%; padding-top: 8px; }
.chart-area svg { height: 100%; width: 100%; }
.chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #9e81b1; font-size: 11px; background: repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#392742 calc(25% - 1px),#392742 25%); margin: 20px 10px 20px 30px; }
.chart-empty strong { font-size: 13px; font-weight: 450; color: #c3a4da; }
.chart-legend { display: flex; align-items: center; gap: 7px; color: #c1a2d6; font-size: 10px; }
.chart-legend:before { content: ""; width: 14px; height: 2px; background: linear-gradient(90deg, #cba7ff, #f3afd7); }
.run-card { padding: 15px 0; border-top: 1px solid var(--line); }
.run-card:first-child { border-top: none; }
.run-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.run-title { font-size: 12px; color: #e0c7f3; font-weight: 550; }
.run-meta { font-size: 10px; color: #b99dcb; margin-top: 6px; display: flex; gap: 15px; flex-wrap: wrap; }
.run-meta button { font-size: 10px; padding: 0; border: none; background: none; text-decoration: underline; color: #d6b3f0; }
.run-controls { display: flex; gap: 5px; align-items: center; }
.run-detail { background: #120c1a; border-radius: 7px; padding: 12px; margin-top: 12px; color: #bca1d0; font-family: monospace; font-size: 10px; overflow-wrap: anywhere; }
.checkpoint-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.checkpoint-item:last-child { border: none; }
.checkpoint-item svg { width: 17px; height: 17px; color: #b999cf; margin-top: 3px; }
.checkpoint-name { font-size: 12px; color: #e3c6f7; }
.checkpoint-path { font-family: monospace; font-size: 10px; color: #bda1cf; overflow-wrap: anywhere; margin-top: 4px; }
.checkpoint-item button { margin-left: auto; }
.checkpoint-group+.checkpoint-group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.inference-layout { display: grid; grid-template-columns: 355px minmax(0,1fr); gap: 21px; }
.inference-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.inference-preview-grid .camera-header { padding: 12px 14px; }
.inference-preview-grid .camera-header h2 { font-size: 11px; }
.inference-preview-grid .camera-foot { display: none; }
.inference-status .session-panel { border: none; padding: 0; margin: 0; flex-wrap: wrap; box-shadow: none; }
.inference-status .session-timer { margin-left: auto; }
.inference-status .session-actions { width: 100%; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 15px; }
.outcome-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.outcome-choice button { padding: 20px 15px; font-size: 14px; }
.outcome-title { text-align: center; padding-top: 12px; }
.outcome-title .eyebrow { margin: 0 0 10px; color: #e1add8; }
.outcome-title h2 { font-size: 25px; font-weight: 500; letter-spacing: -.8px; margin: 0 0 10px; color: #f2dfff; }
.outcome-title p { font-size: 12px; color: #bea0ce; margin: 0 0 20px; }
.outcome-choice .success { background: #b68de41a; border-color: #a477d068; color: #e4c7ff; }
.outcome-choice .failure { background: #df87b31a; border-color: #d281a65c; color: #f5b7d5; }
.toast { position: fixed; bottom: 27px; left: calc(var(--sidebar) + (100% - var(--sidebar))/2); transform: translateX(-50%); padding: 13px 19px; color: #f1e0ff; background: #302039f5; border: 1px solid #8e66a8; z-index: 100; border-radius: 10px; font-size: 12px; max-width: 560px; box-shadow: 0 7px 30px #05000990; }
.toast.error { background: #432035; border-color: #b87697; color: #ffd9eb; }
.mono { font-family: Consolas, monospace; }
.preparation-list { display: grid; gap: 10px; }
.preparation-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; font-size: 11px; color: #c3a9d7; }
.path-block { font-family: monospace; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; background: #100a18; border: 1px solid #4c315d; border-radius: 8px; padding: 14px; max-height: 340px; overflow: auto; color: #d5b4eb; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.detail-stat { padding: 15px; background: #261930; border: 1px solid #4b305b; border-radius: 8px; }
.detail-stat span { display: block; color: #bda0d0; font-size: 10px; margin-bottom: 5px; }
.detail-stat strong { font-weight: 500; font-size: 17px; color: #f1d8ff; }
.spacer { height: 15px; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #110c17; }
::-webkit-scrollbar-thumb { background: #4b355b; border: 2px solid #110c17; border-radius: 8px; }
@media (min-width:1700px) { main { padding-left:58px;padding-right:58px; } .camera-view { max-height:460px;aspect-ratio:auto;height:clamp(300px,30vw,460px); } .home-intro { min-height:250px;padding:45px; } .home-intro h2 { font-size:39px; } .workflow-card { min-height:320px;padding:30px; } }
@media (max-width:1150px) { :root { --sidebar:190px; } main { padding:28px 26px; } .topbar,.footer { padding-left:26px;padding-right:26px; } .workflow-card { padding:20px;min-height:270px; } .workflow-card h3 { font-size:18px; } .home-intro { padding:30px; } .intro-graphic { right:3%;opacity:.7;width:190px; } .home-intro h2 { font-size:29px; } .training-layout,.inference-layout { grid-template-columns:300px minmax(0,1fr); } .session-panel { flex-wrap:wrap; } .session-actions { margin-left:auto; } .session-timer { border:none;padding:0 10px;min-width:145px; } .inference-preview-grid { grid-template-columns:1fr; } }
@media (max-width:850px) { :root { --sidebar:72px; } .sidebar { padding:24px 10px 17px; } .brand { font-size:0;padding:0;justify-content:center; } .brand-symbol { margin:0; } .brand-dot,.workspace-label,.nav-item span,.nav-dot,.sidebar-bottom { display:none; } .sidebar nav { margin-top:37px; } .nav-item { padding:13px;justify-content:center; } .nav-item svg { width:20px;height:20px; } .workflow-grid { grid-template-columns:1fr; } .workflow-card { min-height:205px; } .card-top { margin-bottom:17px; } .workflow-card p { max-width:none; } .home-bottom { grid-template-columns:1fr; } .home-intro h2 { font-size:28px; } .intro-graphic { right:-30px;opacity:.25; } .training-layout,.inference-layout { grid-template-columns:1fr; } .inference-preview-grid { grid-template-columns:1fr 1fr; } .footer span:first-child { display:none; } .page-heading h1 { font-size:24px; } .page-heading { align-items:flex-start; } .heading-actions { flex-wrap:wrap;justify-content:flex-end; } .date-tag { display:none; } }
@media (max-width:560px) { main { padding:23px 15px; } .topbar { height:64px;padding:0 16px; } .topbar-right { gap:10px; } .connection-label { font-size:8px; } .breadcrumb { font-size:10px;gap:8px; } .home-intro { padding:24px; } .home-intro h2 { font-size:25px; } .home-intro p { font-size:11px; } .camera-grid,.inference-preview-grid { grid-template-columns:1fr; } .session-panel { padding:19px;gap:20px; } .session-info { width:100%;flex:auto; } .session-timer { text-align:left;padding:0;min-width:110px; } .session-actions button { font-size:10px;padding:9px 11px; } .timer { font-size:26px; } .form-row.three { grid-template-columns:1fr 1fr; } .dialog { padding:22px; } .dialog-actions button { min-width:0;flex:1; } .page-heading .heading-actions button { font-size:10px;padding:9px; } .section-kicker { display:none; } .panel { padding:18px; } .footer { padding:18px 15px; } .toast { width:calc(100% - var(--sidebar) - 24px); } .detail-grid { grid-template-columns:1fr; } .camera-header { padding:13px 14px; } .camera-header-controls { gap:7px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important;animation:none !important;scroll-behavior:auto !important; } }

.gpu-button.selected.busy{background:#573047;border-color:#f0b8dd;color:#fff0fa;box-shadow:0 0 0 1px #e5a0ce35}.device-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.device-label-row .field-label{margin:0}.device-label-row button{font-size:10px;padding:3px 7px}.npu-allocations{margin:0 0 20px;color:#b89dca;font-size:11px}.npu-allocations summary{cursor:pointer;margin-bottom:9px}.npu-allocations .data-table{white-space:normal;table-layout:fixed}.npu-allocations th:first-child{width:15%}.npu-allocations th:nth-child(2){width:28%}.npu-allocations td{font-size:10px;overflow-wrap:anywhere;padding:9px 5px}.npu-allocations th{font-size:8px;padding:9px 5px}

#inference-model-hint:not([hidden]){margin-bottom:18px}
.robot-gripper-controls{display:flex;gap:8px;margin-top:10px}.robot-gripper-controls>button{flex:1;min-width:0}
.tiny-service-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}.tiny-service-head strong{display:block;color:var(--text,#eee0ff);font-size:13px}.tiny-services{display:grid;gap:8px;margin-bottom:16px}.tiny-services>div{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #463153;border-radius:10px;background:#1b1224}.tiny-services small{margin-left:10px;color:#b49ac8}.tiny-setup-note{color:#c6afd9;font-size:12px;line-height:1.6;margin:10px 0 18px}.tiny-setup-note strong{color:#ebd5ff}.tiny-setup-note ul{padding-left:18px;margin:8px 0}.tiny-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.tiny-overlay{display:block;width:100%;max-width:512px;border-radius:12px;margin:16px auto 0}.tiny-call{display:flex;gap:16px;align-items:center;margin:16px 0;color:#b49ac8}.tiny-call strong{color:#e8b4f1;font-size:20px}.tiny-result .path-block{white-space:pre-wrap}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 25%,#30203d55,transparent 65%),var(--bg)}.login-card{width:100%;max-width:420px;padding:36px!important;box-shadow:0 25px 100px #0006}.login-card .brand{padding:0;margin-bottom:42px}.login-card h1{font-size:32px;margin:10px 0 12px;color:var(--ink)}.login-card>p{color:var(--muted);margin:0 0 28px}.login-card input{min-height:48px}.login-card button{min-height:48px;justify-content:space-between;margin-top:8px}.login-error{color:var(--pink);font-size:13px}.login-foot{border-top:1px solid var(--line);padding-top:22px;margin-top:30px;font-size:11px;color:var(--muted)}

#block-canvas{display:block;width:100%;height:auto;background:#100b16;border:1px solid #694377;border-radius:12px;cursor:crosshair;touch-action:manipulation;margin:12px 0 18px}.block-calibration{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}.block-calibration summary{cursor:pointer;color:#e0bcf6}.block-calibration textarea{font-family:monospace;font-size:11px;min-height:220px}.block-presence{display:grid;gap:12px;font-size:12px;line-height:1.5;color:#d4bcdf;margin:16px 0}.block-presence label{display:flex;align-items:flex-start;gap:9px}.block-presence input{width:auto;margin-top:3px}
.stack{grid-template-columns:minmax(0,1fr)}.stack>*{min-width:0}#tinyastral-block .data-table{white-space:normal}#tinyastral-block .data-table th,#tinyastral-block .data-table td{padding:10px 7px}#tinyastral-block .tiny-actions button{min-width:0}

.multiview-matches{width:100%;height:auto;border-radius:10px;margin-top:12px}#multiview-slot{margin-bottom:20px}#multiview-slot[hidden]{display:none}.inference-layout #multiview-slot{margin-bottom:0}@media(min-width:1400px){.camera-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.inference-preview-grid .camera-panel:last-child:nth-child(3){grid-column:1/-1;max-width:70%;justify-self:center;width:100%}}

.multi-point-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.multi-point-grid canvas{width:100%;height:auto;cursor:crosshair;border:1px solid #694377;border-radius:10px;background:#100b16;touch-action:manipulation}#multiview-dialog{max-width:1150px}@media(max-width:650px){.multi-point-grid{grid-template-columns:minmax(0,1fr)}}

.block-calibration input[type=checkbox]{width:auto;min-height:0;margin-right:8px;accent-color:#c799ef}

.outcome-gallery-option{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px;border:1px solid #9b70b94d;border-radius:10px;background:#b68de40b;color:#e9d3f4;font-size:13px;cursor:pointer}.outcome-gallery-option input{width:16px;height:16px;min-height:0;margin:1px 0 0;flex-shrink:0;accent-color:#c799ef}.outcome-gallery-option small{display:block;color:#b79ac7;font-size:11px;line-height:1.5;margin-top:5px}

.sam-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 12px}.sam-heading h3{font-size:15px;margin:0;color:#ecd4fa}.sam-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sam-preview-grid figure{margin:0;min-width:0;padding:8px;border:1px solid #463153;background:#160f1e;border-radius:12px}.sam-preview-grid figcaption{font-size:12px;color:#d6b8eb;margin:2px 4px 8px}.sam-preview-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:7px;background:#0d0813}.sam-counts{margin-top:12px}.sam-counts th,.sam-counts td{padding:10px}.sam-counts .pill{font-size:9px;white-space:normal}@media(max-width:700px){.sam-preview-grid{grid-template-columns:1fr}.sam-heading{align-items:flex-start;flex-direction:column;gap:6px}}