:root{ --z-dropdown:70; --z-sticky:80; --z-modal-backdrop:1000; --z-modal:1010; --z-toast:1100; --z-tooltip:1200; }
.dlgback{ position:fixed; inset:0; z-index:var(--z-modal-backdrop); display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,5,7,.66); opacity:0; transition:opacity 160ms cubic-bezier(.22,1,.36,1); }
.dlgback.show, .dlgback[data-visible="1"]{ opacity:1; }
.dlg{ position:relative; z-index:var(--z-modal); width:min(420px,100%); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; background:#1b1b1b; border:1px solid rgba(255,255,255,.14); border-radius:var(--dlg-r); box-shadow:var(--dlg-shadow); padding:0; transform:translateY(6px) scale(.99); transition:transform 160ms cubic-bezier(.22,1,.36,1); }
.dlg:focus{ outline:none; }
.dlgback.show .dlg, .dlgback[data-visible="1"] .dlg{ transform:none; }
.dialog-head{ flex:0 0 auto; min-height:58px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; box-sizing:border-box; padding:15px 16px 13px 18px; border-bottom:var(--dlg-head-rule); background:var(--dlg-head-bg); }
.dialog-heading{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.dlg .dtitle{ margin:0; color:var(--txt); font-size:var(--dlg-title-size); line-height:var(--dlg-title-lh); font-weight:var(--dlg-title-weight); letter-spacing:0; text-wrap:balance; }
.dlg .dsubtitle{ margin:0; color:var(--muted); font-size:11px; line-height:1.35; text-wrap:pretty; }
.dialog-close{ appearance:none; flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:var(--r-control); background:var(--dlg-close-bg); color:var(--dlg-close-ink); padding:0; font:20px/1 var(--font); cursor:pointer; }
.dialog-close:hover{ background:rgba(255,255,255,.06); color:var(--txt); }
.dialog-close > svg{ display:block; width:18px; height:18px; }    
.dialog-body{ min-height:0; overflow:auto; padding:16px 18px; color:var(--txt); }
.dialog-body{ scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(176,176,184,.46) transparent; }
.dialog-body::-webkit-scrollbar{ width:7px; height:7px; }
.dialog-body::-webkit-scrollbar-track{ background:transparent; }
.dialog-body::-webkit-scrollbar-thumb{ background:rgba(176,176,184,.38); border:2px solid transparent; border-radius:var(--r-thumb); background-clip:content-box; }
.dialog-body::-webkit-scrollbar-thumb:hover{ background:rgba(188,188,196,.54); background-clip:content-box; }
.dialog-body::-webkit-scrollbar-button{ display:none; width:0; height:0; }
.dialog-foot{ flex:0 0 auto; padding:11px 14px; border-top:var(--dlg-foot-rule); background:var(--dlg-foot-bg); }
.dlg .dmsg{ text-wrap:pretty; max-width:68ch; font-size:var(--dlg-msg-size); color:var(--dlg-msg-ink); line-height:var(--dlg-msg-lh); }
.dlg .dacts{ min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; }
.dacts-start, .dacts-end{ display:flex; align-items:center; gap:8px; }
.dacts-end{ margin-left:auto; }
.dbtn, .dlg .dbtn{ min-height:var(--ctl-btn-h); font:600 12px/1.2 var(--font); padding:7px 13px; border-radius:var(--r-control); cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--txt); transition:background 140ms ease,border-color 140ms ease,color 140ms ease,opacity 140ms ease; }
.dlg .dbtn{ min-height:var(--dlg-btn-h); font:var(--dlg-btn-font); background:var(--dlg-btn-bg); border-color:var(--dlg-btn-edge); }    
.dbtn:disabled{ pointer-events:none; }
.dcancel:hover, .dneutral:hover, .dextra:hover, .dlg .dcancel:hover, .dlg .dneutral:hover, .dlg .dextra:hover{ background:rgba(255,255,255,.05); }
.dok:hover, .dlg .dok:hover, body.builderdeploy .dlg .dbtn.dok:not(.danger):hover{ background:var(--primary-hi); border-color:var(--primary-hi); color:var(--primary-hi-ink); --kbd-on-ink:currentColor; --kbd-on-edge:currentColor; }
.dok.danger, .dlg .dok.danger{ background:var(--bad); color:#fff; border-color:var(--bad); }
.dok.danger:hover, .dlg .dok.danger:hover{ background:var(--bad-rest); border-color:var(--bad-rest); color:#fff; }
.dthird:hover, .dlg .dthird:hover{ background:rgba(255,255,255,.05); }    
.dlg :is(.dcancel,.dneutral,.dextra,.dthird):hover{ background:var(--dlg-btn-bg-hover); }
.qrdlg{ width:min(460px,100%); }
.qrcard{ --qr-side:clamp(160px, calc(100dvh - 190px), 266px); width:var(--qr-side); height:var(--qr-side); margin:14px auto 2px; padding:16px; background:#fff; border-radius:var(--r-surface); display:flex; align-items:center; justify-content:center; }    
.qrcard svg{ width:100%; height:100%; display:block; }
.dlg .qrcard{ border-radius:var(--qrcard-r); }
.dlg .qrlink{ border-radius:var(--qrlink-r); font-size:var(--qrlink-size); }



body.builderdeploy .dialog-head{ min-height:0; padding:var(--dlg-close-inset) var(--dlg-close-inset) 0 20px; }
body.builderdeploy .dlg .dtitle{ padding-top:calc((var(--dlg-close-h) - var(--dlg-title-size) * var(--dlg-title-lh)) / 2); }    
body.builderdeploy .dialog-close{ width:var(--dlg-close-h); height:var(--dlg-close-h); }
body.builderdeploy .dialog-body{ padding:12px 20px 20px; scrollbar-gutter:auto; }
body.builderdeploy .dialog-foot{ padding:0 var(--dlg-inset) var(--dlg-inset); }
body.builderdeploy .dlg .dacts{ min-height:0; gap:8px; }
body.builderdeploy .dlg .dbtn{ box-sizing:border-box; height:var(--dlg-btn-h); padding:0 16px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
 
body.builderdeploy .dlg .dacts, body.builderdeploy .dlg .dacts-end{ flex-wrap:wrap; min-width:0; }
body.builderdeploy .dlg .dacts-end > .dbtn{ flex:1 1 auto; }
body.builderdeploy .dlg .qrlink{ margin-top:14px; padding:10px 14px; text-align:left; }
body.builderdeploy .dlg .qrcard{ margin:16px auto 0; }
@media(max-height:560px){
  body.builderdeploy .dialog-body{ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%); }
   
  body.builderdeploy .qrdlg:has(.qrcard:not(.qrhidden)){ width:min(720px,100%); }
  body.builderdeploy .qrdlg .dialog-body:has(.qrcard:not(.qrhidden)){ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr; column-gap:20px; align-items:start; -webkit-mask-image:none; mask-image:none; }    
  body.builderdeploy .qrdlg .dialog-body > :not(.qrcard){ grid-column:1; }
  body.builderdeploy .dlg .qrcard{ grid-column:2; grid-row:1 / span 2; align-self:start; margin:0; }
}
@media(max-width:620px){
  .dlgback{ align-items:center; padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }   


  .dlg{ width:100%; max-height:calc(100dvh - 24px); }
  .dialog-body{ padding:14px; }
  .dialog-foot{ padding:10px 12px; }
}
@media(prefers-reduced-motion:reduce){
  .dlgback, .dlg{ transition:none; }
}



.bartop .journey{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:7px; pointer-events:none; }
.floatbar:not(.builder-page-top) .journey{ left:calc(50% - 198px); }    
.jstep{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--low); white-space:nowrap; }
.jstep .jn{ width:18px; height:18px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; padding-top:1px; line-height:1; text-align:center; font-size:var(--label-size); font-family:var(--mono); font-variant-numeric:tabular-nums; }
.jstep.done{ color:var(--muted); } .jstep.done .jn{ background:var(--wash); border-color:rgba(var(--accent-rgb),.5); color:var(--accent); }
.jstep.active{ color:var(--txt); } .jstep.active .jn{ background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.jsep{ width:18px; height:1px; background:var(--line); }
@media(max-width:1018px){
  body:not(.builderdeploy) .bartop .jstep:not(.active) .jlbl{ display:none; }    
}
@media(max-width:760px){ body:not(.builderdeploy) .bartop .journey{ display:none; } }    



.crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:9px; }    
.crumbs .clink{ color:var(--txt); font-size:var(--m-ui-type-body); font-weight:500; cursor:pointer; text-decoration:none; transition:color 140ms ease; }    
.crumbs .clink:hover{ color:var(--link); }
.crumbs .ccur{ color:var(--muted); font-size:var(--m-ui-type-body); }    
.crumbs .csep{ color:var(--low); font-size:11px; }




.chrome-flow{ display:flex; flex-direction:column; width:100%; gap:12px; }
.chrome-question{ width:100%; margin:0; box-shadow:var(--elev); padding:20px; box-sizing:border-box; display:flex; flex-direction:column; min-height:0; }
.chrome-question-head{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.chrome-question-head h3{ margin:0; color:var(--txt); font-size:17px; line-height:1.25; font-weight:700; letter-spacing:0; }
.chrome-question-head p{ margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.45; }
.chrome-question-body{ display:flex; flex-direction:column; min-width:0; }
.chrome-choice-group{ display:flex; flex-direction:column; gap:8px; width:100%; }
.chrome-choice{ width:100%; min-height:64px; box-sizing:border-box; padding:13px 14px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-surface); color:var(--txt); cursor:pointer; font:inherit; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; text-align:left; transition:background 140ms ease,border-color 140ms ease,color 140ms ease,box-shadow 140ms ease; }
.chrome-choice.marked{ grid-template-columns:14px minmax(0,1fr) auto; }
.chrome-choice:hover{ border-color:rgba(var(--accent-rgb),.42); background:var(--wash); }
.chrome-choice.on{ border-color:rgba(var(--accent-rgb),.62); background:rgba(var(--primary-rgb),.16); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.10); }
.chrome-choice-mark{ width:var(--mark-size); height:var(--mark-size); border:1px solid var(--mark-edge); border-radius:var(--r-nested); position:relative; background:var(--mark-fill); }
.chrome-choice.on .chrome-choice-mark, .chrome-tick > .chrome-choice-native:checked + .chrome-choice-mark{ border-color:var(--mark-on-edge); background:var(--mark-on-fill); box-shadow:var(--mark-on-ring); }



.chrome-tick{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:var(--touch-target); height:var(--touch-target); cursor:pointer; }
.chrome-tick > .chrome-choice-native:checked + .chrome-choice-mark::after{ content:""; position:absolute; inset:0; background-color:var(--mark-check-ink); -webkit-mask:var(--mark-check); mask:var(--mark-check); }
:where(.dev-pointer) .chrome-tick:hover > .chrome-choice-native:not(:checked) + .chrome-choice-mark{ border-color:var(--mark-hover-edge); }
.chrome-tick:focus-within > .chrome-choice-mark{ outline:2px solid var(--focus-ink, var(--accent)); outline-offset:2px; }
.chrome-choice-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.chrome-choice b{ color:var(--txt); font-size:13px; line-height:1.2; font-weight:700; }
.chrome-choice small{ color:var(--muted); font-size:11.5px; line-height:1.35; }
.chrome-choice small span{ color:var(--accent); font:700 9px/1 var(--mono); font-variant-numeric:tabular-nums; text-transform:uppercase; letter-spacing:.06em; margin-right:7px; }
.chrome-choice-detail{ margin-top:4px; padding-left:9px; border-left:2px solid rgba(var(--accent-rgb),.42); color:rgba(229,225,236,.82); font-style:normal; font-size:11.5px; line-height:1.35; }
.guide-native-choices{ min-width:0; margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:8px; }
.guide-native-choices>legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }


.chrome-choice:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.chrome-choice-native{ position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }


.guide-text-fields{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.guide-text-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.guide-text-field > label{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.guide-text-fields .chrome-input-suffix{ width:104px; justify-self:start; }
.guide-text-fields .chrome-input-suffix input{ padding:9px 10px; text-align:center; }
.guide-text-fields > em{ font-style:normal; color:var(--low); font-size:11px; line-height:34px; }    
.chrome-input-suffix{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px; justify-self:end; width:136px; }
.chrome-input-suffix input{ width:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-field); background:#141414; color:var(--txt); padding:7px 8px; font:700 12px/1 var(--mono); font-variant-numeric:tabular-nums; text-align:right; outline:0; }
.chrome-input-suffix input::-webkit-outer-spin-button, .chrome-input-suffix input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.chrome-input-suffix input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
.chrome-input-suffix input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--primary-rgb),.18); }
.chrome-input-suffix em{ font-style:normal; color:var(--low); font-size:11px; }
.chrome-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.chrome-actions .dbtn{ min-width:96px; display:inline-flex; align-items:center; justify-content:center; }
@media(max-width:760px){
  .chrome-question{ padding:16px; }
  .chrome-choice{ min-height:60px; }
  .chrome-input-suffix input{ min-height:var(--touch-target); }    
  .guide-text-fields{ gap:10px; }
  .guide-text-fields .chrome-input-suffix{ width:96px; }
  .guide-text-fields > em{ line-height:44px; }
}