/* ═══════════════════════════════════════════════════════════════════════
   EHDarkMuse — Trial Edition layer  ·  presentation
   ───────────────────────────────────────────────────────────────────────
   Additive, non-invasive. No source stylesheet is modified. Everything is
   namespaced under .ehdmt- so it can never collide with app styles.
   Visual language matches the app: gold (#e8b84b / #d4af37) on near-black,
   Cinzel for labels, Crimson for prose.
   Kill switch: window.EHDM_TRIAL_DISABLED = true  (loads nothing).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ehdmt-gold:   #e8b84b;
  --ehdmt-gold2:  #d4af37;
  --ehdmt-ink:    #0b0b12;
  --ehdmt-line:   rgba(212,175,55,.22);
}

/* ── Locked library items (genres + vocals) ─────────────────────────────
   Cosmetic only. The item stays visible with its real name and tag count —
   the point is "there is real depth here you don't have yet", never a wall. */
.ehdmt-locked{
  position: relative;
  opacity: .62;
  filter: saturate(.55);
  transition: opacity .15s ease, filter .15s ease;
}
.ehdmt-locked:hover{ opacity: .82; filter: saturate(.8); }
.ehdmt-locked::after{
  content: "FULL";
  position: absolute;
  top: 50%; right: 10px; transform: translateY(-50%);
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 8px; letter-spacing: 1.5px; font-weight: 600;
  color: var(--ehdmt-gold);
  background: rgba(232,184,75,.10);
  border: 1px solid rgba(232,184,75,.35);
  border-radius: 3px;
  padding: 2px 6px;
  pointer-events: none;
  z-index: 3;
}
/* the small featured cards are compact; float the badge top-right instead */
.ehdmt-locked.gp-rec-card::after{ top: 8px; right: 8px; transform: none; }

/* ── Counter pill (near the Compose button) ─────────────────────────────── */
.ehdmt-pill{
  position: fixed;
  right: 16px; bottom: 56px;
  z-index: 9991;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ehdmt-gold);
  background: linear-gradient(180deg, rgba(12,12,20,.94), rgba(2,2,6,.94));
  border: 1px solid var(--ehdmt-line);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  cursor: default;
  user-select: none;
  transition: border-color .2s, color .2s;
}
.ehdmt-pill .ehdmt-pill-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ehdmt-gold); box-shadow: 0 0 6px rgba(232,184,75,.8);
}
.ehdmt-pill.ehdmt-low{ border-color: rgba(232,184,75,.55); }
.ehdmt-pill.ehdmt-low .ehdmt-pill-dot{ background:#e8a23b; box-shadow:0 0 6px rgba(232,162,59,.9); }
.ehdmt-pill.ehdmt-done{
  cursor: pointer;
  border-color: rgba(232,184,75,.7);
  color: #fff;
  background: linear-gradient(180deg, rgba(232,184,75,.20), rgba(232,184,75,.08));
}
.ehdmt-pill.ehdmt-done:hover{ background: linear-gradient(180deg, rgba(232,184,75,.30), rgba(232,184,75,.14)); }

/* ── Sidebar upgrade footer (pinned, premium chrome) ────────────────────
   Lives at the bottom of the left sidebar, pinned so it never scrolls away.
   Reads as app chrome (like an "upgrade" workspace footer), not an ad:
   dark, small, a single gold hairline. The grid keeps the first glance. */
.ehdmt-foot{
  position: sticky; bottom: 0; margin-top: auto; z-index: 5;
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(212,175,55,.16);
  background: linear-gradient(180deg, rgba(10,10,16,.86), rgba(6,6,11,.98));
  backdrop-filter: blur(3px);
}
.ehdmt-foot a{
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; border-radius: 6px;
  padding: 7px 8px;
  transition: background .14s, color .14s;
}
.ehdmt-foot a + a{ margin-top: 2px; }
.ehdmt-foot .ehdmt-f-ico{ font-size: 13px; width: 15px; text-align: center; flex: 0 0 auto; opacity: .85; }
.ehdmt-foot .ehdmt-f-txt{
  font-family: var(--ff-crimson, "Crimson Text", serif);
  font-size: 12.5px; line-height: 1.1;
}
.ehdmt-foot .ehdmt-f-sub{
  display: block; font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 7.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(233,228,214,.32); margin-bottom: 1px;
}
/* primary: unlock */
.ehdmt-foot .ehdmt-f-unlock .ehdmt-f-txt{ color: var(--ehdmt-gold); }
.ehdmt-foot .ehdmt-f-unlock:hover{ background: rgba(232,184,75,.10); }
/* secondary: listen */
.ehdmt-foot .ehdmt-f-listen .ehdmt-f-txt{ color: rgba(233,228,214,.62); }
.ehdmt-foot .ehdmt-f-listen:hover{ background: rgba(255,255,255,.04); }
.ehdmt-foot .ehdmt-f-listen:hover .ehdmt-f-txt{ color: rgba(233,228,214,.85); }

/* ── Shared overlay (welcome + recap) ───────────────────────────────────── */
.ehdmt-ov{
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(2,2,6,.72);
  backdrop-filter: blur(6px);
  animation: ehdmt-fade .25s ease;
}
@keyframes ehdmt-fade{ from{opacity:0} to{opacity:1} }
@keyframes ehdmt-rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.ehdmt-card{
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh; overflow: auto;
  padding: 30px 32px 26px;
  border: 1px solid var(--ehdmt-line);
  border-radius: 14px;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(232,184,75,.08), transparent 55%),
    linear-gradient(180deg, rgba(20,20,30,.98), rgba(6,6,12,.99));
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: ehdmt-rise .3s ease;
}
.ehdmt-x{
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  color: rgba(233,228,214,.4); font-size: 18px; line-height: 1;
  transition: color .15s;
}
.ehdmt-x:hover{ color: #e9e4d6; }

.ehdmt-eyebrow{
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ehdmt-gold);
  margin-bottom: 12px;
}
.ehdmt-h1{
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 25px; line-height: 1.15; font-weight: 600;
  color: #f3eede;
  margin: 0 0 10px;
}
.ehdmt-h1 em{ color: var(--ehdmt-gold); font-style: normal; }
.ehdmt-lead{
  font-family: var(--ff-crimson, "Crimson Text", serif);
  font-size: 16px; line-height: 1.5; color: rgba(233,228,214,.82);
  margin: 0 0 20px;
}

/* welcome feature rows */
.ehdmt-feat{ display: flex; gap: 12px; margin: 0 0 13px; }
.ehdmt-feat-ico{
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(232,184,75,.08); border: 1px solid rgba(232,184,75,.22);
}
.ehdmt-feat-t{ font-family: var(--ff-crimson, "Crimson Text", serif); }
.ehdmt-feat-t b{ display: block; color: #ece6d6; font-size: 14.5px; font-weight: 600; }
.ehdmt-feat-t span{ color: rgba(233,228,214,.6); font-size: 13px; }

/* recap stat grid */
.ehdmt-stats{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin: 4px 0 22px;
}
.ehdmt-stat{
  padding: 14px 14px 12px;
  border: 1px solid var(--ehdmt-line); border-radius: 9px;
  background: linear-gradient(180deg, rgba(232,184,75,.05), rgba(232,184,75,.01));
}
.ehdmt-stat b{
  display: block;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 27px; color: var(--ehdmt-gold); line-height: 1;
}
.ehdmt-stat span{
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(233,228,214,.5);
}

/* delta table (trial vs full) */
.ehdmt-delta{ margin: 0 0 22px; border-top: 1px solid rgba(212,175,55,.14); }
.ehdmt-delta-row{
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(212,175,55,.08);
  font-family: var(--ff-crimson, "Crimson Text", serif);
  font-size: 13.5px; color: rgba(233,228,214,.85);
}
.ehdmt-delta-row .ehdmt-d-trial{ color: rgba(233,228,214,.45); text-align: right; font-size: 12.5px; }
.ehdmt-delta-row .ehdmt-d-full{
  color: var(--ehdmt-gold); text-align: right; font-size: 12.5px;
  min-width: 74px;
}

/* buttons */
.ehdmt-actions{ display: flex; flex-direction: column; gap: 9px; }
.ehdmt-btn{
  display: block; width: 100%;
  padding: 13px 18px;
  text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: 8px; border: 1px solid transparent;
  transition: transform .1s, box-shadow .15s, background .15s;
}
.ehdmt-btn:active{ transform: translateY(1px); }
.ehdmt-btn-primary{
  color: #14110a; font-weight: 600;
  background: linear-gradient(180deg, #f0c85a, #d4af37);
  box-shadow: 0 6px 22px rgba(212,175,55,.28);
}
.ehdmt-btn-primary:hover{ box-shadow: 0 8px 28px rgba(212,175,55,.42); }
.ehdmt-btn-ghost{
  color: var(--ehdmt-gold);
  border-color: var(--ehdmt-line);
  background: rgba(232,184,75,.04);
}
.ehdmt-btn-ghost:hover{ background: rgba(232,184,75,.09); }
.ehdmt-btn-quiet{
  color: rgba(233,228,214,.55); background: none; border: none;
  font-size: 11px; letter-spacing: 1px; padding: 6px;
}
.ehdmt-btn-quiet:hover{ color: #e9e4d6; }

/* toast-style upsell nudge for locked clicks */
.ehdmt-nudge{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  z-index: 10040;
  display: flex; align-items: center; gap: 12px;
  max-width: 460px;
  padding: 12px 15px;
  border: 1px solid var(--ehdmt-line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,20,30,.98), rgba(8,8,14,.99));
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.ehdmt-nudge.ehdmt-show{ opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.ehdmt-nudge .ehdmt-n-txt{ font-family: var(--ff-crimson, "Crimson Text", serif); font-size: 13.5px; color: #e9e4d6; }
.ehdmt-nudge .ehdmt-n-txt b{ color: var(--ehdmt-gold); font-weight: 600; }
.ehdmt-nudge a{
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #14110a; font-weight: 600;
  padding: 7px 12px; border-radius: 6px;
  background: linear-gradient(180deg, #f0c85a, #d4af37);
}

@media (max-width: 560px){
  .ehdmt-stats{ grid-template-columns: 1fr 1fr; }
  .ehdmt-h1{ font-size: 22px; }
}