:root{--page: #f7f6f2;--bg: #f7f6f2;--panel: rgba(255, 255, 255, .78);--surface: #ffffff;--line: #dedbd2;--border: #dedbd2;--line-strong: #cfcabd;--ink: #152238;--text: #152238;--muted: #596273;--subtle: #8a93a6;--navy: #183553;--teal: #2d9bb3;--teal-dark: #166d83;--teal-deep: #0f5567;--primary: #166d83;--primary-text: #ffffff;--ochre: #95680f;--soft: #eef6f7;--success: #237c4d;--danger: #b32525;--danger-deep: #8d1a1a;--warn-bg: rgba(149, 104, 15, .08);--warn-border: rgba(149, 104, 15, .28);--error-bg: rgba(179, 37, 37, .06);--radius: 16px;--radius-sm: 10px;--shadow: 0 12px 32px rgba(24, 53, 83, .05);--font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;font-family:var(--font-ui);color:var(--ink)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(circle at 18% 0%,#eef3f3 0,transparent 34%),var(--page);color:var(--text);font-size:14px;line-height:1.5}button,input,textarea,select{font:inherit}h1{font-family:var(--font-display);font-weight:500;color:var(--navy);font-size:32px;line-height:1.05;letter-spacing:-.01em;margin:0 0 6px}h2{font-size:18px;font-weight:600;color:var(--navy);margin:0 0 12px}h3{font-size:11px;margin:0 0 10px;color:var(--ochre);text-transform:uppercase;letter-spacing:.16em;font-weight:600}h4{margin:0;font-size:14px;color:var(--navy)}a{color:var(--teal-dark);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}.muted{color:var(--muted)}.strong{font-weight:600}.num{text-align:right;font-variant-numeric:tabular-nums}.error-text{color:var(--danger)}.error-text.inline{margin-left:8px}.app-shell{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:22px;padding:0 28px;height:60px;background:#ffffffd1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:var(--text)}.brand:hover{text-decoration:none}.brand-logo{display:block;height:26px;width:auto}.brand-mark{font-weight:700}.brand-sub{border-left:1px solid var(--line);padding-left:12px;color:var(--muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase}.topnav a{color:var(--muted);font-weight:500;padding:4px 0}.topnav a.active{color:var(--navy);border-bottom:2px solid var(--teal)}.topbar-spacer{flex:1}.user-chip{display:flex;flex-direction:column;align-items:flex-end;font-size:12px}.user-name{font-weight:600;color:var(--ink)}.link-muted{color:var(--teal-dark);font-weight:500}.app-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:34px 28px 72px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}.actions-row{display:flex;gap:8px;align-items:center}.section{margin-top:34px}.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:12px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:16px}.card.narrow{max-width:460px}.table-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}.data-table th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--muted);background:#eef6f780}.data-table td{font-size:14px;color:var(--ink)}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:#ffffff80}.row-link{font-weight:600;color:var(--teal-dark)}.compact-list{margin:0;padding-left:16px}.compact-list li{margin:2px 0}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line-strong);background:#fff;color:var(--navy);border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .12s ease,color .12s ease,border-color .12s ease}.btn:hover{background:#f5f2e9d9;border-color:var(--navy);text-decoration:none}.btn.primary{background:var(--teal-dark);border-color:var(--teal-dark);color:var(--primary-text);font-weight:600}.btn.primary:hover{background:var(--teal-deep);border-color:var(--teal-deep)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.small{padding:5px 11px;font-size:12px}.icon-btn{border:none;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}.link-btn{border:none;background:none;padding:0;color:var(--teal-dark);cursor:pointer;font:inherit;font-weight:500}.link-btn:hover{text-decoration:underline;text-underline-offset:3px}.badge,.chip,.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.6}.tag.subtle{background:#1835530f;color:var(--muted);font-weight:500}.tag-row{display:flex;flex-wrap:wrap;gap:4px}.surface-api{background:#2d9bb31a;color:var(--teal-deep)}.surface-integration{background:#237c4d1a;color:var(--success)}.surface-ui_only{background:#18355317;color:var(--navy)}.device-active,.session-done,.client-active{background:#237c4d1a;color:var(--success)}.device-idle,.session-processing,.session-uploaded{background:var(--warn-bg);color:var(--ochre)}.device-offline,.session-error,.client-disabled{background:var(--error-bg);color:var(--danger)}.device-installed{background:#1835530f;color:var(--muted)}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.field span{font-size:13px;font-weight:500;color:var(--ink)}.field input,.field textarea,.field select{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14px;background:#ffffffeb;color:var(--ink);transition:border-color .12s ease,box-shadow .12s ease}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #2d9bb333}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1522386b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}.modal{background:#fff;border:1px solid var(--line);border-radius:18px;width:100%;max-width:480px;max-height:90vh;overflow:auto;box-shadow:0 28px 70px #1522383d}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0}.modal-body{padding:22px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.callout{border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px;font-size:13px}.callout.warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--ink)}.callout.error{background:var(--error-bg);border:1px solid rgba(179,37,37,.28);color:var(--ink);margin-bottom:16px}.copy-field{margin-bottom:16px}.copy-field label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre);margin-bottom:6px}.copy-row{display:flex;gap:8px;align-items:stretch}.copy-value{flex:1;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}.instructions ol{padding-left:20px}.instructions li{margin:6px 0}.rollup-summary{display:flex;align-items:center;gap:28px;margin-bottom:18px}.metric{display:flex;flex-direction:column}.metric-val{font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--navy)}.metric-label{font-size:12px;color:var(--muted);font-weight:500}.sop-list{list-style:none;margin:0;padding:0}.sop-step{border-bottom:1px solid var(--line);padding:16px 0}.sop-step:last-child{border-bottom:none}.sop-step-head{display:flex;align-items:center;gap:10px}.sop-index{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--teal-dark);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.sop-desc{margin:6px 0}.sop-meta{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin:6px 0 0;font-size:13px}.sop-meta dt{color:var(--muted);font-weight:600}.sop-meta dd{margin:0}.summary{background:var(--soft);border-left:3px solid var(--teal);padding:12px 14px;border-radius:0 10px 10px 0;margin-bottom:12px}.sop-step.seekable .sop-step-head{cursor:pointer;border-radius:var(--radius-sm);margin:-4px -8px 0;padding:4px 8px;transition:background .12s ease}.sop-step.seekable .sop-step-head:hover{background:#2d9bb314}.sop-step.seekable .sop-step-head:focus-visible{outline:none;box-shadow:0 0 0 3px #2d9bb333}.sop-jump{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--teal-dark);font-variant-numeric:tabular-nums}.sop-jump .clock{font-size:11px}.sop-why{margin:6px 0 0;font-size:13px;color:var(--muted)}.sop-why-label{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre);margin-right:6px}.sop-quote{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--teal);background:var(--soft);border-radius:0 10px 10px 0;font-style:italic;color:var(--navy);display:flex;flex-direction:column;gap:2px}.sop-quote-time{font-style:normal;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--teal-dark);font-variant-numeric:tabular-nums}.sop-quote-time .clock{font-size:11px}.objective-card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ochre);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow)}.objective-card h3{margin:0 0 8px}.objective-card p{margin:0;font-size:15px;color:var(--navy)}.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.skill-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}.skill-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.skill-card-head h4{font-size:14px}.skill-desc{margin:0;font-size:13px;color:var(--muted)}.skill-systems{margin-top:auto}.task-desc{color:var(--muted);margin:-8px 0 0}.transcript{white-space:pre-wrap;font-size:13px;max-height:320px;overflow:auto}.video-panel{display:flex;flex-direction:column;gap:16px}.session-video{width:100%;max-height:540px;background:#000;border-radius:var(--radius-sm)}.video-missing{border:1px dashed var(--line);border-radius:var(--radius-sm);padding:24px}.timeline{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}.timeline-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px}.timeline-lanes{position:relative}.timeline-lane{display:flex;align-items:center;gap:10px;height:26px}.lane-label{width:96px;flex-shrink:0;font-size:11px;color:var(--muted);text-align:right}.lane-track{position:relative;flex:1;height:100%;background:linear-gradient(to bottom,transparent 45%,var(--line) 45%,var(--line) 55%,transparent 55%)}.tl-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;border:1px solid #fff;cursor:pointer;padding:0}.tl-marker:hover{transform:translate(-50%,-50%) scale(1.4)}.tl-marker.tl-marker{background:var(--teal-dark);width:12px;height:12px;border-radius:2px}.tl-mouse_click{background:var(--success)}.tl-key{background:var(--ochre);width:7px;height:7px}.tl-narration_segment{background:#7b3fe4}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);margin-left:106px;pointer-events:none}.empty-state{text-align:center;padding:40px 16px;color:var(--muted)}.empty-title{font-weight:600;color:var(--ink)}.error-card{border-color:#b325254d}.loading-inline{display:flex;align-items:center;gap:10px;padding:16px 0}.centered-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}.auth-logo{width:168px;height:auto;margin-bottom:4px}.spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}.spinner.small{width:18px;height:18px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}