/* XYZ 3D Studio — Single Photo visual section hierarchy 0.18.96.408
 * Visual-only layer. No geometry, state or export behaviour is changed.
 */

/* --------------------------------------------------------------------------
 * LIGHT THEME — make page / section / field levels visually distinct.
 * ----------------------------------------------------------------------- */
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings{
  background:linear-gradient(180deg,#dbe3e8 0%,#d2dbe1 100%)!important;
}

.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-section{
  position:relative!important;
  margin:11px 3px!important;
  padding:9px!important;
  border:1px solid #93a2ad!important;
  border-left:4px solid #f47a22!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#f9fbfc 0%,#eef3f6 100%)!important;
  box-shadow:0 2px 5px rgba(28,43,53,.13),inset 0 1px 0 rgba(255,255,255,.96)!important;
}

.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-section + .xyz3d-single-panel-section{
  margin-top:13px!important;
}

.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-head{
  margin:-3px -3px 9px!important;
  min-height:32px!important;
  padding:6px 34px 6px 9px!important;
  border:1px solid #8e9da8!important;
  border-bottom-color:#7f909c!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,#d8e0e5 0%,#c5d0d7 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 1px 2px rgba(35,50,60,.08)!important;
}

.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-head::before{
  content:"";
  position:absolute;
  left:-1px;
  top:5px;
  bottom:5px;
  width:4px;
  border-radius:0 3px 3px 0;
  background:#f47a22;
}

.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-head strong{
  font-size:12.5px!important;
  font-weight:850!important;
  letter-spacing:.005em!important;
  color:#14232d!important;
  -webkit-text-fill-color:#14232d!important;
}
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-head small{
  color:#4c5e6a!important;
  -webkit-text-fill-color:#4c5e6a!important;
  font-weight:650!important;
}

/* Each ordinary setting becomes a compact inner card, so adjacent controls do
 * not visually merge into one grey column. Checkboxes stay flat/compact. */
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-field-grid > label:not(.xyz3d-single-check){
  padding:6px 7px 7px!important;
  border:1px solid #c0cbd2!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,#f3f7f9 0%,#e9eff3 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88)!important;
}

.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-field-grid > label:not(.xyz3d-single-check) > span:first-child{
  display:block!important;
  margin-bottom:4px!important;
  color:#20313d!important;
  -webkit-text-fill-color:#20313d!important;
  font-weight:800!important;
}

.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings :is(
  .xyz3d-single-field-grid input[type="text"],
  .xyz3d-single-field-grid input[type="number"],
  .xyz3d-single-field-grid select,
  .xyz3d-layer142-field select,
  .xyz3d-layer142-field textarea
){
  background:linear-gradient(180deg,#ffffff 0%,#f3f6f8 100%)!important;
  border-color:#91a1ac!important;
  color:#172630!important;
  box-shadow:inset 0 1px 2px rgba(32,48,59,.07),0 1px 0 rgba(255,255,255,.7)!important;
}

/* Checkbox/action rows are visually separated without becoming bulky cards. */
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-check{
  padding:6px 8px!important;
  border:1px solid #c1ccd3!important;
  border-radius:7px!important;
  background:#e9eff3!important;
}

/* Secondary backing is a nested subsection, not another indistinguishable box. */
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-photo-single-settings [data-single-secondary-backing-block]{
  border:1px solid #aab9c3!important;
  border-left:3px solid #5f7f94!important;
  background:linear-gradient(180deg,#edf3f6 0%,#e3ebf0 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82)!important;
}

/* Cutter is a large section; its editable field area gets its own inset layer. */
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-backing-cutter224 [data-cutter224-fields]{
  padding:8px!important;
  border:1px solid #b0bdc6!important;
  border-radius:8px!important;
  background:#e4ebef!important;
  box-shadow:inset 0 1px 2px rgba(43,60,70,.06)!important;
  gap:7px!important;
}
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-backing-cutter224 [data-cutter224-fields] > label:not(.xyz3d-single-check){
  background:linear-gradient(180deg,#f7f9fa,#edf2f5)!important;
}
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-backing-cutter224 .xyz3d-cutter224-help{
  margin-top:9px!important;
  padding:7px 8px!important;
  border:1px solid #c3cdd3!important;
  border-radius:7px!important;
  background:#f2f6f8!important;
  color:#435761!important;
  -webkit-text-fill-color:#435761!important;
}

/* Layer editor: Selected text becomes a true card with an independent header. */
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-layer142-group{
  overflow:hidden!important;
  gap:8px!important;
  padding:9px!important;
  border:1px solid #96a6b1!important;
  border-left:4px solid #f47a22!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#f9fbfc 0%,#edf2f5 100%)!important;
  box-shadow:0 2px 5px rgba(28,43,53,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-layer142-group > strong{
  display:block!important;
  margin:-9px -9px 0!important;
  padding:8px 10px!important;
  border-bottom:1px solid #9eacb6!important;
  background:linear-gradient(180deg,#d7e0e5 0%,#c6d1d8 100%)!important;
  color:#172630!important;
  -webkit-text-fill-color:#172630!important;
  font-size:12px!important;
  font-weight:850!important;
}
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-layer142-group .xyz3d-text153-note{
  display:block!important;
  padding:7px 8px!important;
  border:1px solid #c0cbd2!important;
  border-radius:7px!important;
  background:#edf3f6!important;
  color:#465c69!important;
  -webkit-text-fill-color:#465c69!important;
  line-height:1.35!important;
}
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-layer142-field{
  padding:6px 7px!important;
  border:1px solid #c3cdd4!important;
  border-radius:7px!important;
  background:#f1f5f7!important;
}
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-layer142-field > span:first-child{
  color:#20313d!important;
  -webkit-text-fill-color:#20313d!important;
  font-weight:800!important;
}

/* Layer rows also receive a slight surface contrast so one layer does not run
 * into the next in the narrow editor. */
.xyz3d-app[data-ui-theme="light"].xyz3d-photo-open .xyz3d-layer142-row{
  border-color:#9fadb7!important;
  background:linear-gradient(180deg,#f3f7f9 0%,#e7edf1 100%)!important;
  box-shadow:0 1px 3px rgba(28,43,53,.08)!important;
}

/* Collapsed cards should remain compact. */
.xyz3d-app.xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-section.is-collapsed140 .xyz3d-single-panel-head{
  margin-bottom:0!important;
}

/* --------------------------------------------------------------------------
 * DARK THEME — same hierarchy without changing the existing dark language.
 * ----------------------------------------------------------------------- */
.xyz3d-app:not([data-ui-theme="light"]).xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-section{
  border-left:4px solid #f47a22!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(13,31,45,.97),rgba(7,22,34,.97))!important;
  box-shadow:0 3px 8px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.xyz3d-app:not([data-ui-theme="light"]).xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-head{
  border-color:rgba(116,167,195,.34)!important;
  background:linear-gradient(180deg,#173247 0%,#10283a 100%)!important;
}
.xyz3d-app:not([data-ui-theme="light"]).xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-field-grid > label:not(.xyz3d-single-check),
.xyz3d-app:not([data-ui-theme="light"]).xyz3d-photo-open .xyz3d-layer142-field{
  padding:6px 7px!important;
  border:1px solid rgba(105,158,188,.22)!important;
  border-radius:7px!important;
  background:rgba(12,34,49,.68)!important;
}
.xyz3d-app:not([data-ui-theme="light"]).xyz3d-photo-open .xyz3d-layer142-group{
  border-left:4px solid #f47a22!important;
  background:rgba(7,24,37,.82)!important;
  box-shadow:0 3px 8px rgba(0,0,0,.22)!important;
}
.xyz3d-app:not([data-ui-theme="light"]).xyz3d-photo-open .xyz3d-layer142-group > strong{
  display:block!important;
  margin:-9px -9px 0!important;
  padding:8px 10px!important;
  background:linear-gradient(180deg,#173247,#10283a)!important;
  border-bottom:1px solid rgba(116,167,195,.28)!important;
}

/* Narrow/mobile: keep the hierarchy, but avoid wasting vertical space. */
@media (max-width:760px){
  .xyz3d-app.xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-section{
    margin:8px 2px!important;
    padding:7px!important;
    border-left-width:3px!important;
  }
  .xyz3d-app.xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-panel-head{
    min-height:30px!important;
    margin:-2px -2px 7px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
  .xyz3d-app.xyz3d-photo-open .xyz3d-photo-single-settings .xyz3d-single-field-grid > label:not(.xyz3d-single-check),
  .xyz3d-app.xyz3d-photo-open .xyz3d-layer142-field{
    padding:5px 6px!important;
  }
}