@font-face{font-family:Manrope;src:url('/static/manrope.ttf') format('truetype');font-display:swap}
:root{font-family:Manrope,system-ui,sans-serif;color:#143247;background:#f3f6f7;font-synthesis:none;--navy:#102e42;--teal:#137e83;--border:#dbe4e7;--muted:#627783;--orange:#d56544;--white:#fff}
*{box-sizing:border-box}
body{margin:0}
button,input{font:inherit}
button,a,input{outline-offset:4px}
button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 14px;border:1px solid #b9ccd2;border-radius:7px;background:#fff;color:var(--navy);font-size:12px;font-weight:750;cursor:pointer;transition:background .15s,border-color .15s}
button:hover:enabled{border-color:var(--teal);background:#eef7f7}
button:disabled{cursor:default;opacity:.45}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #5ab2bc}
button.hosted-primary{background:var(--teal);border-color:var(--teal);color:#fff}
button.hosted-primary:hover:enabled{background:#0c686e;border-color:#0c686e}
a{color:#14757b;text-decoration:none}
a:hover{text-decoration:underline}
input{width:100%;padding:12px;border:1px solid #b9cbd1;border-radius:7px;background:#fff;color:var(--navy);min-height:44px}
label{display:block;font-size:12px;font-weight:750;margin:18px 0 7px}
h1,h2,h3,p{margin-top:0}
h1{letter-spacing:-1.2px;line-height:1.15}
p{line-height:1.65}
.hosted-brand{display:block;width:168px;height:auto}
.hosted-eyebrow{color:var(--teal);font-size:10px;font-weight:850;letter-spacing:1.7px;text-transform:uppercase;margin-bottom:12px}
.hosted-muted,.hosted-help{color:var(--muted)}
.hosted-help{font-size:11px;line-height:1.7}
.hosted-loading{max-width:1100px;margin:10vh auto;padding:30px}
.hosted-badge{display:inline-flex;align-items:center;align-self:flex-start;flex-shrink:0;max-width:100%;border-radius:5px;padding:7px 10px;font-size:10px;font-weight:800;line-height:1.4;background:#eaf0f3;color:#3e5968;overflow-wrap:anywhere}
.hosted-badge[data-mode='manual'],.hosted-badge[data-mode='control']{background:#dff2ed;color:#17694f}
.hosted-badge[data-mode='pausing'],.hosted-badge[data-mode='unknown']{background:#fff0dc;color:#8a591e}
.hosted-count{padding:3px 8px;background:#e6eef0;border-radius:5px;font-size:10px;font-weight:800}
.hosted-callout{border-left:3px solid var(--teal);padding:12px;background:#eef7f7;font-size:12px;overflow-wrap:anywhere}
.is-error{color:#a33c28}
.hosted-callout.is-error{border-color:var(--orange);background:#fff0eb}
.hosted-notice{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);max-width:min(600px,calc(100vw - 32px));padding:14px 20px;border-radius:8px;background:var(--navy);box-shadow:0 8px 32px #102e4220;color:#fff;font-size:12px;line-height:1.6;z-index:30;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.hosted-notice.is-visible{opacity:1;transform:translate(-50%,0)}
.hosted-notice.is-error{background:#983e29;color:#fff}
.hosted-login{display:grid;grid-template-columns:minmax(360px,1fr) minmax(390px,1fr);min-height:100vh}
.login-intro{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,7vw,110px);background:var(--navy);color:#fff}
.login-intro .hosted-brand{width:190px;margin-bottom:70px;background:#fff;padding:13px;border-radius:7px}
.login-intro .hosted-eyebrow{color:#7dcccd}
.login-intro h1{max-width:520px;font-size:clamp(38px,4vw,64px);margin-bottom:24px}
.login-intro>p:not(.hosted-eyebrow){max-width:450px;color:#c8d9e2;font-size:14px}
.login-principle{display:flex;align-items:flex-start;gap:20px;margin-top:40px;padding-top:28px;border-top:1px solid #315064;max-width:450px}
.principle-mark{font-size:32px;line-height:1;color:#75c5c7}
.login-principle p{margin:0;color:#bcd0dc;font-size:12px}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:50px 35px;background:#fff}
.login-form{width:100%;max-width:370px}
.login-form h2{font-size:26px;letter-spacing:-.6px;line-height:1.3;margin-bottom:12px}
.login-form>.hosted-muted{font-size:13px}
.login-form button{width:100%;margin-top:24px}
.login-form .hosted-help{margin-top:22px}
.form-error{font-size:12px;color:#a33c28;margin:12px 0 0;min-height:20px}
.hosted-topbar{height:82px;display:flex;align-items:center;gap:30px;padding:0 28px;background:#fff;border-bottom:1px solid var(--border)}
.hosted-brand-link{flex-shrink:0}
.workspace-title{font-size:12px;font-weight:750;padding-left:26px;border-left:1px solid var(--border)}
.hosted-account{display:flex;align-items:center;gap:22px;margin-left:auto;min-width:0}
.hosted-account strong,.hosted-account small{display:block;text-align:right;font-size:11px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hosted-account small{color:var(--muted);margin-top:3px;font-size:10px}
.hosted-account button{font-size:11px;min-height:35px;padding:7px 12px}
.hosted-layout{display:grid;grid-template-columns:226px minmax(0,1fr);min-height:calc(100vh - 82px)}
.migration-sidebar{padding:28px 18px;background:#fff;border-right:1px solid var(--border)}
.sidebar-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 5px}
.sidebar-heading h2{font-size:12px;margin:0}
.migration-item{display:block;width:100%;text-align:left;justify-content:flex-start;margin:6px 0;border-color:transparent;background:transparent;padding:12px}
.migration-item strong{display:block;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.migration-item span{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-top:4px}
.migration-item.is-selected{background:#eaf6f5;border-color:#c7e5e2}
.migration-item.is-selected strong{color:#086c72}
.new-migration{margin-top:28px;padding-top:10px;border-top:1px solid var(--border)}
.new-migration input{min-height:39px;font-size:11px;padding:10px}
.new-migration button{width:100%;margin-top:10px;font-size:11px}
.migration-sidebar>.hosted-help{padding:15px 5px 0;font-size:10px}
.migration-main{min-width:0;padding:28px}
.hosted-empty{margin:8vh auto;max-width:630px;padding:45px;background:#fff;border:1px solid var(--border);border-radius:10px}
.hosted-empty h1{font-size:38px;margin-bottom:18px}
.hosted-empty>p:not(.hosted-eyebrow){font-size:13px;color:var(--muted);max-width:450px}
.migration-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.migration-heading .hosted-eyebrow{margin-bottom:8px}
.migration-heading h1{font-size:29px;margin-bottom:10px;overflow-wrap:anywhere}
.migration-heading .hosted-help{margin-bottom:0}
.migration-id{font-family:ui-monospace,monospace;font-size:10px}
.handoff-panel{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:18px 20px;border:1px solid var(--border);border-radius:9px;background:#fff;margin-bottom:24px}
.handoff-description{max-width:710px;min-width:0}
.handoff-description>p{font-size:11px;margin:9px 0 0}
.handoff-description .hosted-help{font-size:10px;color:var(--muted)}
.handoff-description progress{width:100%;height:6px;margin-top:12px;accent-color:var(--teal)}
.handoff-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:385px;flex-shrink:0}
.handoff-actions button{font-size:10px;min-height:36px;padding:9px 11px}
.migration-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.workbench-pane,.browser-pane{border:1px solid var(--border);border-radius:9px;overflow:hidden;background:#fff;min-width:0}
.pane-heading{min-height:49px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border)}
.pane-heading h2{font-size:11px;margin:0;white-space:nowrap}
.pane-heading a{font-size:10px;font-weight:750;white-space:nowrap}
.workbench-frame{display:block;border:0;width:100%;height:calc(100vh - 320px);min-height:700px;background:#f4f7f8}
.browser-panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0;grid-row:1}
.browser-pane .pane-heading{padding:13px 12px}
.browser-pane-status{font-size:9px;min-height:37px;line-height:1.5;padding:11px 12px 8px;margin:0;border-bottom:1px solid var(--border);color:var(--muted)}
.browser-mount{height:520px;min-height:330px;background:#102c3c}
.browser-frame{display:block;border:0;width:100%;height:100%;background:#102c3c}
.browser-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:24px;color:#b7ceda;text-align:center}
.browser-placeholder span{font-size:32px;font-weight:800;color:#477182}
.browser-placeholder p{font-size:11px;max-width:180px}
.viewer-body{display:flex;flex-direction:column;overflow:hidden;height:100dvh;min-height:160px;background:#102c3c;color:#e4eef2}
.viewer-toolbar{display:flex;align-items:center;gap:10px;min-height:43px;padding:8px 10px;background:#fff;color:var(--navy);border-bottom:1px solid var(--border)}
.viewer-toolbar strong{font-size:10px;flex:1}
.viewer-toolbar .hosted-badge{padding:5px 7px;font-size:9px}
.viewer-toolbar button{font-size:9px;min-height:27px;padding:4px 7px}
.viewer-status{flex-shrink:0;margin:0;padding:8px 10px;line-height:1.5;color:#b8d2df;font-size:9px;background:#143649}
.viewer-status.is-error{color:#ffd0bc}
.viewer-screen{display:flex;flex:1;min-height:0;min-width:0;overflow:hidden}
[hidden]{display:none!important}
@media(max-width:1550px){.migration-panes{grid-template-columns:minmax(0,1fr)}.browser-mount{height:420px;min-height:330px}.workbench-frame{height:840px;min-height:650px}.browser-panes{grid-row:1}.handoff-panel{align-items:flex-start}.handoff-actions{max-width:270px}.migration-main{padding:24px}.browser-pane-status{min-height:34px}}
@media(max-width:1000px){.hosted-layout{grid-template-columns:185px minmax(0,1fr)}.hosted-topbar{padding:0 20px;gap:20px}.workspace-title{display:none}.hosted-brand{width:145px}.migration-main{padding:20px}.handoff-panel{display:block}.handoff-actions{max-width:none;justify-content:flex-start;margin-top:16px}.migration-sidebar{padding:24px 12px}.migration-heading h1{font-size:25px}.pane-heading{padding:12px}.browser-mount{height:360px}.workbench-frame{height:900px}}
@media(max-width:700px){.hosted-login{grid-template-columns:1fr}.login-intro{padding:35px;min-height:320px}.login-intro .hosted-brand{width:170px;margin-bottom:35px}.login-intro h1{font-size:38px;max-width:390px}.login-intro>p:not(.hosted-eyebrow){font-size:12px}.login-principle{display:none}.login-form-wrap{padding:38px 28px}.hosted-topbar{height:auto;min-height:74px;padding:14px 18px;gap:10px}.hosted-topbar .hosted-brand{width:130px}.hosted-account{gap:10px}.hosted-account strong{max-width:125px;font-size:10px}.hosted-account small{max-width:125px;font-size:9px}.hosted-account button{min-height:30px;padding:6px 9px;font-size:10px}.hosted-layout{display:block}.migration-sidebar{padding:18px;border-right:0;border-bottom:1px solid var(--border)}.sidebar-heading{margin-bottom:10px}#migration-list{display:flex;gap:8px;overflow-x:auto}.migration-item{min-width:170px;width:auto;flex:0 0 170px;margin:0}.new-migration{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px;margin-top:14px;padding-top:14px}.new-migration label{grid-column:1/-1;margin:0}.new-migration button{margin:0;width:auto;min-height:39px}.migration-sidebar>.hosted-help{display:none}.migration-main{padding:18px 12px}.migration-heading{gap:12px;margin-bottom:16px}.migration-heading h1{font-size:24px}.migration-id{font-size:8px}.migration-heading>.hosted-badge{max-width:115px;font-size:9px}.handoff-panel{padding:16px}.browser-panes{grid-template-columns:1fr}.browser-mount{height:410px}.browser-pane-status{font-size:10px}.pane-heading h2{font-size:12px}.workbench-frame{height:1000px;min-height:650px}.hosted-empty{padding:28px;margin:24px 0}.hosted-empty h1{font-size:30px}.viewer-toolbar{gap:6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Readable controls and status text in the surrounding hosted workspace. */
.hosted-shell { font-size: 14px; }
.hosted-shell button { min-height: 44px; font-size: 13px; }
.hosted-shell .hosted-help { font-size: 13px; line-height: 1.55; }
.workspace-title, .sidebar-heading h2 { font-size: 13px; }
.hosted-account strong { font-size: 12px; }
.hosted-account small { font-size: 11px; }
.migration-item strong { font-size: 13px; }
.migration-item span, .new-migration input, .new-migration button { font-size: 12px; }
.migration-sidebar > .hosted-help { font-size: 12px; }
.hosted-badge, .hosted-count { font-size: 11px; }
.handoff-description > p, .handoff-description .hosted-help { font-size: 13px; }
.handoff-actions button { min-height: 44px; font-size: 12px; }
.pane-heading h2 { font-size: 13px; }
.pane-heading a { font-size: 12px; }
.browser-pane-status, .browser-placeholder p { font-size: 12px; }
.login-form > .hosted-muted { font-size: 14px; }
.login-form .hosted-help, .form-error { font-size: 13px; }
@media (max-width: 700px) {
  .hosted-shell .hosted-account button { min-height: 44px; }
  .hosted-shell .new-migration button { min-height: 44px; }
  .handoff-actions { justify-content: stretch; }
  .handoff-actions button { flex: 1 1 150px; }
  .hosted-shell .browser-pane-status { font-size: 12px; }
}
/* Empty browser panes should not bury the workbench before sessions start. */
.browser-mount:has(.browser-placeholder) { height: 190px; min-height: 0; }
@media (max-width: 700px) {
  .browser-mount:has(.browser-placeholder) { height: 140px; }
}
/* The live viewer remains legible when embedded or opened separately. */
.viewer-toolbar { min-height: 50px; padding: 8px 12px; flex-wrap: wrap; }
.viewer-toolbar strong { font-size: 13px; min-width: 100px; }
.viewer-toolbar .hosted-badge { font-size: 11px; }
.viewer-toolbar button { min-height: 44px; padding: 8px 12px; font-size: 12px; }
.viewer-status { padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.pane-heading a { white-space: normal; text-align: right; }