/* ============================================================================
   METATRIX SIDEBAR CARDS — unified "neat card" styling for the OPENED sidebar.
   Frames the four injected sections — Device Link · Music/Videos · Market · Clip
   — as consistent rounded cards with a sovereign-green top accent, a clean
   status dot, a bold title, and an accent OPEN pill. Loads LAST so it
   harmonizes the per-module stylesheets without editing any of them.
   Scope: only when the sidebar is expanded (html.mtx-side-open).
   ========================================================================== */
:root {
  --mtxc-line:  #23232e;
  --mtxc-bg1:   rgba(20,20,28,.94);
  --mtxc-bg2:   rgba(12,12,18,.94);
  --mtxc-green: #00ffb2;
}

/* ── the card frame ─────────────────────────────────────────────────────── */
html.mtx-side-open #mtx-devlink,
html.mtx-side-open #mtx-music,
html.mtx-side-open #mtx-market,
html.mtx-side-open #mtx-clip {
  position: relative;
  margin: 7px 10px;
  border: 1px solid var(--mtxc-line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--mtxc-bg1), var(--mtxc-bg2));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 6px 18px rgba(0,0,0,.28);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* sovereign-green top accent bar (rounded to the card corners) */
html.mtx-side-open #mtx-devlink::before,
html.mtx-side-open #mtx-music::before,
html.mtx-side-open #mtx-market::before,
html.mtx-side-open #mtx-clip::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--mtxc-green), #27e0a0 55%, transparent);
  opacity: .9; pointer-events: none; z-index: 2;
}

/* hover: lift + green glow */
html.mtx-side-open #mtx-devlink:hover,
html.mtx-side-open #mtx-music:hover,
html.mtx-side-open #mtx-market:hover,
html.mtx-side-open #mtx-clip:hover {
  border-color: rgba(0,255,178,.42);
  box-shadow: 0 0 0 1px rgba(0,255,178,.14), 0 8px 22px rgba(0,0,0,.38);
  transform: translateY(-1px);
}

/* ── the header row ─────────────────────────────────────────────────────── */
html.mtx-side-open #mtx-devlink .dl-head,
html.mtx-side-open #mtx-music   .mu-head,
html.mtx-side-open #mtx-market  .mk-head,
html.mtx-side-open #mtx-clip    .ck-head {
  padding: 11px 12px;
  border-radius: 12px 12px 0 0;
  gap: 9px;
}

/* unify the status dot */
html.mtx-side-open #mtx-devlink .dl-dot,
html.mtx-side-open #mtx-music   .mu-dot,
html.mtx-side-open #mtx-market  .mk-dot,
html.mtx-side-open #mtx-clip    .ck-dot {
  width: 8px; height: 8px; flex: 0 0 8px;
}

/* unify the title */
html.mtx-side-open #mtx-devlink .dl-title,
html.mtx-side-open #mtx-music   .mu-title,
html.mtx-side-open #mtx-market  .mk-title,
html.mtx-side-open #mtx-clip    .ck-title {
  font-size: 13px; font-weight: 650; letter-spacing: .01em; flex: 1;
}

/* unify the OPEN pill (market = pink, clip = teal already; normalize shape) */
html.mtx-side-open #mtx-market .mk-zoom,
html.mtx-side-open #mtx-clip   .ck-zoom {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  padding: 3px 9px; border-radius: 999px; line-height: 1.3;
}

/* tidy the carets so every card reads the same */
html.mtx-side-open #mtx-devlink .dl-caret,
html.mtx-side-open #mtx-music   .mu-caret { opacity: .92; }
html.mtx-side-open #mtx-market  .mk-caret,
html.mtx-side-open #mtx-clip    .ck-caret { font-size: 12px; opacity: .7; margin-left: 2px; }

/* body sits flush inside the rounded card */
html.mtx-side-open #mtx-devlink .dl-body,
html.mtx-side-open #mtx-music   .mu-body,
html.mtx-side-open #mtx-market  .mk-body,
html.mtx-side-open #mtx-clip    .ck-body {
  border-top: 1px solid rgba(255,255,255,.04);
}