
/* ApnaImage Studio desktop layout repair */



* {

  box-sizing: border-box;

}



html,

body {

  width: 100%;

  min-width: 0;

  margin: 0;

}



.main {

  min-width: 0;

  width: calc(100% - 240px);

  margin-left: 240px;

}



.content {

  width: 100%;

  max-width: none;

  min-width: 0;

  padding: 24px 28px 40px;

}



.studio-layout {

  display: grid !important;

  grid-template-columns:

    minmax(420px, 520px)

    minmax(520px, 1fr) !important;

  align-items: start;

  gap: 24px;

  width: 100% !important;

  max-width: none !important;

  min-width: 0;

}



.card {

  min-width: 0;

}



.controls-card {

  width: 100% !important;

  max-width: none !important;

  min-width: 0;

}



.result-card {

  width: 100% !important;

  max-width: none !important;

  min-width: 0;

  min-height: 680px;

}



.result-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

}



.result-actions {

  display: flex;

  align-items: center;

  gap: 8px;

}



.result-body {

  position: relative;

  display: flex;

  width: 100%;

  min-height: 590px;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.empty-result,

.loading-result {

  width: 100%;

  padding: 50px 30px;

  text-align: center;

}



.comparison-container {

  position: relative;

  width: 100%;

  min-height: 560px;

  overflow: hidden;

}



.form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  width: 100%;

}



.field {

  min-width: 0;

}



.field select,

.field input,

.field textarea,

.controls-card select,

.controls-card input,

.controls-card textarea {

  width: 100%;

  max-width: 100%;

}



.upload-zone {

  width: 100%;

}



.background-library {

  grid-column: 1 / -1;

  width: 100%;

  min-width: 0;

}



.background-preset-grid {

  width: 100%;

}



.generation-action-row {

  width: 100%;

}



.topbar {

  width: 100%;

  min-width: 0;

}



@media (max-width: 1250px) {

  .studio-layout {

    grid-template-columns:

      minmax(380px, 460px)

      minmax(420px, 1fr) !important;

  }

}



@media (max-width: 980px) {

  .main {

    width: 100%;

    margin-left: 0;

  }



  .content {

    padding: 18px;

  }



  .studio-layout {

    grid-template-columns: 1fr !important;

  }



  .result-card {

    min-height: 520px;

  }



  .result-body {

    min-height: 440px;

  }

}



@media (max-width: 620px) {

  .form-grid {

    grid-template-columns: 1fr;

  }

}




/* FINAL SIDEBAR GAP FIX */



.main {

  margin-left: 0 !important;

  width: calc(100vw - 250px) !important;

  max-width: calc(100vw - 250px) !important;

  flex: 1 1 auto;

}



.content {

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding-left: 28px !important;

  padding-right: 28px !important;

}



.studio-layout {

  width: 100% !important;

  max-width: 100% !important;

}



html,

body {

  overflow-x: hidden;

}



