/* ===== Main comic cut detail view: subtle themed color pass =====
   Soft site-matching accents only. No bright blocks, no new hover behavior. */
:root{
  --cc-accent-purple: rgba(154,139,255,.46);
  --cc-accent-purple-soft: rgba(154,139,255,.105);
  --cc-accent-teal: rgba(95,238,218,.34);
  --cc-accent-teal-soft: rgba(95,238,218,.075);
  --cc-accent-gold: rgba(255,214,120,.32);
  --cc-accent-gold-soft: rgba(255,214,120,.070);
  --cc-accent-blue: rgba(120,170,255,.34);
  --cc-accent-blue-soft: rgba(120,170,255,.075);
  --cc-panel-glow: 0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}

/* Top metadata pills: keep the shape, add calm intentional accents. */
.card .pill{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,255,255,.092) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    radial-gradient(220px 80px at 0% 0%, var(--cc-accent-purple-soft), transparent 72%) !important;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.10);
}
.card .pill label{
  color:rgba(201,196,255,.82) !important;
}
.card .pill:nth-child(2n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.044), rgba(255,255,255,.016)),
    radial-gradient(220px 80px at 0% 0%, var(--cc-accent-teal-soft), transparent 72%) !important;
  box-shadow:inset 3px 0 0 rgba(95,238,218,.24);
}
.card .pill:nth-child(3n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.044), rgba(255,255,255,.016)),
    radial-gradient(220px 80px at 0% 0%, var(--cc-accent-blue-soft), transparent 72%) !important;
  box-shadow:inset 3px 0 0 rgba(120,170,255,.22);
}
.card .pill:nth-child(5n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.044), rgba(255,255,255,.016)),
    radial-gradient(220px 80px at 0% 0%, var(--cc-accent-gold-soft), transparent 72%) !important;
  box-shadow:inset 3px 0 0 rgba(255,214,120,.22);
}
.card .pill:nth-child(2n) label{ color:rgba(176,246,235,.78) !important; }
.card .pill:nth-child(3n) label{ color:rgba(190,211,255,.78) !important; }
.card .pill:nth-child(5n) label{ color:rgba(255,226,168,.76) !important; }

/* Navigation buttons: a faint color edge so they belong with the detail view. */
.card .comic-cut-nav-btn{
  border-color:rgba(255,255,255,.09) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.010)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.card .comic-cut-nav-btn:first-child{
  box-shadow:inset 3px 0 0 rgba(154,139,255,.26), inset 0 1px 0 rgba(255,255,255,.035);
}
.card .comic-cut-nav-btn:last-child{
  box-shadow:inset -3px 0 0 rgba(95,238,218,.22), inset 0 1px 0 rgba(255,255,255,.035);
}

/* Shared panel treatment for Value Highlights and Additional Information. */
.cc-highlights-panel,
.card .details-panels .more,
.card .more{
  border-color:rgba(154,139,255,.15) !important;
  background:
    linear-gradient(180deg, rgba(154,139,255,.044), rgba(255,255,255,.012) 42%, rgba(255,255,255,.008)),
    radial-gradient(520px 160px at 0% -10%, rgba(154,139,255,.075), transparent 68%) !important;
  box-shadow:var(--cc-panel-glow) !important;
}
.cc-highlights-panel,
.card .details-panels .more{
  position:relative;
}
.cc-highlights-panel::before,
.card .details-panels .more::before{
  content:"";
  position:sticky;
  top:0;
  display:block;
  height:2px;
  margin:-12px -14px 10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(154,139,255,.55), rgba(95,238,218,.30), transparent 78%);
  pointer-events:none;
  z-index:1;
}
.card .details-panels .more::before{
  margin:-6px -14px 4px;
}

/* Value Highlights: use restrained accents on labels/icons, not colorful blocks. */
.cc-highlights-kicker,
.cc-highlight-label,
.card .more .kv .k{
  color:rgba(201,196,255,.78) !important;
}
.cc-highlights-title,
.cc-highlight-value,
.card .more .kv .v{
  color:rgba(242,243,255,.96) !important;
}
.cc-highlight-icon{
  color:rgba(154,139,255,.82) !important;
}
.cc-highlight-row:nth-child(2n) .cc-highlight-icon{
  color:rgba(95,238,218,.72) !important;
}
.cc-highlight-row:nth-child(3n) .cc-highlight-icon{
  color:rgba(255,214,120,.70) !important;
}
.cc-highlight-row,
.card .more .kv,
.card .more .kv.ai-wide{
  border-bottom-color:rgba(255,255,255,.080) !important;
}
.cc-highlights-head{
  border-bottom-color:rgba(154,139,255,.16) !important;
}
.cc-highlight-note,
.cc-highlights-summary{
  color:rgba(181,185,198,.88) !important;
}

/* Keep the previous no-hover behavior for the info panels. */
.cc-highlights-panel:hover,
.cc-highlights-panel:active,
.card .more:hover,
.card .more:active{
  border-color:rgba(154,139,255,.15) !important;
  background:
    linear-gradient(180deg, rgba(154,139,255,.044), rgba(255,255,255,.012) 42%, rgba(255,255,255,.008)),
    radial-gradient(520px 160px at 0% -10%, rgba(154,139,255,.075), transparent 68%) !important;
  box-shadow:var(--cc-panel-glow) !important;
}

@media (max-width:780px){
  .cc-highlights-panel,
  .card .details-panels .more,
  .card .more,
  .card .more[style*="display: block"]{
    border-color:rgba(154,139,255,.13) !important;
    background:
      linear-gradient(180deg, rgba(154,139,255,.034), rgba(255,255,255,.010) 45%, rgba(255,255,255,.006)),
      radial-gradient(360px 120px at 0% -12%, rgba(154,139,255,.055), transparent 72%) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.030) !important;
  }
  .cc-highlights-panel::before,
  .card .details-panels .more::before{
    height:2px;
    margin-left:-12px;
    margin-right:-12px;
  }
}