/* A single fullscreen wallpaper, shared by login, app and admin preview. */
html[data-site-background="on"] body:not(.admin-page) {
  isolation:isolate
}

html[data-site-background="on"] body:not(.admin-page)::before,
.appearance-preview[data-site-background="on"]::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(rgba(246,247,251,calc(var(--site-background-light)*.5)),rgba(246,247,251,calc(var(--site-background-light)*.5))),var(--site-background-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(var(--site-background-blur,0px));
  inset:calc(var(--site-background-blur,0px) * -2);
}

/* Custom frame settings only replace tokens when explicitly enabled. */
html[data-panel-custom="on"],.appearance-preview[data-panel-custom="on"] {
  --surface:var(--appearance-surface-dark);
  --surface-soft:var(--appearance-surface-soft-dark);
  --field-bg:var(--appearance-field-dark);
  --solid-surface:var(--appearance-solid-dark);
  --task-bg:var(--appearance-task-dark)
}
html[data-panel-custom="on"][data-theme="light"],.appearance-preview[data-panel-custom="on"][data-theme="light"] {
  --surface:var(--appearance-surface-light);
  --surface-soft:var(--appearance-surface-soft-light);
  --field-bg:var(--appearance-field-light);
  --solid-surface:var(--appearance-solid-light);
  --task-bg:var(--appearance-task-light)
}
.appearance-color {height:40px;width:84px;padding:4px;cursor:pointer}

html[data-site-background="on"][data-theme="dark"] body:not(.admin-page)::before,
.appearance-preview[data-site-background="on"][data-theme="dark"]::before {
  background-image:linear-gradient(rgba(16,17,21,calc(var(--site-background-dark)*.55)),rgba(16,17,21,calc(var(--site-background-dark)*.55))),var(--site-background-image);
}

html[data-site-background="on"][data-auth="guest"] body::before {
  background-image:linear-gradient(rgba(16,17,21,calc(var(--site-background-dark)*.3)),rgba(16,17,21,calc(var(--site-background-dark)*.3))),var(--site-background-image)
}

@media(forced-colors:active) {
  body:not(.admin-page)::before,.appearance-preview::before {
    display:none
  }
}

/* Back-office controls and a local-only preview of the same background renderer. */
.appearance-layout {
  display:grid;
  grid-template-columns:minmax(270px,.8fr) minmax(360px,1.2fr);
  gap:24px;
  align-items:start
}

.appearance-controls {
  display:grid;
  gap:22px;
  min-width:0
}

.appearance-controls fieldset {
  border:0;
  padding:0;
  margin:0;
  display:grid;
  gap:22px;
  min-width:0
}

.appearance-field {
  display:grid;
  gap:9px;
  font-size:13px;
  font-weight:600
}

.appearance-field small,.appearance-help {
  color:var(--admin-muted);
  font-size:12px;
  font-weight:400;
  line-height:1.8;
  margin:0
}

.appearance-upload {
  padding:15px;
  border:1px dashed var(--admin-border);
  border-radius:12px;
  background:var(--admin-soft);
  width:100%;
  min-width:0
}

.appearance-upload::file-selector-button {
  border:1px solid var(--admin-border);
  border-radius:7px;
  padding:7px 10px;
  margin-right:10px;
  background:white;
  cursor:pointer
}

.appearance-range {
  display:flex;
  align-items:center;
  gap:12px
}

.appearance-range input {
  flex:1;
  min-width:0;
  accent-color:#7c3aed
}

.appearance-range output {
  min-width:40px;
  font-variant-numeric:tabular-nums;
  color:#6d43c5
}

.appearance-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center
}

.appearance-status {
  min-height:22px;
  font-size:12px;
  line-height:1.8;
  overflow-wrap:anywhere
}

.appearance-status[data-state="error"] {
  color:#b42318
}

.appearance-status[data-state="success"] {
  color:#067647
}

.appearance-preview-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
  font-size:13px
}

.appearance-preview-tabs {
  display:flex;
  gap:5px
}

.appearance-preview-tabs button {
  font-size:12px;
  padding:5px 10px
}

.appearance-preview-tabs button[aria-pressed="true"] {
  background:#6d43c5;
  color:#fff;
  border-color:#6d43c5
}

.appearance-preview {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:355px;
  border:1px solid var(--admin-border);
  border-radius:15px;
  padding:22px;
  color:#1d2433;
  background:#f6f7fb
}

.appearance-preview::before {
  position:absolute!important
}

.appearance-preview[data-theme="dark"] {
  background:#25262b;
  color:#f0f0f3;
  border-color:#494a51
}

.appearance-preview-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  margin-bottom:30px
}

.appearance-preview-chip {
  padding:5px 9px;
  border:1px solid currentColor;
  border-radius:7px;
  font-size:10px;
  opacity:.75
}

.appearance-preview h3 {
  font-size:23px;
  margin:0 0 8px
}

.appearance-preview p {
  font-size:12px;
  margin:0 0 20px;
  opacity:.8
}

.appearance-preview-panel {
  padding:18px;
  border:1px solid rgba(120,130,160,.28);
  border-radius:12px;
  background:var(--appearance-surface-light,rgba(255,255,255,.74));
  backdrop-filter:blur(14px)
}

.appearance-preview[data-theme="dark"] .appearance-preview-panel {
  background:var(--appearance-surface-dark,rgba(30,31,36,.74))
}

.appearance-preview-input {
  height:68px;
  border:1px solid rgba(120,130,160,.3);
  border-radius:9px;
  padding:11px;
  font-size:11px;
  background:var(--appearance-field-light,#fafbfc);
  color:#6f7785
}

.appearance-preview-bottom {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:14px;
  font-size:11px
}

.appearance-preview-button {
  background:#8056c5;
  border-radius:8px;
  padding:8px 12px;
  color:#fff;
  font-size:11px
}

.appearance-preview-caption {
  font-size:11px;
  color:var(--admin-muted);
  line-height:1.8;
  margin:10px 0 0
}

@media(max-width:1100px) {
  .appearance-layout {
    grid-template-columns:1fr
  }
  .appearance-preview {
    min-height:330px
  }
}

@media(max-width:600px) {
  .appearance-preview {
    padding:17px
  }
  .appearance-preview h3 {
    font-size:20px
  }
  .appearance-preview-head {
    flex-wrap:wrap
  }
}

.appearance-preview[data-theme="dark"] .appearance-preview-input {
  background:var(--appearance-field-dark,#2b2d32);
  color:#b3b5c0;
  border-color:#555761
}