/* ZEXARA TASKS OBSIDIAN GOLD V1
   Applies only to wheel4 / magnet4.
   Purely visual. No task logic changes.
*/

/* PAGE AND GAP BACKGROUNDS */
html body:not(.admin-route) #root .wheel4,
html body:not(.admin-route) #root .magnet4 {
  background:#101114 !important;
  background-image:none !important;
  color:#F5F1E9 !important;
  color-scheme:dark;
}

html body:not(.admin-route) #root
.wheel4 .magnet4 {
  background:#101114 !important;
}

/* LARGE CARDS */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(
  .magnet4-card,
  .magnet4-overview-card,
  .magnet4-history
) {
  background:
    linear-gradient(155deg,#1D222A,#15181D)
    !important;
  background-image:
    linear-gradient(155deg,#1D222A,#15181D)
    !important;
  border:1px solid rgba(212,175,55,.22) !important;
  color:#F5F1E9 !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035)
    !important;
}

/* TITLES AND DESCRIPTIONS */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(
  .wheel4-heading,
  .magnet4-head,
  .magnet4-history-head
) {
  color:#F5F1E9 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(
  .wheel4-heading,
  .magnet4-head,
  .magnet4-history-head
) :is(h1,h2,h3,strong,b) {
  color:#F5F1E9 !important;
  -webkit-text-fill-color:#F5F1E9 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(
  .magnet4-kicker,
  .magnet4-kicker-desc
) {
  color:#D4AF37 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(.magnet4-desc,.magnet4-history-copy) {
  color:#B9C1CC !important;
}

/* MAGNET ARTWORK — KEEP SHAPE */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-attractor {
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.24));
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-magnet-shape {
  filter:drop-shadow(0 5px 10px rgba(212,175,55,.10));
}

/* FOUR STAT CARDS */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-stats {
  background:transparent !important;
  background-image:none !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-stats > * {
  background:
    linear-gradient(155deg,#252B34,#1C2129)
    !important;
  background-image:
    linear-gradient(155deg,#252B34,#1C2129)
    !important;
  border:1px solid rgba(212,175,55,.18) !important;
  color:#F5F1E9 !important;
  box-shadow:none !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-stats > * :is(strong,b) {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-stats > * :is(small,span,p) {
  color:#B8C0CB !important;
}

/* SEVEN-DAY CHAIN */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-days {
  background:transparent !important;
  background-image:none !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-day {
  background:#232933 !important;
  background-image:none !important;
  border-color:rgba(212,175,55,.19) !important;
  color:#F5F1E9 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-day :is(strong,b) {
  color:#F5F1E9 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-pot,
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-requirement {
  background:#222831 !important;
  background-image:none !important;
  border-color:rgba(212,175,55,.22) !important;
  color:#F5F1E9 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-pot :is(strong,b) {
  color:#F5F1E9 !important;
  -webkit-text-fill-color:#F5F1E9 !important;
}

/* ACTIONS AND STATUS */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
button:not(:disabled) {
  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
button:disabled {
  cursor:not-allowed;
  opacity:.65;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(.magnet4-card,.magnet4-overview-card)
button:not(:disabled) {
  border-color:rgba(212,175,55,.30);
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(.magnet4-card,.magnet4-overview-card)
button:not(:disabled):active {
  transform:scale(.985);
}

/* RECENT ACTIVITY */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-history-list {
  background:transparent !important;
  background-image:none !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-history-item {
  background:#222831 !important;
  background-image:none !important;
  border-color:rgba(212,175,55,.18) !important;
  color:#F5F1E9 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-history-icon {
  background:#2B3038 !important;
  color:#D4AF37 !important;
  border-color:rgba(212,175,55,.24) !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-history-icon svg {
  color:#D4AF37 !important;
  stroke:#D4AF37 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-history-value {
  color:#D4AF37 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-history-empty {
  background:#1E242C !important;
  background-image:none !important;
  border-color:rgba(212,175,55,.17) !important;
  color:#BFC6D0 !important;
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-history-empty :is(p,span,small) {
  color:#BFC6D0 !important;
}

/* NOTICE */
html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
.magnet4-notice {
  background:#222831 !important;
  border-color:rgba(212,175,55,.18) !important;
  color:#CFD5DE !important;
}

/* SUBTLE CARD ENTRANCE */
@keyframes zxTasksRevealV1 {
  from {
    opacity:0;
    transform:translateY(7px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

html body:not(.admin-route) #root
:is(.wheel4,.magnet4)
:is(
  .magnet4-overview-card,
  .magnet4-card,
  .magnet4-history
) {
  animation:zxTasksRevealV1 .34s ease-out both;
}

@media (prefers-reduced-motion:reduce) {
  html body:not(.admin-route) #root
  :is(.wheel4,.magnet4)
  :is(
    .magnet4-overview-card,
    .magnet4-card,
    .magnet4-history
  ) {
    animation:none !important;
  }
}

/* END ZEXARA TASKS OBSIDIAN GOLD V1 */

/* ===== ZEXARA TASKS BACKDROP CLEAN FIX V2 =====
   Goal:
   - remove ugly black visible area behind top task cards
   - keep only the clean obsidian-gold card surfaces
   - do not touch logic / JS
================================================ */

.magnet4,
.wheel4{
  position:relative;
  isolation:isolate;
  background:transparent !important;
}

.magnet4::before,
.magnet4::after,
.wheel4::before,
.wheel4::after,
.magnet4-attractor::before,
.magnet4-attractor::after{
  content:none !important;
  display:none !important;
}

.magnet4-card,
.magnet4-overview-card,
.magnet4-history{
  position:relative;
  z-index:2;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(194,149,38,.10), transparent 36%),
    radial-gradient(circle at 0% 0%, rgba(31,46,74,.12), transparent 28%),
    linear-gradient(145deg,#151d2a,#0d131d) !important;
  border-color:rgba(184,142,42,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 26px rgba(0,0,0,.20) !important;
}

.magnet4 > .magnet4-card:first-child,
.magnet4 > .magnet4-overview-card:first-child,
.magnet4 > .magnet4-history:first-child{
  margin-top:0 !important;
}

.magnet4-card::before,
.magnet4-card::after,
.magnet4-overview-card::before,
.magnet4-overview-card::after,
.magnet4-history::before,
.magnet4-history::after{
  content:none !important;
  display:none !important;
}

/* small cleanup for inner strip below check-in */
.magnet4-requirement,
.magnet4-days,
.magnet4-history-empty{
  background:
    linear-gradient(145deg, rgba(22,29,42,.96), rgba(12,18,27,.98)) !important;
  border-color:rgba(184,142,42,.16) !important;
}