/* =========================================================================
   EverSign DSC Manager — "My DSCs" customer account view (premium).
   Matches the EverSign Finder design DNA: violet #5f3a9e brand, clean cards,
   Bricolage Grotesque display + Hanken Grotesk body. Scoped under .evs-mydscs.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

.evs-mydscs{
  --ink:#161b2e; --ink2:#333a56; --muted:#5a6178; --faint:#8a90a8;
  --line:#e6e9f2; --hair:#eef1f7; --paper:#f8f9fd; --card:#fff;
  --violet:#5f3a9e; --violet2:#8257c9; --violet-ink:#3a2168; --violet-bg:#f4effc; --violet-line:#e5d9f6;
  --green:#12a05e; --green-bg:#e8f7ef; --green-line:#c3ecd6;
  --amber:#c77d16; --amber-bg:#fdf3e2; --amber-line:#f5dcae;
  --red:#d5443a; --red-bg:#fdecea; --red-line:#f6cfca;
  --grad-violet:linear-gradient(150deg,#734cb8 0%,#502f8c 52%,#3a2168 100%);
  --sh-xs:0 1px 2px rgba(22,27,46,.06);
  --sh-sm:0 3px 10px -3px rgba(22,27,46,.1),0 1px 3px rgba(22,27,46,.05);
  --r-lg:18px; --r-md:13px; --r-sm:9px;
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
}
.evs-mydscs *{ box-sizing:border-box; }

.evs-mydscs-intro{ margin:0 0 20px; color:var(--muted); font-size:.98rem; }

.evs-dsc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

.evs-dsc-card{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 20px 18px; box-shadow:var(--sh-sm); transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s; }
.evs-dsc-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(22,27,46,.24); }
.evs-dsc-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-violet); }
.evs-dsc-card.is-active::before{ background:linear-gradient(90deg,var(--green),#3ecb86); }
.evs-dsc-card.is-warn::before{ background:linear-gradient(90deg,var(--amber),#e8a53d); }
.evs-dsc-card.is-expired::before{ background:linear-gradient(90deg,var(--red),#e8736a); }

.evs-dsc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.evs-dsc-ca{ font-family:'Bricolage Grotesque',serif; font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--ink); line-height:1.1; }
.evs-dsc-type{ font-size:.86rem; color:var(--muted); margin-top:3px; }

.evs-dsc-badge{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:800; letter-spacing:.02em; padding:5px 11px; border-radius:100px; white-space:nowrap; }
.evs-dsc-badge.is-active{ color:var(--green); background:var(--green-bg); border:1px solid var(--green-line); }
.evs-dsc-badge.is-progress{ color:var(--violet); background:var(--violet-bg); border:1px solid var(--violet-line); }
.evs-dsc-badge.is-warn{ color:var(--amber); background:var(--amber-bg); border:1px solid var(--amber-line); }
.evs-dsc-badge.is-expired{ color:var(--red); background:var(--red-bg); border:1px solid var(--red-line); }

.evs-dsc-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 0; margin:2px 0 0; border-top:1px solid var(--hair); }
.evs-dsc-meta div{ display:flex; flex-direction:column; gap:2px; }
.evs-dsc-k{ font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.evs-dsc-v{ font-size:.98rem; font-weight:600; color:var(--ink); }

.evs-dsc-days{ display:flex; align-items:baseline; gap:6px; }
.evs-dsc-days b{ font-family:'Bricolage Grotesque',serif; font-size:1.35rem; font-weight:800; line-height:1; }
.evs-dsc-days.ok b{ color:var(--green); }
.evs-dsc-days.warn b{ color:var(--amber); }
.evs-dsc-days.expired b{ color:var(--red); }

.evs-dsc-cta{ margin-top:14px; }
.evs-dsc-renew{ display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; background:linear-gradient(180deg,#ff7b38,#ec5a13); color:#fff !important; font-weight:750; font-size:.96rem; padding:12px 18px; border-radius:var(--r-sm); text-decoration:none !important; box-shadow:0 12px 26px -10px rgba(236,90,19,.55); transition:transform .15s,box-shadow .15s; }
.evs-dsc-renew:hover{ transform:translateY(-1px); box-shadow:0 16px 32px -10px rgba(236,90,19,.62); color:#fff !important; }
.evs-dsc-renew::after{ content:"→"; font-weight:700; }
.evs-dsc-help{ display:block; text-align:center; margin-top:9px; font-size:.85rem; color:var(--violet); text-decoration:none; }
.evs-dsc-help:hover{ text-decoration:underline; }

.evs-dsc-empty{ background:var(--violet-bg); border:1px solid var(--violet-line); border-radius:var(--r-lg); padding:28px; text-align:center; color:var(--ink2); }
.evs-dsc-empty h3{ font-family:'Bricolage Grotesque',serif; color:var(--violet-ink); margin:0 0 6px; }
.evs-dsc-empty a{ color:var(--violet); font-weight:700; }

@media(max-width:520px){ .evs-dsc-grid{ grid-template-columns:1fr; } }

/* ---- Icons (customer panel) ---- */
.evs-mydscs .evs-ic{ display:inline-block; vertical-align:-.15em; flex:none; }
.evs-dsc-badge .evs-ic{ margin-right:1px; }
.evs-dsc-k{ display:inline-flex; align-items:center; gap:5px; }
.evs-dsc-renew{ gap:8px; }
.evs-dsc-help{ display:inline-flex !important; align-items:center; justify-content:center; gap:6px; width:100%; }
.evs-dsc-empty .evs-ic{ color:var(--violet); opacity:.5; margin-bottom:6px; }
.evs-dsc-empty a{ display:inline-flex; align-items:center; gap:6px; }