@import url("logo-login.css");
@import url("templates.css");
.setting-image[data-setting-preview="logo"],.setting-image[data-setting-preview="tablet_logo"] {
  background:#111;
  color:white;
  padding:16px
}

.detail-aside button[form="reset-user"] {
  width:100%
}

.profile-summary .profile-badges {
  flex:0 0 90px;
  display:grid;
  gap:7px
}

.profile-badges .badge {
  width:90px;
  justify-content:center;
  padding:3px 4px;
  font-size:12px;
  line-height:14px;
  background:white
}

.profile-contact {
  display:grid;
  gap:8px;
  overflow-wrap:anywhere
}

.profile-contact p {
  font-size:14px;
  line-height:16px
}

.profile-contact .profile-last-login {
  font-size:10px;
  line-height:12px;
  color:var(--secondary)
}

.avatar-colors {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}

.avatar-colors legend {
  font-size:12px;
  color:var(--secondary);
  margin-bottom:12px
}

.avatar-colors>div {
  display:grid;
  grid-template-columns:repeat(12,28px);
  justify-content:space-between;
  gap:12px
}

.avatar-colors label {
  position:relative;
  width:28px;
  height:28px;
  cursor:pointer
}

.avatar-colors input {
  position:absolute;
  inset:0;
  width:28px;
  height:28px;
  min-height:0;
  margin:0;
  opacity:0;
  cursor:pointer
}

.avatar-colors label>span {
  display:block;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--swatch);
  pointer-events:none
}

.avatar-colors input:checked+span::after {
  content:'';
  position:absolute;
  inset:6px;
  background:white;
  mask:url('overlay-check.svg') center/contain no-repeat;
  -webkit-mask:url('overlay-check.svg') center/contain no-repeat
}

.avatar-colors input:focus-visible+span {
  outline:3px solid var(--ember);
  outline-offset:3px
}

@media(max-width:760px) {
  .avatar-colors>div {
    grid-template-columns:repeat(6,28px);
    justify-content:space-between;
    gap:16px 0
  }

}

/* 08 Users: one filterable record becomes a card on mobile. */ @media(max-width:760px) {
  .content:has(.users-results)>.page-heading>.button {
    width:100%
  }

  .user-filters {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    padding:32px;
    border:1px solid var(--line);
    border-radius:12px;
    background:white;
    gap:16px
  }

  .user-filters>.field:first-child {
    grid-column:1/-1
  }

  .user-filters>.field {
    min-width:0
  }

  .users-results.card {
    padding:0;
    border:0;
    background:none
  }

  .users-results .table {
    overflow:visible
  }

  .users-results table,.users-results tbody {
    display:block;
    min-width:0;
    width:100%
  }

  .users-results thead {
    display:none
  }

  .users-results .user-record {
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px;
    grid-template-rows:auto auto auto;
    gap:10px 12px;
    position:relative;
    padding:16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:white;
    margin-bottom:16px
  }

  .users-results td {
    display:block;
    border:0;
    padding:0;
    min-width:0
  }

  .user-identity {
    grid-column:1;
    grid-row:1/3
  }

  .users-results .user-cell {
    display:grid;
    grid-template-columns:45px minmax(0,1fr);
    gap:10px;
    align-items:center
  }

  .users-results .user-cell .avatar {
    width:45px;
    height:44px;
    font-size:16px;
    font-weight:700
  }

  .users-results .user-cell>span:last-child {
    display:contents
  }

  .users-results .user-cell strong {
    font-size:16px;
    line-height:18px;
    overflow-wrap:anywhere
  }

  .users-results .user-email {
    grid-column:1/-1;
    font-size:14px;
    line-height:16px;
    color:var(--ink);
    overflow-wrap:anywhere;
    margin-top:6px
  }

  .user-status {
    grid-column:2;
    grid-row:1
  }

  .user-role {
    grid-column:2;
    grid-row:2
  }

  .users-results .badge {
    width:90px;
    justify-content:center;
    font-size:11px;
    padding:3px 4px
  }

  .user-login {
    grid-column:1;
    grid-row:3;
    font-size:10px!important;
    line-height:12px;
    color:var(--secondary)
  }

  .user-login::before {
    content:'Last login · '
  }

  .user-edit {
    grid-column:2;
    grid-row:3;
    text-align:right
  }

  .users-results .user-edit a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    min-width:71px;
    padding:4px 12px;
    border:1px solid var(--border-strong);
    border-radius:10px;
    background:#f4f4f4;
    font-size:14px;
    font-weight:700;
    text-decoration:none
  }

  .users-results .table-footer {
    display:none
  }

}

/* Responsive screen composition; primitives remain in components.css. */ .avatar {
  color:white;
  font-family:inter-18pt,Arial,sans-serif;
  font-weight:700
}

[hidden] {
  display:none!important
}

.workspace {
  min-height:100vh;
  display:flex;
  flex-direction:column
}

.content {
  width:100%;
  align-content:start;
  flex:1
}

.content>form {
  gap:24px
}

.page-heading {
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:10px
}

.page-heading h1 {
  font-size:36px;
  line-height:33px;
  font-weight:700
}

.page-description,.section-heading p {
  font-size:14px;
  line-height:18px;
  color:var(--secondary)
}

.section-heading {
  display:grid;
  gap:10px
}

.section-heading h2,.card>h2 {
  font-size:20px;
  line-height:18px
}

.card {
  gap:16px;
  align-content:start
}

.field-label {
  font-weight:700
}

input,select,textarea {
  border-radius:10px;
  font-size:16px;
  line-height:18px
}

button,.button {
  border-radius:10px;
  min-height:40px
}

.create-action {
  display:inline-flex;
  align-items:center;
  gap:4px
}

.create-action-icon {
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:rgba(255,255,255,1)!important;
  background-color:rgba(255,255,255,1)!important;
  opacity:1!important;
  mask:url('circle-plus.svg') center/contain no-repeat;
  -webkit-mask:url('circle-plus.svg') center/contain no-repeat
}

.edit-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px
}

.edit-action-icon {
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  background-color:currentColor;
  mask:url('user-edit.svg') center/contain no-repeat;
  -webkit-mask:url('user-edit.svg') center/contain no-repeat
}

.button-secondary {
  background:#f4f4f4
}

.filters {
  display:flex;
  gap:16px;
  align-items:end
}

.filters>.field {
  width:220px
}

.user-filters>.field:first-child {
  width:340px
}

.table-card {
  gap:16px
}

.table {
  overflow-x:auto
}

table {
  min-width:650px
}

td,th {
  padding:16px 10px;
  text-align:left
}

th {
  font-size:12px;
  line-height:14px
}

.table td {
  font-size:14px
}

.table td a {
  text-decoration:none
}

.table td:last-child a {
  text-decoration:underline
}

.table-footer {
  display:flex;
  justify-content:space-between;
  color:var(--secondary);
  font-size:12px;
  gap:16px;
  padding-top:10px
}

.page-cell,.user-cell {
  display:flex;
  align-items:center;
  gap:12px
}

.page-cell .nav-icon {
  color:var(--secondary);
  width:20px;
  height:20px
}

.user-cell>span:last-child {
  display:grid;
  gap:10px
}

.user-cell small {
  font-size:12px;
  color:var(--secondary)
}

.user-cell .avatar {
  width:36px;
  height:36px;
  font-size:12px
}

.badge {
  padding:4px 10px;
  border:1px solid var(--border-strong);
  background:transparent;
  white-space:nowrap
}

.badge-success {
  border-color:var(--success);
  color:#168544
}

.badge-warning {
  border-color:var(--warning);
  color:#946000
}

.badge-error {
  border-color:var(--error);
  color:var(--error)
}

.detail-grid {
  display:grid;
  grid-template-columns:358px minmax(0,1fr);
  gap:24px;
  align-items:start
}

.detail-aside,.detail-main,.editor-main,.editor-aside {
  display:grid;
  gap:24px;
  min-width:0
}

.editor-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
  gap:24px;
  align-items:start
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.profile-summary {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.profile-summary>div {
  display:grid;
  gap:10px;
  flex:1
}

.profile-summary h2 {
  font-size:16px;
  line-height:18px;
  letter-spacing:0
}

.profile-summary p,.profile-card>p {
  font-size:12px;
  line-height:16px;
  overflow-wrap:anywhere
}

dl {
  display:grid;
  gap:16px;
  margin:0;
  font-size:14px;
  line-height:18px
}

dl>div {
  display:flex;
  justify-content:space-between;
  gap:16px
}

dt {
  color:var(--secondary)
}

dd {
  margin:0;
  text-align:right
}

.savebar {
  top:16px;
  z-index:20;
  gap:20px;
  padding:16px;
  min-height:64px;
  box-shadow:0 12px 16px #11111124
}

.savebar>span {
  font-size:14px
}

.save-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}

.save-actions button {
  min-height:32px;
  padding:6px 16px
}

.empty-state {
  padding:24px 0;
  color:var(--secondary)
}

.auth h2 {
  font-size:20px;
  line-height:18px
}

.auth form>button {
  width:100%
}

.brand-login {
  filter:none
}

.nav-link:not(.is-active) .active-rail {
  display:none
}

.nav-link:not(.is-active) {
  padding-left:0
}

.nav-link.is-disabled {
  opacity:.5
}

.account {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px
}

.account form {
  grid-column:1/-1
}

.account form button {
  width:100%;
  justify-content:start;
  gap:6px;
  color:white;
  font-weight:400;
  font-size:14px
}

.account-copy {
  font-size:14px
}

.account-copy small {
  font-size:12px
}

.account form button:after {
  content:"Log Off"
}

.workspace {
  display:flex;
  flex-direction:column;
  min-height:100vh
}

.workspace>.content {
  width:100%
}

.site-footer {
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  flex-direction:column;
  gap:20px;
  margin-top:auto;
  padding:24px 16px;
  font-size:13px;
  line-height:normal;
  color:var(--secondary)
}

.site-footer .brand-footer {
  width:100px;
  height:28px;
  max-width:none;
  flex-shrink:0;
  filter:none
}

.site-footer p {
  margin:0;
  font-size:13px;
  line-height:normal;
  color:var(--secondary)
}

.site-footer a,.site-footer .support-unconfigured {
  color:var(--ink);
  text-decoration:underline;
  text-underline-position:under
}

#rich-editor {
  width:100%
}

.tiptap {
  min-height:290px;
  font-size:14px;
  line-height:20px
}

.tiptap p {
  margin-bottom:14px
}

.tiptap h1,.tiptap h2 {
  margin:16px 0
}

.editor-toolbar {
  gap:10px
}

.editor-toolbar button {
  min-height:28px
}

@media(max-width:1099px) {
  .savebar {
    top:70px
  }

  .editor-grid {
    grid-template-columns:minmax(0,1fr) minmax(240px,.7fr)
  }

}

@media(max-width:760px) {
  .detail-grid,.editor-grid {
    grid-template-columns:1fr
  }

  .filters {
    flex-wrap:wrap
  }

  .filters>.field,.user-filters>.field:first-child {
    width:100%
  }

  .page-heading {
    align-items:start;
    flex-direction:column
  }

  .page-heading h1 {
    font-size:28px;
    line-height:30px
  }

  .field-row {
    grid-template-columns:1fr
  }

  .save-actions {
    gap:10px
  }

  .savebar {
    top:70px
  }

  .savebar>span {
    flex-basis:100%
  }

  .table-footer {
    flex-wrap:wrap
  }

}

/* Page Parts reuse the canonical cards, fields and explicit-save header. */ .parts-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}

.part-tile {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:16px;
  min-width:0
}

.part-tile-header,.part-tile-name {
  display:flex;
  align-items:center;
  min-width:0
}

.part-tile-header {
  justify-content:space-between;
  gap:10px
}

.part-tile-name {
  flex:1;
  gap:10px
}

.part-tile h2 {
  font-size:14px;
  line-height:16px;
  font-weight:400;
  letter-spacing:0;
  margin:0
}

.part-tile>.field-hint {
  font-size:14px;
  line-height:16px;
  margin:0
}

.part-symbol {
  display:grid;
  place-items:center;
  background:#d14780;
  color:#fff;
  width:36px;
  height:36px;
  border-radius:50%;
  flex-shrink:0
}

.part-symbol .nav-icon {
  --icon:url('list-page-parts.svg');
  width:24px;
  height:24px;
  color:rgba(255,255,255,1)!important;
  background-color:rgba(255,255,255,1)!important;
  opacity:1!important
}

.part-create {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:164px;
  height:40px;
  padding:8px 16px;
  white-space:nowrap
}

.part-create .nav-icon {
  width:16px;
  height:16px;
  color:#fff
}

.part-edit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:71px;
  height:32px;
  min-height:32px;
  padding:4px 12px;
  white-space:nowrap
}

.part-edit-icon {
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  background:currentColor;
  mask:url('user-edit.svg') center/contain no-repeat;
  -webkit-mask:url('user-edit.svg') center/contain no-repeat
}

.global-impact {
  border-color:var(--forge-status-warning,#f79009)
}

@media(max-width:1200px) {
  .parts-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:700px) {
  .parts-grid {
    grid-template-columns:1fr
  }

}

/* Media management and selection share one asset collection. */ .media-top {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:36px;
  align-items:stretch
}

.media-upload {
  border:1px dashed var(--forge-brand-ember,#ff5a1f);
  border-radius:10px;
  background:white;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  justify-content:center;
  text-align:center
}

.media-upload h2,.media-upload p {
  margin:0
}

.media-upload .nav-icon {
  width:36px;
  height:36px
}

.media-upload.is-dragging {
  background:#fff1e9
}

.media-filters {
  display:flex;
  flex-direction:column;
  gap:16px
}

.mobile-upload-copy {
  display:none
}

.media-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e6e6e2;
  padding:16px 0;
  margin:16px 0
}

.view-controls {
  display:flex;
  gap:10px
}

.view-controls [aria-pressed=true] {
  border-color:#ff5a1f
}

.media-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px
}

.media-card {
  display:flex;
  flex-direction:column;
  background:white;
  color:#111;
  border:1px solid #e6e6e2;
  border-radius:8px;
  padding:0;
  overflow:hidden;
  text-align:left;
  min-width:0
}

.media-card:hover {
  background:white;
  border-color:#ff5a1f
}

.media-thumb {
  height:160px;
  display:grid;
  place-items:center;
  background:#efefec;
  width:100%;
  overflow:hidden
}

.media-thumb img {
  width:100%;
  height:100%;
  object-fit:contain
}

.media-card-copy {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  min-width:0;
  width:100%;
  overflow-wrap:anywhere
}

.media-card-copy strong {
  font-size:14px
}

.media-card-copy small {
  font-size:12px;
  font-weight:400
}

.media-usage {
  color:#b84312
}

.file-type {
  font-size:20px;
  color:#686868
}

.media-list {
  display:flex;
  flex-direction:column;
  gap:10px
}

.media-list .media-card {
  flex-direction:row;
  align-items:center
}

.media-list .media-thumb {
  width:80px;
  height:80px;
  flex-shrink:0
}

.media-list .media-card-copy {
  flex-direction:row;
  justify-content:space-between;
  align-items:center
}

.upload-queue {
  padding:0;
  list-style:none
}

.upload-queue li {
  padding:10px 0;
  overflow-wrap:anywhere
}

.upload-queue progress {
  display:block;
  width:100%;
  height:8px;
  margin-top:10px
}

.media-drawer,.library-picker {
  color:#111;
  background:white;
  border:1px solid #e6e6e2;
  padding:24px
}

.media-drawer {
  margin:0 0 0 auto;
  width:min(520px,100vw);
  height:100dvh;
  max-height:100dvh;
  max-width:100vw;
  border-radius:12px 0 0 12px
}

.media-drawer form {
  display:flex;
  flex-direction:column;
  gap:16px
}

.media-drawer dl div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0
}

.media-drawer dd {
  overflow-wrap:anywhere;
  text-align:right;
  min-width:0
}

.media-drawer::backdrop,.library-picker::backdrop {
  background:rgb(0 0 0 / .8)
}

.asset-preview {
  position:relative;
  background:#f4f4f4;
  min-height:120px;
  display:grid;
  place-items:center
}

.asset-preview img {
  max-width:100%;
  max-height:280px;
  object-fit:contain;
  cursor:crosshair
}

.asset-preview.has-focal::after {
  content:'';
  position:absolute;
  left:var(--focal-x,50%);
  top:var(--focal-y,50%);
  width:16px;
  height:16px;
  border:2px solid #ff5a1f;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none
}

.asset-savebar {
  position:sticky;
  bottom:0;
  background:white;
  padding:16px 0;
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:center
}

.library-picker {
  width:min(1000px,90vw);
  max-height:85dvh;
  border-radius:12px
}

.picker-controls {
  display:flex;
  gap:16px;
  align-items:end;
  margin:16px 0
}

.picker-controls .field {
  flex:1
}

.picker-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  max-height:55dvh;
  overflow:auto;
  padding:1px
}

.picker-asset {
  padding:10px;
  background:white;
  color:#111;
  border:1px solid #e6e6e2;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px
}

.picker-asset img {
  width:100%;
  height:100px;
  object-fit:contain
}

.picker-asset span {
  overflow-wrap:anywhere;
  font-size:12px
}

.picker-asset[aria-pressed=true] {
  border:2px solid #ff5a1f
}

.picker-asset:hover {
  background:#f4f4f4
}

.library-picker .dialog-actions {
  margin-top:16px;
  position:sticky;
  bottom:0;
  background:white;
  padding-top:16px
}

.settings-sections {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px
}

.settings-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start
}

.settings-wide {
  grid-column:1/-1
}

.settings-fields,.branding-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.branding-card {
  border:1px solid #e6e6e2;
  padding:16px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0
}

.branding-card h3 {
  margin:0
}

.setting-image {
  height:80px;
  display:flex;
  align-items:center
}

.setting-image img {
  max-width:100%;
  max-height:80px;
  object-fit:contain
}

.system-info {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}

.system-info div {
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#f7f7f5;
  padding:16px;
  border-radius:8px;
  min-width:0
}

.system-info dd {
  margin:0;
  overflow-wrap:anywhere
}

.settings-layout section[id] {
  scroll-margin-top:100px
}

.switch-row>span:has(>small) {
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:16px
}

.switch-row small {
  display:block;
  margin:0;
  font-size:12px;
  line-height:14px;
  color:#686868
}

@media(max-width:1100px) {
  .media-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .library-picker {
    position:fixed;
    inset:auto 0 0;
    margin:0;
    width:100%;
    max-width:100vw;
    max-height:90dvh;
    border-radius:16px 16px 0 0
  }

  .picker-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .media-top {
    gap:24px
  }

  .system-info {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:700px) {
  .media-top,.settings-layout,.settings-fields,.branding-grid {
    grid-template-columns:1fr
  }

  .settings-wide {
    grid-column:auto
  }

  .media-upload {
    padding:24px 16px
  }

  .desktop-upload-copy {
    display:none
  }

  .mobile-upload-copy {
    display:inline
  }

  .media-grid,.picker-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .media-thumb {
    height:140px
  }

  .media-card-copy {
    padding:16px
  }

  .media-list .media-card-copy {
    flex-direction:column;
    align-items:start
  }

  .media-drawer {
    padding:16px
  }

  .picker-controls {
    align-items:stretch;
    flex-direction:column
  }

  .library-picker {
    padding:16px
  }

  .system-info {
    grid-template-columns:1fr
  }

  .settings-sections {
    gap:10px
  }

}

.asset-savebar {
  top:0;
  bottom:auto;
  z-index:2;
  border-bottom:1px solid #e6e6e2
}

.asset-savebar[hidden] {
  display:none
}

.branding-card h3 {
  font-size:16px;
  line-height:18px;
  font-weight:700;
  letter-spacing:0
}

.system-info dd {
  text-align:left;
  font-size:12px;
  line-height:16px
}

.system-info dt {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0
}

.brand-sidebar {
  background-image:url("forge-logo-white.svg")
}

.setting-image[data-setting-preview="logo"] img {
  width:171px;
  height:49px
}

.setting-image[data-setting-preview="tablet_logo"] img {
  width:28px;
  height:40px
}

.setting-image[data-setting-preview="favicon"] img,.setting-image[data-setting-preview="touch_icon"] img {
  width:48px;
  height:48px
}

/* 08 Users: Figma 255:3097 / 255:3671 / 553:27704; agreed 358px aside. */ .user-icon {
  display:inline-block;
  width:12px;
  height:12px;
  flex:0 0 12px;
  background:currentColor;
  mask:var(--user-icon) center/contain no-repeat;
  -webkit-mask:var(--user-icon) center/contain no-repeat
}

.user-icon-role {
  --user-icon:url('user-role.svg')
}

.user-icon-status {
  --user-icon:url('user-status.svg')
}

.user-icon-edit {
  --user-icon:url('user-edit.svg')
}

.user-icon-invite {
  --user-icon:url('user-invite.svg')
}

.user-edit .user-icon,.button .user-icon {
  width:16px;
  height:16px;
  flex-basis:16px
}

.content:has(.users-results) .page-heading .button {
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center
}

.user-filters {
  padding:16px;
  border-radius:12px;
  gap:16px
}

.user-filters>.field,.user-filters>.field:first-child {
  width:auto;
  flex:1;
  min-width:0
}

.user-filters input[type=search] {
  padding-right:36px;
  background:white url('overlay-search.svg') right 12px center/16px 16px no-repeat
}

.users-results.card {
  padding:0;
  gap:0;
  overflow:hidden
}

.users-results table {
  min-width:0;
  table-layout:fixed;
  width:100%;
  border-collapse:collapse
}

.users-results thead {
  background:#e8e8e8
}

.users-results th {
  height:46px;
  font-size:12px;
  font-weight:400;
  color:var(--secondary)
}

.users-results td,.users-results th {
  padding:18px 20px
}

.users-results th:first-child {
  width:21%
}

.users-results th:nth-child(2) {
  width:20%
}

.users-results th:nth-child(3) {
  width:17%
}

.users-results th:nth-child(6) {
  width:100px
}

.users-results td {
  height:97px;
  font-size:12px
}

.users-results .user-cell {
  gap:10px
}

.users-results .user-cell .avatar {
  width:45px;
  height:44px;
  font-size:16px;
  font-weight:700;
  flex-shrink:0
}

.users-results .user-cell>span:last-child {
  gap:6px
}

.users-results .user-cell strong {
  font-size:16px;
  line-height:18px
}

.users-results .user-title {
  font-size:12px;
  line-height:14px
}

.users-results .user-email {
  overflow-wrap:anywhere
}

.users-results .user-login {
  color:var(--secondary)
}

.users-results th:nth-child(n+3),.users-results .user-login,.users-results .user-role,.users-results .user-status {
  text-align:center
}

.users-results .badge,.user-detail .badge {
  display:inline-flex;
  gap:4px;
  align-items:center;
  justify-content:center;
  width:90px;
  font-size:10px;
  line-height:12px;
  padding:3px 4px;
  border-radius:6px;
  background:white;
  color:var(--secondary)
}

.users-results .badge-success,.user-detail .badge-success {
  color:var(--success)
}

.users-results .badge-warning,.user-detail .badge-warning {
  color:var(--warning)
}

.users-results .badge-error,.user-detail .badge-error {
  color:#ff1a00;
  border-color:#ff1a00
}

.users-results .user-edit a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:32px;
  padding:6px 12px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:#f4f4f4;
  font-size:14px;
  line-height:16px;
  font-weight:700;
  text-decoration:none
}

.users-results .empty-state {
  padding:16px
}

.user-back {
  display:none
}

.user-detail .profile-summary {
  flex-wrap:nowrap
}

.user-detail .profile-summary>div {
  min-width:0
}

.user-detail .profile-summary p {
  color:var(--secondary)
}

.user-detail .profile-summary>.avatar {
  width:45px;
  height:44px;
  flex:0 0 45px;
  font-size:16px;
  font-weight:700
}

.user-detail .user-security button {
  width:100%
}

.user-detail .section-heading {
  padding-bottom:16px
}

.user-detail input {
  height:42px;
  min-width:0
}

.user-detail .field {
  min-width:0
}

.user-danger {
  border-color:#ff1a00;
  text-align:center
}

.user-danger p {
  font-size:14px;
  line-height:16px
}

.user-danger button {
  background:#ff1a00;
  width:100%
}

.user-permissions dd {
  max-width:50%
}

@media(min-width:761px) and (max-width:1099px) {
  .users-results td,.users-results th {
    padding-left:10px;
    padding-right:10px
  }

  .users-results .user-cell strong {
    font-size:14px
  }

  .user-detail .avatar-colors>div {
    gap:0
  }

  .user-detail .avatar-colors label,.user-detail .avatar-colors input,.user-detail .avatar-colors label>span {
    width:24px;
    height:24px
  }

  .user-detail .avatar-colors>div {
    grid-template-columns:repeat(12,24px)
  }

}

@media(max-width:1099px) {
  .user-back {
    display:inline-flex;
    font-size:14px;
    align-items:center;
    gap:4px;
    text-decoration:none
  }

  .user-back:before {
    content:'';
    width:16px;
    height:16px;
    display:block;
    background:currentColor;
    mask:url('user-back.svg') center/contain no-repeat;
    color:var(--ember)
  }

}

@media(max-width:760px) {
  .user-filters {
    padding:32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:white;
    border:1px solid var(--line)
  }

  .users-results.card {
    overflow:visible
  }

  .users-results .user-record {
    grid-template-rows:auto auto auto auto;
    gap:8px 12px
  }

  .users-results td {
    padding:0;
    height:auto;
    text-align:left
  }

  .users-results .user-identity {
    grid-column:1;
    grid-row:1/3
  }

  .users-results .user-cell>span:last-child {
    display:grid;
    gap:6px
  }

  .users-results .user-cell {
    display:flex
  }

  .users-results .user-cell strong {
    font-size:14px;
    line-height:16px
  }

  .users-results .user-title {
    font-size:10px;
    line-height:12px
  }

  .users-results .user-email {
    grid-column:1/-1;
    grid-row:3;
    margin-top:4px;
    font-size:14px
  }

  .users-results .user-login {
    grid-row:4;
    text-align:left;
    align-self:center
  }

  .users-results .user-edit {
    grid-row:4;
    justify-self:end
  }

  .users-results .user-role,.users-results .user-status {
    text-align:right
  }

  .users-results .user-edit a {
    font-size:12px
  }

  .users-results .user-role {
    grid-row:2
  }

  .users-results .user-status {
    grid-row:1
  }

  .user-detail .detail-grid {
    display:flex;
    flex-direction:column;
    gap:24px
  }

  .user-detail .detail-aside,.user-detail .detail-main {
    display:contents
  }

  .user-detail .detail-grid section {
    width:100%
  }

  .user-detail .profile-card {
    order:0
  }

  .user-detail .user-profile {
    order:1
  }

  .user-detail .user-security {
    order:2
  }

  .user-detail.is-inactive .user-security {
    order:1
  }

  .user-detail.is-inactive .user-profile {
    order:2
  }

  .user-detail .user-permissions {
    order:3
  }

  .user-detail .user-danger {
    order:4
  }

  .user-detail .field-row {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }

  .user-detail .user-permissions dl {
    font-size:12px;
    line-height:16px
  }

  .user-detail .page-description {
    font-size:18px;
    line-height:20px
  }

  .user-detail .profile-summary h2 {
    font-size:14px;
    line-height:16px
  }

}

.user-danger .button-danger {
  color:white
}

.users-results .table td.user-edit a {
  text-decoration:none
}

@media(min-width:1100px) {
  .content:has(.users-results) {
    padding-top:38px
  }

  .users-results th:first-child {
    width:19%
  }

  .users-results th:nth-child(2) {
    width:18%
  }

  .users-results th:nth-child(3) {
    width:15%
  }

  .users-results th:nth-child(4) {
    width:20%
  }

  .users-results th:nth-child(5) {
    width:19%
  }

  .users-results th:nth-child(6) {
    width:9%
  }

}


.import-keep-content {
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  font-size:16px;
  line-height:18px;
  font-weight:400
}

.template-desktop-screen .import-keep-content input[type=checkbox] {
  appearance:auto;
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  margin:0;
  padding:0;
  accent-color:var(--ember)
}

.import-section-card {
  display:grid;
  gap:16px;
  padding:16px;
  border-radius:12px
}

.import-section-card>h2,.import-order-help {
  margin:0
}

.import-section-card>h2 {
  font-size:20px;
  line-height:18px;
  letter-spacing:-.02em
}

.import-order-help {
  color:var(--primary);
  font-size:14px;
  line-height:16px
}

.import-section-settings {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line)
}

.import-section-settings .field,.import-field-choice>.field {
  min-width:0;
  gap:6px
}

.import-section-settings .field-label,.import-field-choice>.field .field-label {
  font-size:14px;
  line-height:16px;
  font-weight:700
}

.import-section-settings input,.import-section-settings select,
.import-field-choice>.field input,.import-field-choice>.field select {
  box-sizing:border-box;
  width:100%;
  height:42px;
  min-height:42px;
  padding:10px 12px;
  font-size:16px;
  line-height:18px
}

.import-editable {
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  font-size:12px;
  line-height:14px;
  font-weight:400;
  white-space:nowrap
}

.import-editable input[type=checkbox] {
  appearance:auto;
  width:20px;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0;
  accent-color:var(--ember)
}

.import-source-review {
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  min-height:60px;
  padding:12px;
  border-radius:2px;
  background:#f4f5f3
}

.import-source-copy {
  flex:1;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--primary);
  font-size:12px;
  line-height:14px;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3
}

.import-field-choice:has(.import-editable input[type=checkbox]:not(:checked)) {
  opacity:.72
}

.import-section-preview {
  margin:0;
  padding-bottom:16px;
  border-bottom:1px solid var(--line)
}

.import-section-preview summary {
  display:flex;
  align-items:center;
  gap:4px;
  min-height:20px;
  color:var(--primary);
  font-size:16px;
  line-height:18px;
  font-weight:700;
  list-style:none;
  cursor:pointer
}

.import-section-preview summary::-webkit-details-marker {
  display:none
}

.import-section-preview summary::before {
  content:'';
  width:20px;
  height:20px;
  flex:0 0 20px;
  background:transparent url('preview-chevron.svg') center/20px 20px no-repeat;
  transition:transform .15s ease
}

.import-section-preview[open] summary::before {
  transform:rotate(180deg)
}

.import-section-preview iframe {
  display:block;
  width:100%;
  height:421px;
  margin-top:16px;
  border:1px solid var(--line);
  background:#f7f7f5
}

.import-fields {
  grid-template-columns:1fr;
  gap:8px
}

.import-sort-item {
  min-width:0;
  position:relative
}

.import-field-choice>.import-drag-grip {
  align-self:center;
  width:20px;
  height:32px;
  padding:0;
  cursor:grab;
  touch-action:none
}

.import-field-choice>.import-drag-grip:active {
  cursor:grabbing
}

.import-field-choice>.import-drag-grip span {
  display:block;
  width:10px;
  height:16px;
  margin:auto;
  background:transparent url('editor-grip.svg?v=20260922-2') center/10px 16px no-repeat
}

.template-desktop-screen .card.import-field-choice {
  min-width:0;
  min-height:92px;
  padding:16px;
  border-radius:12px;
  display:grid;
  grid-template-columns:20px minmax(100px,140px) minmax(130px,1fr) minmax(130px,1fr) minmax(200px,1.4fr);
  gap:16px;
  align-items:center
}

.import-field-choice>.import-field-key {
  width:auto;
  margin:0;
  color:var(--primary);
  font-size:18px;
  line-height:20px;
  font-weight:700;
  text-align:left;
  text-transform:none;
  letter-spacing:0
}

.import-sort-item:focus-within .import-field-choice {
  outline:2px solid var(--ember);
  outline-offset:-2px
}

.import-sort-item.is-dragging {
  opacity:.45
}

.import-sort-item[data-drop="before"],.import-sort-item[data-drop="after"] {
  box-shadow:inset 0 3px var(--ember)
}

.import-parent-group {
  display:none
}

/* Keep the complete desktop application shell centered inside a 1440px canvas. */
@media(min-width:1200px) {
  html {
    background:#111 url('pageback.png') center top/100% auto repeat-y
  }

  body:has(.app-shell) {
    width:min(100%,1440px);
    margin-inline:auto;
    background:var(--canvas)
  }

  .app-shell>.sidebar {
    left:max(0px,calc((100vw - 1440px)/2))
  }
}

/* Canon navigation icon states: desktop 60% white, yellow hover, ember active. */
.sidebar .nav-link {
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,padding-left .2s ease
}

.sidebar .nav-link .nav-icon,
.sidebar .nav-link .active-rail {
  transition:background-color .2s ease,color .2s ease,opacity .2s ease
}

.sidebar .nav-link:not(.is-active):not(:hover) .nav-icon {
  color:rgba(255,255,255,.6);
  background-color:rgba(255,255,255,.6)
}

.sidebar .nav-link.is-active {
  background:#ffffff12;
  border-color:#ffffff12;
  font-weight:700
}

.sidebar .nav-link.is-active .active-rail {
  color:var(--ember);
  background-color:var(--ember)
}

.sidebar .nav-link.is-active .nav-icon {
  color:rgba(255,90,31,1);
  background-color:rgba(255,90,31,1)
}

.sidebar .nav-link:not(.is-disabled):hover {
  padding-left:6px;
  background:#ffffff21;
  border-color:#ffffff21;
  font-weight:700
}

.sidebar .nav-link:not(.is-disabled):hover .active-rail {
  display:block;
  background:#ffd000
}

.sidebar .nav-link:not(.is-active):not(.is-disabled):hover .nav-icon {
  color:rgba(255,208,0,1);
  background-color:rgba(255,208,0,1)
}

@media(min-width:768px) and (max-width:1199px) {
  .app-shell:not(.is-tablet-nav-expanded)>.sidebar .nav-link .nav-icon {
    opacity:1
  }

  .app-shell>.sidebar .nav-link:not(.is-active):not(:hover) .nav-icon {
    color:rgba(255,255,255,1);
    background-color:rgba(255,255,255,1)
  }

  .app-shell>.sidebar .nav-link:not(.is-disabled):hover .active-rail {
    display:none
  }

  .app-shell.is-tablet-nav-expanded>.sidebar .nav-link:not(.is-disabled):hover .active-rail {
    display:block;
    background:#ffd000
  }

  .app-shell>.sidebar .nav-link:not(.is-active):not(.is-disabled):hover .nav-icon {
    opacity:1
  }
}

@media(max-width:767px) {
  .mobile-topbar {
    position:sticky;
    top:0;
    z-index:42
  }
}

/* Avatar initials: two pixels smaller at every component size. */
.sidebar .avatar,
.user-detail .profile-summary>.avatar {
  font-size:14px
}

.users-results .user-cell .avatar,
.mobile-topbar .avatar {
  font-size:10px
}

/* Center one- and two-line alert copy against its icon. */
.forge-alert.forge-alert {
  display:flex;
  align-items:center
}

.forge-alert.forge-alert::before {
  top:50%;
  transform:translateY(-50%)
}


/* Canonical danger-zone treatment. */
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:16px;
  border-color:#ff1a00;
  border-radius:12px;
  background:#fff;
  text-align:center;
  container-type:inline-size;
}
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger)>div{
  display:grid;
  gap:10px;
  width:100%;
  max-width:620px;
}
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger) h2{
  margin:0;
  color:#d92d20;
  font-size:20px;
  line-height:18px;
  letter-spacing:-.4px;
}
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger) p{
  margin:0;
  color:var(--secondary);
  text-align:center;
}
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger) .forge-alert{
  width:100%;
  max-width:620px;
  text-align:left;
}
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger) .button-danger{
  width:210px;
  min-width:0;
  min-height:40px;
  padding:8px 16px;
  border:1px solid #d92d20;
  border-radius:10px;
  background:#ffdddb;
  color:#d92d20;
}
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger) .button-danger:hover:not(:disabled){
  background:#ffc8c4;
}
:is(.danger-zone,.page-danger,.template-danger-zone,.user-danger) .button-danger:disabled{
  border-color:#f09b94;
  background:#fff0ee;
  color:#a53d36;
  opacity:1;
  cursor:not-allowed;
}
@container (max-width:399px){
  :is(.danger-zone,.page-danger,.template-danger-zone,.user-danger) .button-danger{width:100%}
}