
/* MARCAM AI — CARBON & BURNT ORANGE
   Loaded AFTER styles.css and site.css; scoped to the homepage.
   No changes to JS, Firebase, download URLs, or gallery data. */
:root {
  --bg:#15191b;
  --panelA:#242a2d;
  --panelB:#242a2d;
  --stroke:#475158;
  --text:#f5f5f2;
  --muted:#a5b0b3;
  --accent:#ff7542;
  --shadow:0 24px 65px rgba(0,0,0,.38);
  --shadowSoft:0 10px 28px rgba(0,0,0,.2);
  --r-xl:10px;
  --r-lg:8px;
  --r-md:5px;
}
html {background:#15191b!important;min-height:100%;scrollbar-color:#515b60 #15191b;}
html body.theme-carbon {
  color:#f5f5f2;
  background:#15191b!important;
  background-image:none!important;
  background-attachment:initial!important;
  background-repeat:no-repeat!important;
  min-height:100vh;
}
body.theme-carbon::before,body.theme-carbon::after{background-image:none!important;}
body.theme-carbon #app{padding:22px clamp(14px,1.6vw,32px) 28px;}
body.theme-carbon .app-grid{grid-template-columns:minmax(255px,300px) minmax(0,1fr) minmax(255px,300px);gap:16px;align-items:start;}
body.theme-carbon .panel{
  background:#242a2d!important;
  background-image:none!important;
  border:1px solid #404a50!important;
  border-radius:10px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.17)!important;
}
body.theme-carbon .panel-left.theme-modern-left{gap:13px;padding:17px;}
body.theme-carbon .panel-right{gap:14px;max-height:none;}
body.theme-carbon .modern-section{border-color:#414c51!important;}
body.theme-carbon .modern-title,body.theme-carbon .image-label{color:#e9eeed!important;letter-spacing:.07em;}
body.theme-carbon .modern-sub,body.theme-carbon .modern-upload-hint,body.theme-carbon .hint{color:#a5b0b3!important;}
body.theme-carbon #uploadBox.modern-upload{
  background:#2d3438!important;
  border:1px dashed #69757a!important;
  border-radius:7px!important;
}
body.theme-carbon #uploadBox.modern-upload:hover{background:#333e42!important;border-color:#ff7542!important;}
body.theme-carbon .modern-upload-icon{background:#3b4548!important;border:1px solid #69757a!important;border-radius:6px!important;}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid{
  gap:8px!important;row-gap:15px!important;padding-top:10px!important;
  scrollbar-color:#5d686d #242a2d;
}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button{
  background:#31383c!important;
  border:1px solid #475158!important;
  border-radius:5px!important;
  min-height:62px!important;
  padding:11px 5px!important;
  font-size:11.5px!important;
  font-weight:750!important;
  line-height:1.14!important;
  box-shadow:none!important;
  color:#f5f5f2!important;
}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button:hover{
  background:#3b464b!important;border-color:#ff986f!important;transform:translateY(-1px);
}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button.active{
  background:#d95b30!important;border-color:#ff8b5e!important;color:#fff!important;
  box-shadow:inset 3px 0 0 #ffc0a0!important;
}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button.is-new::before,
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button.is-beta::before,
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button.is-free::before{
  border-radius:3px!important;top:-10px!important;
}
body.theme-carbon button,body.theme-carbon .btn,body.theme-carbon .size-btn,
body.theme-carbon .auth-choice-btn,body.theme-carbon .auth-method-btn,
body.theme-carbon .auth-submit-btn{border-radius:5px!important;}
body.theme-carbon .btn:not(.primary),body.theme-carbon .size-btn,
body.theme-carbon .download-edit-btn,body.theme-carbon #openGalleryBtn,
body.theme-carbon .compare-controls button{
  background:#31383c!important;border:1px solid #475158!important;color:#f5f5f2!important;
}
body.theme-carbon .btn:not(.primary):hover,body.theme-carbon .size-btn:hover,
body.theme-carbon #openGalleryBtn:hover,body.theme-carbon .download-edit-btn:hover{
  background:#3c464b!important;border-color:#ff986f!important;
}
body.theme-carbon #goBtn.modern-generate,body.theme-carbon .btn.primary,
body.theme-carbon .auth-submit-btn{
  background:#d95b30!important;background-image:none!important;
  border:1px solid #f47a4e!important;color:#fff!important;
  box-shadow:none!important;
}
body.theme-carbon #goBtn.modern-generate:hover,body.theme-carbon .btn.primary:hover{
  background:#f26b3b!important;
}
body.theme-carbon button:focus-visible,body.theme-carbon a:focus-visible,
body.theme-carbon input:focus-visible{outline:2px solid #ff986f!important;outline-offset:2px;}
body.theme-carbon .style-radio span::before{border-color:#748086!important;}
body.theme-carbon .style-radio input[type="radio"]:checked + span::before{border-color:#ff7542!important;}
body.theme-carbon .compare{
  background:#1c2225!important;
  border:1px solid #3f494f!important;
  border-radius:8px!important;
}
body.theme-carbon .compare.no-preview-frame{background:#1b2023!important;}
body.theme-carbon .compare-badge{background:#222a2e!important;border-color:#475158!important;}
body.theme-carbon .compare-controls,body.theme-carbon .compare-download-tools{color:#d3dadb;}
body.theme-carbon .warning,body.theme-carbon .mobile-note,body.theme-carbon .update-ticker{
  background:#2c3337!important;border:1px solid #444e53!important;
  border-radius:7px!important;color:#d9e0df!important;
}
body.theme-carbon #userGallery h3{font-size:19px!important;letter-spacing:-.02em;}
body.theme-carbon #galleryGrid{background:#1d2326!important;border-color:#414b50!important;border-radius:7px!important;}
body.theme-carbon .gallery-thumb,body.theme-carbon .featured-gallery-main,
body.theme-carbon .featured-gallery-thumb{
  background:#31393d!important;border-color:#465158!important;border-radius:6px!important;
}
body.theme-carbon .gallery-thumb:hover{border-color:#ff7542!important;}
body.theme-carbon .facebook-promo,body.theme-carbon .youtube-promo{
  border-radius:8px!important;box-shadow:none!important;
}
body.theme-carbon .facebook-promo{background:#253746!important;border:1px solid #3f5d70!important;}
body.theme-carbon .youtube-promo{background:#392b2b!important;border:1px solid #614444!important;}
body.theme-carbon .social-heading{color:#d7dedf!important;}
body.theme-carbon .modal-backdrop{background:rgba(6,9,10,.82)!important;}
body.theme-carbon .modal{
  background:#202629!important;
  border:1px solid #465157!important;
  border-radius:10px!important;
  box-shadow:0 24px 65px rgba(0,0,0,.55)!important;
}
body.theme-carbon .modal-header,body.theme-carbon .modal-footer{
  background:#293135!important;border-color:#465157!important;
}
body.theme-carbon .modal-body{background:#181e21!important;}
/* Full creative gallery */
body.theme-carbon #galleryGridModal .modal.modal-gallery-grid{
  background:#202629!important;border:1px solid #475158!important;border-radius:12px!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-header{
  background:#293135!important;border-bottom:1px solid #465157!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-tools{
  background:#202629!important;border-bottom:1px solid #3e484d!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-subtitle,
body.theme-carbon #galleryGridModal .modern-gallery-meta{color:#a5b0b3!important;}
body.theme-carbon #galleryGridModal .modern-gallery-search{
  background:#30383c!important;border:1px solid #526066!important;
  color:#c5cdcf!important;border-radius:6px!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-search:focus-within{
  border-color:#ff7542!important;box-shadow:0 0 0 3px rgba(255,117,66,.13)!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-search input{color:#f5f5f2!important;background:transparent!important;}
body.theme-carbon #galleryGridModal .modern-gallery-filter{
  background:#31383c!important;border:1px solid #4b575c!important;
  color:#e1e6e5!important;border-radius:5px!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-filter:hover{background:#3b464b!important;border-color:#ff986f!important;}
body.theme-carbon #galleryGridModal .modern-gallery-filter.active{
  background:#d95b30!important;border-color:#ff7542!important;color:white!important;
}
body.theme-carbon #galleryGridModal .modal-body-gallery-grid{background:#181e21!important;}
body.theme-carbon #galleryGridModal .modern-gallery-card{
  background:#293135!important;border:1px solid #475158!important;
  color:#f5f5f2!important;border-radius:7px!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-card:hover{
  border-color:#ff7542!important;box-shadow:0 8px 24px rgba(0,0,0,.26)!important;
}
body.theme-carbon #galleryGridModal .modern-gallery-card-image{background:#31383c!important;}
body.theme-carbon #galleryGridModal .modern-gallery-card-info{background:#293135!important;}
body.theme-carbon #galleryGridModal .modern-gallery-card-arrow{color:#ff986f!important;}
body.theme-carbon #galleryGridModal .modal-footer{background:#293135!important;}
body.theme-carbon #galleryGridModal #fullGalleryPageLabel{color:#c9d0d0!important;}
/* Navigation and footer are provided by site.css: skin only, don't alter positioning or dropdown behavior. */
body.theme-carbon header,body.theme-carbon .site-header,
body.theme-carbon .navbar,body.theme-carbon nav.site-nav{
  background-color:#202629!important;
  border-color:#3e494e!important;
}
body.theme-carbon footer,body.theme-carbon .site-footer{
  background:#15191b!important;border-color:#3e494e!important;color:#b9c2c3!important;
}
body.theme-carbon nav a:hover,body.theme-carbon .navbar a:hover{color:#ff986f;}
body.theme-carbon .rank-pill{background:#31383c!important;border:1px solid #4b575c!important;}
body.theme-carbon .profile-menu{background:#293135!important;border:1px solid #475158!important;}
body.theme-carbon input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),
body.theme-carbon select,body.theme-carbon textarea{
  background-color:#30383c;color:#f5f5f2;border-color:#526066;border-radius:5px;
}
body.theme-carbon input::placeholder{color:#a5b0b3;}
body.theme-carbon *{scrollbar-color:#59646a #202629;}
@media(max-width:1250px){
  body.theme-carbon .app-grid{grid-template-columns:minmax(230px,280px) minmax(0,1fr) minmax(230px,280px);gap:12px;}
}
@media(max-width:1050px){
  body.theme-carbon .app-grid{grid-template-columns:minmax(240px,300px) minmax(0,1fr);}
  body.theme-carbon .panel-right{grid-column:1/-1;}
}
@media(max-width:700px){
  body.theme-carbon #app{padding:12px;}
  body.theme-carbon .app-grid{grid-template-columns:minmax(0,1fr);gap:12px;}
  body.theme-carbon .panel-right{grid-column:auto;}
  body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button{min-height:58px!important;}
  body.theme-carbon #galleryGridModal .modal.modal-gallery-grid{border-radius:0!important;}
}

/* Compact category-based style selector */
body.theme-carbon .style-category-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:13px 0 6px;}
body.theme-carbon .style-category-tabs .style-category-tab{min-width:0;min-height:39px;padding:8px 3px;border:1px solid #475158!important;border-radius:4px!important;background:#31383c!important;color:#dce1e2!important;font-size:12px;font-weight:750;cursor:pointer;box-shadow:none!important;}
body.theme-carbon .style-category-tabs .style-category-tab:hover{border-color:#ff986f!important;background:#3b464b!important;}
body.theme-carbon .style-category-tabs .style-category-tab.is-current{background:#d95b30!important;color:#fff!important;border-color:#ff986f!important;}
body.theme-carbon .style-category-count{color:#a5b0b3;font-size:11px;line-height:1.4;margin-bottom:7px;}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-content:start!important;gap:7px!important;row-gap:14px!important;padding:8px 0 0!important;max-height:none!important;height:auto!important;overflow:visible!important;}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button{min-width:0!important;min-height:49px!important;height:auto!important;padding:7px 3px!important;font-size:10.5px!important;line-height:1.12!important;white-space:normal!important;overflow-wrap:break-word!important;}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button[data-style-category][hidden]{display:none!important;}
body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button.is-new::before,body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button.is-beta::before,body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button.is-free::before{top:-9px!important;}
@media(max-width:700px){body.theme-carbon .panel-left .button-row.convert-buttons.modern-style-grid > button{min-height:49px!important;}}


/* v2: Featured creation plus two complete rows of three recent designs. */
body.theme-carbon #galleryGrid.gallery-grid {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:7px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:8px!important;
  box-sizing:border-box!important;
}
body.theme-carbon #galleryGrid > .gallery-thumb {
  display:block!important;
  position:relative!important;
  grid-column:span 1;
  min-width:0!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #465158!important;
  border-radius:6px!important;
  cursor:pointer;
}
body.theme-carbon #galleryGrid > .gallery-thumb:first-child {
  grid-column:1 / -1!important;
  aspect-ratio:2.4 / 1!important;
  background:#1d2326!important;
}
body.theme-carbon #galleryGrid > .gallery-thumb img {
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
body.theme-carbon #galleryGrid > .gallery-thumb .gallery-style-label {display:none!important;}
body.theme-carbon .panel-right #userGallery {display:flex;flex-direction:column;gap:10px;min-height:0;}
body.theme-carbon .panel-right #userGallery > h3 {margin:0 0 4px!important;}
body.theme-carbon .panel-right .featured-gallery-caption {margin:0!important;}
body.theme-carbon .panel-right .social-heading {margin:6px 0 0!important;}
body.theme-carbon .panel-right .facebook-promo,
body.theme-carbon .panel-right .youtube-promo {min-height:0!important;margin:0!important;padding:12px!important;}
body.theme-carbon .panel-right {align-self:start;}
/* Never allow older global button-row styles to reveal hidden category items. */
body.theme-carbon .panel-left .modern-style-grid > button[hidden] {display:none!important;}
body.theme-carbon .panel-left .style-category-tabs {display:grid!important;}

@media (min-width:1101px) and (max-height:800px) {
  body.theme-carbon #galleryGrid > .gallery-thumb:first-child {aspect-ratio:3.2 / 1!important;}
  body.theme-carbon .panel-right #userGallery {gap:7px;}
  body.theme-carbon .panel-right .facebook-promo,body.theme-carbon .panel-right .youtube-promo{padding:8px!important;}
}

/* FIX: legacy styles.css hides thumbnail 5 onwards with !important.
   Show one featured creation and TWO rows of three recent creations. */
body.theme-carbon #userGallery #galleryGrid.gallery-grid > .gallery-thumb:nth-child(n+5) {
  display:block !important;
}
body.theme-carbon #userGallery #galleryGrid.gallery-grid > .gallery-thumb {
  display:block !important;
}
/* Allow the right panel to reach the same bottom edge as the preview panel.
   The exact target height is updated by script.js as the preview changes. */
@media (min-width:1101px) {
  body.theme-carbon .app-grid > .panel-right {
    box-sizing:border-box;
    min-height:var(--marcam-center-panel-height,auto) !important;
  }
}


/* Share & Earn Credits — six compact buttons on ONE row */
body.theme-carbon .compare{position:relative}
body.theme-carbon .compare-floating-toggle{position:absolute;z-index:8;right:12px;top:12px;width:auto!important;padding:8px 10px!important;font-size:11px!important;line-height:1.2!important;background:#31383ce8!important;border:1px solid #647077!important;white-space:nowrap}
body.theme-carbon .compare-controls{justify-content:center;margin:7px 0 10px}
body.theme-carbon .share-rewards{background:#292f32;border:1px solid #475158;border-radius:8px;padding:14px;margin:10px 0;color:#f5f5f2}
body.theme-carbon .share-rewards[hidden]{display:none!important}
body.theme-carbon .share-rewards-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.theme-carbon .share-rewards-heading strong{font-size:17px}
body.theme-carbon .share-rewards-heading p{color:#b5bec1;font-size:12px;margin:4px 0 0}
body.theme-carbon .share-rewards-counter{background:#d95b30;color:white;padding:8px 12px;border-radius:6px;font-weight:800;white-space:nowrap}
body.theme-carbon .share-rewards-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:12px 0}
body.theme-carbon .share-rewards-progress span{height:7px;background:#475158;border-radius:10px}
body.theme-carbon .share-rewards-progress span.filled{background:#ff7542}
body.theme-carbon .share-rewards-platforms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%}
body.theme-carbon .share-rewards-platforms button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip;padding:10px 2px;font-size:clamp(9px,0.8vw,12px);font-weight:700;border-radius:6px;border:1px solid #475158;background:#31383c;color:#f5f5f2;cursor:pointer}
body.theme-carbon .share-rewards-platforms button:hover,body.theme-carbon .share-rewards-platforms button[aria-pressed=true]{border-color:#ff7542;background:#49382f;color:#ffb08a}
body.theme-carbon .share-rewards-action{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
body.theme-carbon #shareRewardNow{background:#d95b30!important;border-color:#ff7542!important;color:#fff!important;padding:8px 20px}
body.theme-carbon #shareRewardNow:disabled{opacity:.5;cursor:not-allowed}
body.theme-carbon #shareRewardMessage{font-size:12px;color:#d3dadb;flex:1}
body.theme-carbon .share-rewards-footnote{color:#a5b0b3;font-size:11px;margin:10px 0 0}
@media(max-width:600px){body.theme-carbon .share-rewards{padding:9px}body.theme-carbon .share-rewards-platforms{gap:2px}body.theme-carbon .share-rewards-platforms button{font-size:8px;padding:9px 1px}body.theme-carbon .compare-floating-toggle{font-size:9px!important;padding:6px!important}}
