*{
  box-sizing:border-box;
}

body{
  min-width:320px;
  min-height:100vh;
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

code{
  color:var(--blue-gray);
}

.login-page h1{
  margin:0;
  color:var(--text);
  font-size:30px;
  line-height:1.05;
}

.login-page p{
  color:var(--muted);
  line-height:1.65;
}

.login-page label{
  display:block;
  margin:1rem 0 .45rem;
  color:var(--text);
  font-size:.9rem;
  font-weight:650;
}

.login-page input[type="text"],
.login-page input[type="password"]{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--radius-tight);
  outline:none;
  background:var(--white);
  color:var(--text);
  font:inherit;
}

.login-page input:focus{
  border-color:var(--blue);
}

.login-page button{
  width:100%;
  margin-top:1.35rem;
  padding:.88rem 1rem;
  border:0;
  border-radius:var(--radius-tight);
  background:var(--blue);
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-weight:750;
}

.login-page button:hover{
  background:var(--blue-hover);
}

.form-error{
  min-height:1.4rem;
  margin:0;
  color:var(--danger);
  font-size:.9rem;
}

.form-error:empty{
  display:none;
}

.login-page{
  color-scheme:light;
  background:var(--surface);
  color:var(--text);
}

.login-header{
  display:flex;
  min-height:58px;
  align-items:center;
  padding:0 max(24px,calc((100vw - 1320px) / 2));
  border-bottom:1px solid var(--line);
  background:var(--white);
}

.login-shell{
  display:grid;
  min-height:calc(100vh - 58px);
  place-items:center;
  padding:1.5rem;
}

.login-card{
  width:min(100%,25rem);
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--radius-tight);
  background:var(--white);
}

.login-page .eyebrow{
  margin:0 0 .65rem;
  color:var(--blue);
  font-size:11px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.login-page .intro{
  margin:.9rem 0 1.5rem;
}

.login-page .intro,
.login-page .security-note{
  color:var(--muted);
}

.login-page .form-error{
  color:var(--danger);
}

.login-page .security-note{
  margin:1.4rem 0 0;
  text-align:center;
  font-size:.82rem;
}

.flash{
  min-height:1.5rem;
  margin:1.25rem 0 0;
  color:var(--success);
}

.flash:empty{
  display:none;
}

.appstore-ui{
  color-scheme:light;
  background:var(--surface);
  color:var(--text);
}

.app-header{
  position:sticky;
  top:0;
  z-index:var(--layer-sticky);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:22px;
  min-height:60px;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
}

.app-brand{
  font-size:20px;
  font-weight:850;
  letter-spacing:-.02em;
}

.app-brand span{
  color:var(--blue);
  font-weight:600;
}

.app-header nav{
  display:flex;
  align-items:center;
  justify-self:end;
  gap:16px;
}

.app-header nav a,
.app-header nav button{
  width:auto;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--blue);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}

.app-header nav a:hover,
.app-header nav button:hover{
  color:var(--blue-hover);
}

.app-header nav form{
  margin:0;
}

.app-action,
.app-submit{
  width:auto;
  margin-top:12px;
  padding:9px 13px;
  border:0;
  border-radius:var(--radius-control);
  background:var(--blue);
  color:#fff;
  font-weight:700;
}

.app-main{
  width:min(1560px,calc(100% - 32px));
  margin:18px auto 72px;
}

.provisioning-workbench{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  align-items:start;
  gap:14px;
}

.config-browser{
  position:sticky;
  top:78px;
  z-index:var(--layer-base);
  min-width:0;
  max-height:calc(100vh - 96px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  overflow:visible;
}

.config-browser:has(.browser-add[open]),
.config-browser.has-open-menu{
  z-index:var(--layer-menu);
}

.config-browser-heading{
  position:sticky;
  top:0;
  z-index:var(--layer-sticky);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:58px;
  padding:10px 12px 10px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(248,250,252,.96);
  backdrop-filter:blur(8px);
}

.config-browser-heading > div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.config-browser-heading span,
.workspace-active-name > small{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.config-browser-heading strong{
  color:var(--title-color);
  font-size:15px;
}

.browser-add{
  position:relative;
  z-index:var(--layer-menu);
  flex:0 0 auto;
}

.browser-add > summary{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border:1px solid var(--blue-gray);
  border-radius:var(--radius-control);
  background:var(--white);
  color:var(--blue);
  cursor:pointer;
  font-size:20px;
  font-weight:400;
  line-height:1;
  list-style:none;
}

.browser-manage-groups,
.browser-select-toggle{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 auto;
  place-items:center;
  margin-left:auto;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--white);
  color:var(--muted);
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  line-height:1;
}

.browser-manage-groups:hover,
.browser-select-toggle:hover,
.browser-select-toggle.is-active{
  border-color:var(--blue);
  color:var(--blue);
}

.browser-select-toggle{margin-left:auto}
.browser-manage-groups{margin-left:0}

.browser-add > summary::-webkit-details-marker{display:none}

.browser-add[open] > summary{
  border-color:var(--blue);
  background:var(--blue-gray);
}

.browser-add-menu{
  position:absolute;
  top:calc(100% + 9px);
  right:auto;
  left:0;
  z-index:var(--layer-menu);
  display:none;
  width:320px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
}

.browser-add[open] .browser-add-menu,
.browser-add:focus-within .browser-add-menu{display:block}

.browser-add-menu label{
  display:block;
  margin:10px 0 5px;
  color:var(--text);
  font-size:12px;
  font-weight:700;
}

.browser-add-menu input[type="text"],
.browser-add-menu textarea{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--white);
  color:var(--text);
  font:inherit;
}

.browser-add-menu textarea{
  min-height:72px;
  resize:vertical;
}

.browser-add-menu .app-submit{
  width:100%;
}

.config-browser-list{
  max-height:calc(100vh - 190px);
  padding:8px;
  overflow:auto;
}

.config-browser-search{
  flex:0 0 auto;
  padding:8px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}

.config-browser-search input{
  width:100%;
  min-height:32px;
  padding:6px 9px 6px 30px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  outline:none;
  background:
    radial-gradient(circle at 12px 13px,transparent 4px,var(--muted) 4.5px 5.5px,transparent 6px),
    linear-gradient(45deg,transparent 47%,var(--muted) 48% 57%,transparent 58%) 17px 19px/7px 7px no-repeat,
    #fff;
  color:var(--text);
  font:inherit;
  font-size:11px;
}

.config-browser-search input:focus{
  border-color:var(--blue);
}

.config-browser-search input::placeholder{color:var(--muted)}

.browser-search-empty{
  padding:22px 8px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}

.browser-recent{
  padding:6px 8px 7px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}

.browser-bulk-toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px;
  padding:8px;
  border-bottom:1px solid var(--line);
  background:var(--blue-gray);
}

.browser-bulk-toolbar > span{
  align-self:center;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
}

.browser-bulk-toolbar select{
  grid-column:1 / -1;
  width:100%;
  min-height:32px;
  border:1px solid var(--blue-gray);
  border-radius:var(--radius-control);
  background:var(--white);
  padding:5px 7px;
  font:inherit;
  font-size:11px;
}

.browser-bulk-toolbar .app-submit,
.browser-bulk-toolbar .button-meta{
  width:100%;
  min-width:0;
  margin:0;
  padding:6px 8px;
  text-align:center;
  font-size:11px;
}

.browser-recent .browser-section-label{padding:3px 2px 4px}

.config-file-recent{
  min-height:38px;
  padding:5px 6px;
}

.config-file-recent .config-file-icon{
  width:24px;
  height:24px;
  font-size:7px;
}

.config-browser-count{
  padding:10px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
}

.config-workspace{min-width:0}

@media (min-width:1101px) and (min-height:650px){
  .provisioning-workbench{
    height:var(--desktop-workspace-height);
    align-items:stretch;
  }

  .config-browser{
    display:flex;
    height:100%;
    max-height:none;
    flex-direction:column;
  }

  .config-browser-heading,
  .config-file-default,
  .config-browser-count{
    flex:0 0 auto;
  }

  .config-browser-list{
    min-height:0;
    max-height:none;
    flex:1 1 auto;
  }

  .config-workspace{
    display:flex;
    height:100%;
    min-height:0;
    flex-direction:column;
  }

  .workspace-filebar{
    flex:0 0 auto;
  }

  .config-workspace > .app-editor{
    min-height:0;
    flex:1 1 auto;
  }
}

.workspace-filebar{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:9px 16px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--surface);
}

.workspace-active-file{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
}

.workspace-active-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 auto;
  place-items:center;
  border:1px solid var(--blue-gray);
  border-radius:var(--radius-control);
  background:var(--blue-gray);
  color:var(--blue);
  font-size:9px;
  font-weight:850;
  letter-spacing:.04em;
}

.workspace-active-name{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.workspace-active-name strong{
  overflow:hidden;
  color:var(--title-color);
  font-size:16px;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.workspace-file-meta{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.workspace-file-message{
  max-width:260px;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.workspace-file-message[data-level="error"]{color:var(--danger)}
.workspace-file-message[data-level="ok"]{color:var(--success)}

.workspace-file-meta > small{
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.workspace-save-state{
  flex:0 0 auto;
  padding:4px 8px;
  border:1px solid var(--success);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--success);
  font-size:10px;
  font-weight:800;
}

.workspace-save-state.is-unsaved{
  border-color:var(--warning);
  background:var(--surface);
  color:var(--warning);
}

.workspace-save-state.is-loading{
  border-color:var(--blue-gray);
  background:var(--blue-gray);
  color:var(--blue);
}

.workspace-save-state.is-error{
  border-color:var(--danger);
  background:var(--surface);
  color:var(--danger);
}

.workspace-section{
  scroll-margin-top:78px;
}

.workspace-section + .workspace-section{
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--line);
}

.default-editor{
  margin-top:0;
}

.app-flash{
  min-height:22px;
  margin:10px 0;
  color:var(--success);
}

.app-flash:empty{
  visibility:hidden;
}

.app-editor{
  margin-top:0;
  border-color:var(--line);
  border-radius:0 0 var(--radius) var(--radius);
  background:var(--white);
}

@media (max-width:900px){
  .app-header{
    grid-template-columns:1fr;
    align-items:flex-start;
    gap:12px;
    padding:14px 18px;
  }

  .app-header nav{
    flex-wrap:wrap;
  }

  .browser-add-menu{
    left:18px;
    right:18px;
    top:auto;
    width:auto;
  }

  .provisioning-workbench{grid-template-columns:1fr}

  .config-browser{
    position:relative;
    top:auto;
    max-height:320px;
  }

  .config-browser-list{max-height:230px}

}