/* ApnaImage Luxury Studio Theme */



:root {

  --luxury-black: #11110f;

  --luxury-charcoal: #24211c;

  --luxury-ivory: #fbf8f1;

  --luxury-cream: #f3ede1;

  --luxury-gold: #c9a45c;

  --luxury-gold-light: #ead5a6;

  --luxury-border: rgba(157, 120, 52, 0.24);

  --luxury-muted: #746d61;

  --luxury-shadow: 0 18px 50px rgba(36, 28, 16, 0.10);

}



html,

body {

  background:

    radial-gradient(

      circle at 80% 0%,

      rgba(201, 164, 92, 0.12),

      transparent 30%

    ),

    var(--luxury-ivory) !important;

  color: var(--luxury-black) !important;

  font-family:

    Inter,

    "Helvetica Neue",

    Arial,

    sans-serif;

}



.sidebar {

  background:

    linear-gradient(

      180deg,

      #171612 0%,

      #0c0c0b 100%

    ) !important;

  border-right:

    1px solid rgba(234, 213, 166, 0.16) !important;

  box-shadow:

    12px 0 38px rgba(0, 0, 0, 0.12);

}



.sidebar .brand,

.sidebar-logo,

.logo {

  color: var(--luxury-gold-light) !important;

  letter-spacing: -0.03em;

}



.sidebar a,

.sidebar button {

  border-radius: 12px !important;

  transition:

    background 180ms ease,

    color 180ms ease,

    transform 180ms ease !important;

}



.sidebar a:hover,

.sidebar button:hover {

  background:

    rgba(201, 164, 92, 0.14) !important;

  color: #fff7e7 !important;

  transform: translateX(2px);

}



.sidebar .active,

.sidebar [aria-current="page"] {

  background:

    linear-gradient(

      135deg,

      rgba(201, 164, 92, 0.28),

      rgba(201, 164, 92, 0.10)

    ) !important;

  border:

    1px solid rgba(234, 213, 166, 0.22) !important;

  color: #fff8e8 !important;

}



.topbar,

.page-header,

header {

  background:

    rgba(251, 248, 241, 0.88) !important;

  border-bottom:

    1px solid var(--luxury-border) !important;

  backdrop-filter: blur(18px);

}



.page-title h1,

.section-heading h2,

.card h2 {

  color: var(--luxury-black) !important;

  letter-spacing: -0.035em;

}



.page-title p,

.section-heading p,

.field p,

.help-text {

  color: var(--luxury-muted) !important;

}



.card,

.controls-card,

.results-card,

.project-card,

.billing-plan-card,

.history-card {

  background:

    linear-gradient(

      145deg,

      rgba(255, 255, 255, 0.98),

      rgba(250, 246, 237, 0.96)

    ) !important;

  border:

    1px solid var(--luxury-border) !important;

  border-radius: 20px !important;

  box-shadow: var(--luxury-shadow) !important;

}



.controls-card {

  position: relative;

  overflow: hidden;

}



.controls-card::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 3px;

  background:

    linear-gradient(

      90deg,

      #8d6b2f,

      #e4c987,

      #8d6b2f

    );

}



.upload-zone {

  background:

    linear-gradient(

      145deg,

      #fffdf8,

      #f5efe3

    ) !important;

  border:

    1px dashed rgba(157, 120, 52, 0.44) !important;

  border-radius: 16px !important;

  transition:

    border-color 180ms ease,

    box-shadow 180ms ease,

    transform 180ms ease !important;

}



.upload-zone:hover,

.upload-zone.dragging {

  border-color: var(--luxury-gold) !important;

  box-shadow:

    0 12px 30px rgba(157, 120, 52, 0.14) !important;

  transform: translateY(-1px);

}



.field label {

  color: #332d24 !important;

  font-weight: 650 !important;

  letter-spacing: 0.005em;

}



select,

input,

textarea {

  min-height: 44px;

  background: #fffefb !important;

  border:

    1px solid rgba(94, 78, 50, 0.22) !important;

  border-radius: 11px !important;

  color: #211e19 !important;

  box-shadow:

    inset 0 1px 1px rgba(0, 0, 0, 0.025);

  transition:

    border-color 160ms ease,

    box-shadow 160ms ease !important;

}



textarea {

  min-height: 92px;

}



select:focus,

input:focus,

textarea:focus {

  outline: none !important;

  border-color: var(--luxury-gold) !important;

  box-shadow:

    0 0 0 4px rgba(201, 164, 92, 0.14) !important;

}



.primary-button,

#generateButton,

.billing-buy-button {

  min-height: 48px;

  background:

    linear-gradient(

      135deg,

      #171510 0%,

      #3a3020 55%,

      #9e7a38 130%

    ) !important;

  border:

    1px solid rgba(234, 213, 166, 0.42) !important;

  border-radius: 12px !important;

  color: #fff9ed !important;

  font-weight: 700 !important;

  letter-spacing: 0.01em;

  box-shadow:

    0 12px 26px rgba(31, 25, 15, 0.22) !important;

  transition:

    transform 180ms ease,

    box-shadow 180ms ease,

    filter 180ms ease !important;

}



.primary-button:hover,

#generateButton:hover,

.billing-buy-button:hover {

  transform: translateY(-2px);

  box-shadow:

    0 17px 32px rgba(31, 25, 15, 0.28) !important;

  filter: brightness(1.08);

}



.primary-button:disabled,

#generateButton:disabled {

  transform: none;

  filter: grayscale(0.45);

  opacity: 0.55;

}



.secondary-button,

.logout-button,

.buy-credits-button {

  background: #fffdf8 !important;

  border:

    1px solid rgba(157, 120, 52, 0.34) !important;

  border-radius: 10px !important;

  color: #49391f !important;

}



.model-preview-card,

#modelPreviewCard,

#resolutionPreview,

#generationWalletCost {

  background:

    linear-gradient(

      135deg,

      rgba(247, 239, 221, 0.94),

      rgba(255, 253, 247, 0.98)

    ) !important;

  border:

    1px solid rgba(201, 164, 92, 0.28) !important;

  border-radius: 14px !important;

}



#modelPreviewAvatar {

  background:

    linear-gradient(

      135deg,

      #1b1812,

      #9e7a38

    ) !important;

  color: #fff7e4 !important;

  box-shadow:

    0 8px 18px rgba(46, 36, 20, 0.20);

}



.result-stage,

.result-preview,

.generated-result,

.result-image-wrap {

  background-color: #f7f2e8 !important;

  background-image:

    linear-gradient(

      45deg,

      rgba(201, 164, 92, 0.08) 25%,

      transparent 25%

    ),

    linear-gradient(

      -45deg,

      rgba(201, 164, 92, 0.08) 25%,

      transparent 25%

    ),

    linear-gradient(

      45deg,

      transparent 75%,

      rgba(201, 164, 92, 0.08) 75%

    ),

    linear-gradient(

      -45deg,

      transparent 75%,

      rgba(201, 164, 92, 0.08) 75%

    ) !important;

  background-size: 24px 24px !important;

  background-position:

    0 0,

    0 12px,

    12px -12px,

    -12px 0 !important;

  border-radius: 16px !important;

}



.result-gallery img,

.history-grid img,

.project-card img {

  border-radius: 14px !important;

  box-shadow:

    0 10px 28px rgba(31, 25, 15, 0.16) !important;

}



.credit-box {

  background:

    linear-gradient(

      145deg,

      rgba(201, 164, 92, 0.15),

      rgba(201, 164, 92, 0.05)

    ) !important;

  border:

    1px solid rgba(234, 213, 166, 0.22) !important;

  border-radius: 14px !important;

}



.credit-value {

  color: #f1d89c !important;

  font-weight: 750 !important;

}



.billing-plan-featured {

  border-color:

    rgba(157, 120, 52, 0.62) !important;

  box-shadow:

    0 20px 55px rgba(157, 120, 52, 0.18) !important;

}



.billing-plan-badge {

  background:

    linear-gradient(

      135deg,

      #8d692c,

      #d7b86f

    ) !important;

  color: #17130d !important;

}



::-webkit-scrollbar {

  width: 9px;

  height: 9px;

}



::-webkit-scrollbar-track {

  background: #eee8dc;

}



::-webkit-scrollbar-thumb {

  background:

    linear-gradient(

      #b99751,

      #806128

    );

  border: 2px solid #eee8dc;

  border-radius: 999px;

}



@media (min-width: 1100px) {

  .controls-card {

    padding: 22px !important;

  }



  .studio-layout {

    gap: 20px !important;

  }

}



@media (max-width: 760px) {

  .card,

  .controls-card,

  .results-card {

    border-radius: 15px !important;

  }



  .primary-button,

  #generateButton {

    min-height: 50px;

  }

}