
/* Four Color Comic v40.31.35
   Premium background restoration + redesigned ChatGPT value controls */

/* ===== PREMIUM TAB ART =====
   v40.31.33 used body::before at a negative z-index, which allowed the
   body's opaque background to hide the detailed scene. Put the scene inside
   the isolated app stacking context instead. */
body::before,body::after{
  display:none!important;
}

.app{
  position:relative!important;
  isolation:isolate!important;
  background:transparent!important;
  min-height:100vh!important;
}

.app::before{
  content:""!important;
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  opacity:.88!important;
  filter:saturate(.94) contrast(1.03)!important;
}

.app::after{
  content:""!important;
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      rgba(2,5,8,.09) 0%,
      rgba(2,5,8,.18) 14%,
      rgba(3,6,9,.77) 25%,
      rgba(3,6,9,.93) 34%,
      rgba(3,6,9,.94) 66%,
      rgba(3,6,9,.77) 75%,
      rgba(2,5,8,.18) 86%,
      rgba(2,5,8,.09) 100%)!important;
}

.app>*{
  position:relative!important;
  z-index:1!important;
}

.main{
  background:rgba(3,6,9,.79)!important;
  box-shadow:0 0 70px rgba(0,0,0,.52)!important;
  backdrop-filter:blur(1px)!important;
}

.topbar{
  background:rgba(2,5,8,.95)!important;
}

/* Each tab keeps its own detailed collector environment. */
body[data-fcc-tab="dashboard"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-dashboard-scene.webp')!important}
body[data-fcc-tab="collection"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-collection-scene.webp')!important}
body[data-fcc-tab="import"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-import-scene.webp')!important}
body[data-fcc-tab="pricing"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-pricing-scene.webp')!important}
body[data-fcc-tab="grading"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-grading-scene.webp')!important}
body[data-fcc-tab="catalog"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-catalog-scene.webp')!important}
body[data-fcc-tab="discover"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-discover-scene.webp')!important}
body[data-fcc-tab="settings"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-settings-scene.webp')!important}
body[data-fcc-tab="sold"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-sold-scene.webp')!important}
body[data-fcc-tab="membership"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-membership-scene.webp')!important}
body[data-fcc-tab="marketplace"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-marketplace-scene.webp')!important}
body[data-fcc-tab="admin"] .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-admin-scene.webp')!important}
body:not([data-fcc-tab]) .app::before{background-image:url('/assets/fourcolor/premium-tab-scenes/fcc-dashboard-scene.webp')!important}

/* Keep artwork visible at large and medium desktop widths. */
@media(max-width:1500px){
  .app::before{opacity:.62!important}
  .app::after{
    background:linear-gradient(90deg,
      rgba(3,6,9,.28),rgba(3,6,9,.80) 20%,rgba(3,6,9,.96) 31%,
      rgba(3,6,9,.96) 69%,rgba(3,6,9,.80) 80%,rgba(3,6,9,.28))!important
  }
}
@media(max-width:1100px){
  .app::before{opacity:.30!important}
  .app::after{background:rgba(3,6,9,.88)!important}
}
@media(max-width:760px){
  .app::before{display:none!important}
  .app::after{background:#030609!important}
  .main{background:#030609!important}
}

/* ===== MARKET CHECK CONTROL ===== */
.v403135-market-check{
  width:156px;
  margin:6px auto 0;
  padding:7px;
  border:1px solid rgba(58,78,105,.62);
  border-radius:9px;
  background:
    linear-gradient(145deg,rgba(11,23,38,.96),rgba(5,12,21,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.v403135-market-check.ready{
  border-color:rgba(86,80,151,.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(110,89,255,.025);
}

.v403135-market-caption{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:7px;
  padding:0 2px 6px;
}
.v403135-market-caption span{
  color:#8194ad;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.065em;
}
.v403135-market-caption small{
  color:#5f748f;
  font-size:6.5px;
  white-space:nowrap;
}

.v403135-market-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
}

.v403135-market-action{
  appearance:none;
  width:100%;
  min-height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #263952;
  background:#08131f;
  color:#bac8d8;
  font:850 8px/1 system-ui,-apple-system,Segoe UI,sans-serif;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}

.v403135-market-action:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#526987;
  background:#0a1826;
  color:#f0f5fc;
}

.v403135-market-action:disabled{
  cursor:not-allowed;
  opacity:.42;
}

.v403135-market-action.copy.copied{
  border-color:rgba(62,205,157,.42);
  background:rgba(20,76,61,.22);
  color:#63e6b9;
}

.v403135-market-action.value{
  border-color:rgba(202,58,119,.28);
  background:rgba(53,14,32,.28);
  color:#a4778c;
}

.v403135-market-action.value.ready{
  border-color:rgba(226,58,129,.72);
  background:
    linear-gradient(135deg,rgba(198,38,105,.92),rgba(132,41,110,.91));
  color:white;
  box-shadow:0 6px 18px rgba(150,30,91,.15);
}

.v403135-copy-icon{
  position:relative;
  width:12px;
  height:12px;
  flex:0 0 12px;
}
.v403135-copy-icon::before,.v403135-copy-icon::after{
  content:"";
  position:absolute;
  width:7px;
  height:8px;
  border:1px solid currentColor;
  border-radius:2px;
}
.v403135-copy-icon::before{left:0;top:3px;opacity:.55}
.v403135-copy-icon::after{right:0;top:0;background:inherit}

.v403135-arrow{
  width:7px;height:7px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-left:1px;
}

.v403135-no-photo{
  display:block;
  margin-top:5px;
  color:#6c7e96;
  font-size:7px;
  line-height:1.3;
}

/* Saved value/date stay visually separate from the action. */
.v423-suggest-cell .v41-ai,
.v403120-estimated .v41-ai{
  margin-bottom:1px!important;
}
.v403134-saved-emv-date{
  margin-bottom:2px!important;
}

/* Card View can use the same component without feeling cramped. */
#collectionCards .v403135-market-check{
  width:auto;
  max-width:none;
  margin-top:7px;
}
#collectionCards .v403135-market-caption small{
  display:none;
}
#collectionCards .v403135-market-action{
  min-height:27px;
  font-size:7.5px;
}

/* Retire the old v40.31.34 cheap button presentation. */
.v403134-value-workflow,
.v403134-value-step{
  display:none!important;
}

/* ===== MANUAL COPY / PROMPT FALLBACK ===== */
.v403135-copy-backdrop{
  position:fixed;
  inset:0;
  z-index:15000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
}
.v403135-copy-backdrop.show{display:flex}
.v403135-copy-modal{
  width:min(760px,96vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid #293d57;
  border-radius:15px;
  background:linear-gradient(145deg,#091522,#050c14);
  box-shadow:0 32px 120px rgba(0,0,0,.68);
}
.v403135-copy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:15px 17px;
  border-bottom:1px solid #1b3047;
}
.v403135-copy-head span{
  display:block;
  color:#7f93ad;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.v403135-copy-head b{
  display:block;
  margin-top:3px;
  color:#f5f8fc;
  font-size:16px;
}
.v403135-copy-body{
  padding:17px;
  color:#b5c2d2;
  font-size:11px;
  line-height:1.5;
}
.v403135-copy-preview{
  display:grid;
  place-items:center;
  min-height:270px;
  margin:12px 0 15px;
  padding:12px;
  border:1px solid #20364f;
  border-radius:11px;
  background:#02070c;
}
.v403135-copy-preview img{
  display:block;
  max-width:min(370px,100%);
  max-height:55vh;
  object-fit:contain;
  border-radius:8px;
}
.v403135-manual-steps{
  display:grid;
  gap:8px;
  margin:12px 0 15px;
}
.v403135-manual-steps>div{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:10px;
  border:1px solid #1b3047;
  border-radius:9px;
  background:#07111d;
}
.v403135-manual-steps i{
  display:grid;
  place-items:center;
  width:25px;height:25px;
  border-radius:50%;
  background:#111f32;
  color:#9db1ca;
  font-style:normal;
  font-size:9px;
  font-weight:900;
}
.v403135-manual-steps span{display:grid;gap:2px}
.v403135-manual-steps b{font-size:10px;color:#e6edf6}
.v403135-manual-steps small{font-size:8px;color:#778ba5}
.v403135-copy-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

@media(max-width:650px){
  .v403135-copy-actions .btn{width:100%}
}
