/* ---------- Card definition modal (shared across every NovelNumbers app) ---------- */
.card-modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,8,25,0.65);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.card-modal{
  --card-accent: var(--gold);
  position:relative;
  width:100%; max-width:440px; max-height:85vh; overflow-y:auto;
  padding:28px 26px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  /* Same two-layer gradient-border technique as .card -- border fades from --card-accent at the
     top to the neutral --line-soft further down. Unlike .card, the fill layer here is flat
     var(--bg-panel) with no color-mix wash. */
  background-image:
    linear-gradient(var(--bg-panel), var(--bg-panel)),
    linear-gradient(to bottom, var(--card-accent), var(--line-soft) 70%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border:1px solid transparent; border-radius:var(--radius);
}
.card-modal h3{
  font-family:var(--font-display); font-size:22px; font-weight:600; margin:0 0 14px;
  color:var(--ink); text-transform:capitalize;
}
.card-modal p{font-size:14px; line-height:1.6; color:var(--ink-dim); margin:0 0 12px;}
.card-modal p:last-child{margin-bottom:0;}
.card-modal p em{color:var(--gold); font-style:normal; font-weight:600;}
.card-modal-close{
  position:absolute; top:14px; right:14px; width:28px; height:28px; padding:0;
  border-radius:50%; border:1px solid var(--line-soft); background:var(--bg-panel-2);
  color:var(--ink-dim); font-size:18px; line-height:1; cursor:pointer;
}
.card-modal-close:hover{border-color:var(--gold); color:var(--ink);}