/* ════════════════════════════════════════════════════════════════════════
   DEALS WIDGETS — REDESIGN  (scope .dw-*)
   Diangkat dari prototipe dummypreview/deals-widgets.html
   Dipakai oleh wrapper deals/reports.vue + body widget modul Deals.
   Bahasa visual: brand #1a83c7, font Inter (sudah global), token --dw-*.
   PHASE 1 PILOT — dipakai 7 widget pilot; sisa 52 widget memakai body lama.
   CSS terpisah dari leads-widgets.css (.lw-*) atas keputusan user.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --dw-brand:#1a83c7; --dw-brand-d:#136aa3; --dw-brand-l:#e7f2fa; --dw-brand-l2:#f0f6fb;
  --dw-ink:#1d2433; --dw-ink2:#394c62; --dw-ink3:#5e6e82; --dw-muted:#8492a6; --dw-faint:#a3afbd;
  --dw-line:#e8ecf2; --dw-line2:#eef2f7; --dw-bg:#f2f4f4; --dw-card:#fff;
  --dw-hot:#2e9e5b; --dw-hot-l:#e9f7ee; --dw-warn:#c47f17; --dw-warn-l:#fdf6ec;
  --dw-bad:#d8483f; --dw-bad-l:#fbe8e6; --dw-tip:#1a83c7; --dw-tip-l:#e9f3fb;
  --dw-r:14px; --dw-r-sm:10px; --dw-r-xs:8px;
  --dw-sh:0 1px 2px rgba(20,40,80,.04),0 5px 16px rgba(20,40,80,.05);
  --dw-sh-h:0 2px 6px rgba(20,40,80,.07),0 16px 34px rgba(20,40,80,.12);
  /* palet seri chart (samakan dgn Highcharts colors) */
  --dwc1:#1a83c7; --dwc2:#2A9BC8; --dwc3:#21A7B8; --dwc4:#1BB39C; --dwc5:#52c41a;
  --dwc6:#f0894e; --dwc7:#7a77ff; --dwc8:#e8590c;
}
.dw-card *{box-sizing:border-box}
.dw-card button{font-family:inherit;cursor:pointer}
.dw-card ::-webkit-scrollbar{width:8px;height:8px}
.dw-card ::-webkit-scrollbar-thumb{background:#cdd5e1;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.dw-card ::-webkit-scrollbar-thumb:hover{background:#a9b5c6}
.dw-card ::-webkit-scrollbar-track{background:transparent}

/* ════════════ CARD CHROME ════════════ */
.dw-card{background:var(--dw-card);border:1px solid var(--dw-line);border-radius:var(--dw-r);box-shadow:var(--dw-sh);
  display:flex;flex-direction:column;min-height:360px;max-height:440px;position:relative;transition:.15s}
.dw-card:hover{box-shadow:var(--dw-sh-h)}
/* widget dgn body custom (funnel pipeline Group B, dll — tanpa .dw-root) pakai tinggi natural,
   jangan dipaksa cap 440px (bisa ke-clip / nyembul). Cap tetap utk widget standar ber-.dw-root. */
.dw-card:not(:has(.dw-root)){max-height:none}
/* ── rantai tinggi: pastikan body widget mengisi tinggi kartu agar isi & state ter-center.
   Di-scope :has(.dw-root) supaya hanya widget redesign (.dw-*) yang terpengaruh — 52 widget lama tak tersentuh. */
.dw-card .widget-body:has(.dw-root){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.dw-card .widget-body:has(.dw-root)>.d-flex.align-items-stretch{flex:1;min-height:0}
.dw-card .widget-body:has(.dw-root)>.d-flex.align-items-stretch>*{display:flex;flex-direction:column;flex:1;min-height:0}
.dw-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--dw-line2)}
.dw-head .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0;
  background:var(--dw-brand-l);color:var(--dw-brand)}
.dw-htxt{min-width:0;display:flex;flex-direction:column}
.dw-htxt .ttl{font-size:13.5px;font-weight:750;color:var(--dw-ink);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-htxt .sub{font-size:11px;color:var(--dw-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-hsp{flex:1}
/* tombol ikon header (i / filter / view-toggle / ⋯) */
.dw-ib{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--dw-muted);font-size:14px;
  border:1px solid transparent;background:none;flex-shrink:0;position:relative;transition:.12s}
.dw-ib:hover{background:var(--dw-brand-l2);color:var(--dw-brand)}
.dw-ib.on{background:var(--dw-brand-l);color:var(--dw-brand)}
.dw-ib.has-filter{color:var(--dw-brand);background:var(--dw-brand-l)}
.dw-ib.has-filter::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--dw-hot);border:2px solid #fff;box-shadow:0 0 0 1px var(--dw-hot)}
/* bar ringkasan filter aktif (di atas isi widget) */
.dw-activefilter{display:flex;align-items:center;gap:9px;margin:0 16px 11px;padding:8px 12px;border-radius:9px;
  background:var(--dw-brand-l2);border:1px solid #dcebf7;font-size:11.5px;color:var(--dw-ink2)}
.dw-activefilter>.af-ic{color:var(--dw-brand);font-size:14px;flex-shrink:0}
.dw-activefilter .af-lbl{font-weight:700;color:var(--dw-brand);white-space:nowrap}
.dw-activefilter .af-body{flex:1;min-width:0;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.dw-activefilter .af-body .text-primary{color:var(--dw-muted)!important;font-weight:600}
.dw-activefilter .af-x{margin-left:auto;width:25px;height:25px;border-radius:7px;display:grid;place-items:center;
  color:var(--dw-muted);background:#fff;border:1px solid #dcebf7;flex-shrink:0;cursor:pointer;transition:.12s}
.dw-activefilter .af-x:hover{background:var(--dw-bad-l);border-color:#f0c9c5;color:var(--dw-bad)}
/* ⓘ kecil & halus menempel di judul */
.dw-infowrap{flex-shrink:0;margin-left:-2px;position:relative}
.dw-ib.dw-info{width:22px;height:22px;font-size:13px;color:var(--dw-faint)}
.dw-ib.dw-info:hover,.dw-ib.dw-info.on{background:var(--dw-brand-l);color:var(--dw-brand)}
/* segmented view toggle (Chart/Tabel) */
.dw-seg{display:inline-flex;background:#f3f6fa;border:1px solid var(--dw-line);border-radius:8px;padding:2px;gap:2px;flex-shrink:0}
.dw-seg button{height:24px;width:28px;border-radius:6px;display:grid;place-items:center;font-size:12px;color:var(--dw-muted);border:none;background:none}
.dw-seg button.on{background:#fff;color:var(--dw-brand);box-shadow:0 1px 2px rgba(20,40,80,.08)}

/* ── body / footer ── */
.dw-body{flex:1;min-height:0;padding:14px;display:flex;flex-direction:column;position:relative}
.dw-foot{border-top:1px solid var(--dw-line2);padding:9px 14px;display:flex;align-items:center;gap:10px;min-height:46px}

/* ════════════ POPOVER (info + filter + menu) ════════════ */
.dw-pop{position:absolute;z-index:60;top:calc(100% + 7px);background:#fff;border:1px solid var(--dw-line);
  border-radius:12px;box-shadow:var(--dw-sh-h);padding:14px;display:none;animation:dwpop .14s ease}
@keyframes dwpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dw-pop.open{display:block}
.dw-pop.info{left:0;width:300px}
.dw-pop.filter{right:0;width:282px}
.dw-pop h6{font-size:12.5px;font-weight:750;color:var(--dw-ink);margin:0 0 7px;display:flex;align-items:center;gap:7px}
.dw-pop h6 i{color:var(--dw-brand)}
.dw-pop .ptxt{font-size:12px;color:var(--dw-ink2);line-height:1.55;margin:0 0 10px}
.dw-pop .ptxt b{color:var(--dw-ink);font-weight:700}
/* blok rumus */
.dw-formula{background:var(--dw-brand-l2);border:1px solid #dcebf7;border-radius:9px;padding:9px 11px;margin:2px 0 4px}
.dw-formula .fl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dw-brand);margin-bottom:4px}
.dw-formula code,.dw-formula .ftxt{font-family:inherit;font-size:11.5px;color:var(--dw-ink2);line-height:1.55;display:block;white-space:pre-wrap}
/* field filter */
.dw-fg{margin-bottom:11px}
.dw-fg>label{display:block;font-size:11px;font-weight:600;color:var(--dw-ink3);margin-bottom:6px}
.dw-fsel,.dw-fin{width:100%;height:36px;border:1px solid var(--dw-line);border-radius:8px;padding:0 10px;font-size:12.5px;
  font-family:inherit;color:var(--dw-ink);background:#fff;outline:none}
.dw-fsel{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238492a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:32px}
.dw-fsel:focus,.dw-fin:focus{border-color:var(--dw-brand);box-shadow:0 0 0 3px var(--dw-brand-l)}
.dw-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* pill periode */
.dw-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.dw-pill{height:28px;padding:0 11px;border:1px solid var(--dw-line);background:#fff;border-radius:7px;font-size:11.5px;
  font-weight:600;color:var(--dw-muted)}
.dw-pill.on{background:var(--dw-brand-l);border-color:#bcd6ea;color:var(--dw-brand)}
.dw-pacts{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}
.dw-pb{height:32px;padding:0 14px;border-radius:8px;font-size:12px;font-weight:650;border:none}
.dw-pb.ghost{border:1px solid var(--dw-line);background:#fff;color:var(--dw-ink2)}
.dw-pb.ghost:hover{border-color:#cfdae6}
.dw-pb.pri{background:var(--dw-brand);color:#fff}
.dw-pb.pri:hover{background:var(--dw-brand-d)}
/* menu titik-3 */
.dw-menu{right:0;width:206px;padding:6px}
.dw-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 9px;border-radius:7px;
  font-size:12.5px;font-weight:500;color:var(--dw-ink2);border:none;background:none}
.dw-menu button:hover{background:var(--dw-brand-l2);color:var(--dw-brand)}
.dw-menu button i{font-size:14px;width:16px;text-align:center;color:var(--dw-muted)}
.dw-menu button:hover i{color:var(--dw-brand)}
.dw-menu .sepr{height:1px;background:var(--dw-line2);margin:5px 2px}
.dw-menu .sub-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dw-faint);
  padding:5px 9px 3px}
.dw-menu .danger{color:var(--dw-bad)}
.dw-menu .danger i{color:var(--dw-bad)}
.dw-menu .danger:hover{background:var(--dw-bad-l);color:var(--dw-bad)}

/* ════════════ TABEL (header bg primary-light, ink text, tanpa garis grid) ════════════ */
.dw-tblwrap{flex:1;overflow:auto;border-radius:10px}
.dw-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.dw-tbl th,.dw-tbl td{border:0 !important}
/* header tabel = bar rata ala Bootstrap (bg primary-light, teks ink), TANPA radius per-sel.
   Sudut membulat ditangani .dw-tblwrap (overflow:hidden + border-radius). Hindari "pill" terpisah. */
.dw-tbl thead th{position:sticky;top:0;background:var(--dw-brand-l);text-align:left;
  padding:10px 13px;font-size:11px;font-weight:700;color:var(--dw-ink2);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-radius:0}
.dw-tbl thead th.num{text-align:right}
.dw-tbl tbody td{padding:9px 13px;border-bottom:1px solid var(--dw-line2);color:var(--dw-ink2);white-space:nowrap}
.dw-tbl tbody tr:last-child td{border-bottom:none}
.dw-tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--dw-ink)}
.dw-tbl tbody tr.lnkrow:hover{background:var(--dw-brand-l2);cursor:pointer}
.dw-tbl .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.dw-tbl tfoot td{padding:10px 13px;border-top:1px solid var(--dw-line);font-weight:800;color:var(--dw-ink);font-size:12.5px;background:#fafcfe}
.dw-tbl tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ════════════ CHART (wrapper Highcharts) ════════════ */
.dw-chart{flex:1;display:flex;align-items:center;justify-content:center;padding:6px;gap:18px;min-height:200px}
.dw-hc{flex:1;min-width:0;height:100%;min-height:240px}

/* ════════════ LIST (leaderboard + deal list) ════════════ */
.dw-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin:-4px 0}
.dw-li{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--dw-line2);transition:.12s}
.dw-li:hover{background:var(--dw-brand-l2);border-radius:8px;cursor:pointer}
.dw-rank{width:22px;text-align:center;font-size:12px;font-weight:800;color:var(--dw-muted);flex-shrink:0}
.dw-rank.top{color:var(--dw-brand)}
.dw-av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:.02em}
.dw-li-main{min-width:0;flex:1}
.dw-li-nm{font-size:12.5px;font-weight:700;color:var(--dw-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-li-meta{font-size:11px;color:var(--dw-muted);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dw-li-meta .mi{display:inline-flex;align-items:center;gap:4px}
.dw-li-meta .mi i{font-size:11px;opacity:.85}
.dw-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--dw-brand-l);color:var(--dw-brand)}
.dw-chip.warn{background:var(--dw-warn-l);color:var(--dw-warn)}
.dw-chip.hot{background:var(--dw-hot-l);color:var(--dw-hot)}
.dw-chip.bad{background:var(--dw-bad-l);color:var(--dw-bad)}
.dw-li-amt{text-align:right;flex-shrink:0}
.dw-li-amt .a{font-size:12.5px;font-weight:800;color:var(--dw-ink);font-variant-numeric:tabular-nums}
.dw-li-amt .c{font-size:10.5px;color:var(--dw-muted)}
.dw-li-act{font-size:11.5px;font-weight:650;color:var(--dw-brand);flex-shrink:0;display:inline-flex;align-items:center;gap:4px;opacity:0;transition:.12s}
.dw-li:hover .dw-li-act{opacity:1}

/* ════════════ PROGRESS / KPI ════════════ */
.dw-prog{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center;padding:4px 2px}
.dw-prow .pr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.dw-prow .pr-l{font-size:12px;font-weight:600;color:var(--dw-ink2)}
.dw-prow .pr-v{font-size:13px;font-weight:800;color:var(--dw-ink);font-variant-numeric:tabular-nums}
.dw-prow .pr-v small{font-size:11px;font-weight:600;color:var(--dw-muted)}
.dw-track{height:9px;border-radius:6px;background:var(--dw-line);overflow:hidden}
.dw-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--dw-brand),#3da0dd)}
.dw-fill.full{background:linear-gradient(90deg,#2e9e5b,#34c08f)}
.dw-prow .pr-cap{font-size:10.5px;color:var(--dw-muted);margin-top:5px}
/* KPI besar (my_won_deals / my_target_revenue) */
.dw-kpi{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:8px 4px}
.dw-kpi .kp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dw-kpi .kp-l{font-size:12.5px;font-weight:600;color:var(--dw-ink2);max-width:160px}
.dw-kpi .kp-big{font-size:32px;font-weight:800;color:var(--dw-brand);line-height:.98;font-variant-numeric:tabular-nums;text-align:right}
.dw-kpi .kp-big a{color:inherit;text-decoration:none}
.dw-kpi .kp-big small{display:block;font-size:11px;font-weight:600;color:var(--dw-muted);margin-top:4px}
.dw-kpi .kp-trk{height:22px;border-radius:8px;background:var(--dw-line);overflow:hidden;position:relative}
.dw-kpi .kp-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--dw-brand),#3da0dd);display:flex;align-items:center;justify-content:flex-end;padding-right:9px;color:#fff;font-size:11px;font-weight:800}
.dw-kpi .kp-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--dw-ink3)}
.dw-kpi .kp-foot b{color:var(--dw-ink);font-weight:800}

/* ════════════ PAGINATION ════════════ */
.dw-pg{display:flex;align-items:center;gap:3px;margin-left:auto}
.dw-pg button{min-width:28px;height:28px;padding:0 7px;border-radius:7px;font-size:12px;font-weight:600;color:var(--dw-ink3);
  border:1px solid var(--dw-line);background:#fff;display:inline-flex;align-items:center;justify-content:center}
.dw-pg button:hover:not(:disabled){border-color:#cfdae6;color:var(--dw-brand)}
.dw-pg button.on{background:var(--dw-brand);border-color:var(--dw-brand);color:#fff}
.dw-pg button:disabled{opacity:.4;cursor:default}
.dw-pg-info{font-size:11.5px;color:var(--dw-muted)}

/* ════════════ STATES: skeleton / firstuse / empty / nosearch / error ════════════
   Selector generik [data-state] dipasang pada root BODY widget (yg tahu dataWidget). */
.dw-state{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:18px;min-height:280px}
[data-state="skeleton"] .dw-state.skeleton{display:flex}
[data-state="firstuse"] .dw-state.firstuse{display:flex}
[data-state="empty"]    .dw-state.empty{display:flex}
[data-state="nosearch"] .dw-state.nosearch{display:flex}
[data-state="error"]    .dw-state.error{display:flex}
[data-state="noaccess"] .dw-state.noaccess{display:flex}
/* state non-ready sembunyikan data + footer */
.dw-data{flex:1;display:flex;flex-direction:column;min-height:0}
[data-state="skeleton"] .dw-data,
[data-state="firstuse"] .dw-data,
[data-state="empty"] .dw-data,
[data-state="nosearch"] .dw-data,
[data-state="error"] .dw-data,
[data-state="skeleton"] .dw-foot,
[data-state="firstuse"] .dw-foot,
[data-state="empty"] .dw-foot,
[data-state="nosearch"] .dw-foot,
[data-state="error"] .dw-foot{display:none}
/* root body widget mengisi tinggi kartu */
.dw-root{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;padding:14px 16px 16px}
/* banner mode data contoh */
.dw-samplebar{display:none;align-items:center;gap:8px;margin:-2px -2px 12px;padding:7px 11px;border-radius:9px;
  background:linear-gradient(90deg,var(--dw-warn-l),#fffaf1);border:1px solid #f1e2c4;font-size:11.5px;color:#9c6a13}
.is-sample .dw-samplebar{display:flex}
.dw-samplebar>i{font-size:13px;color:var(--dw-warn);flex-shrink:0}
.dw-samplebar b{font-weight:750;color:#7e560f}
.dw-samplebar .sp{flex:1}
.dw-samplebar .exit{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px;border-radius:7px;
  font-size:11px;font-weight:700;color:var(--dw-warn);background:#fff;border:1px solid #ecd5a4;transition:.12s;flex-shrink:0}
.dw-samplebar .exit:hover{background:var(--dw-warn);border-color:var(--dw-warn);color:#fff}
/* ilustrasi + teks state */
.dw-ill{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;font-size:34px;margin-bottom:13px}
.dw-ill.muted{background:var(--dw-line2);color:var(--dw-faint)}
.dw-ill.brand{background:var(--dw-brand-l);color:var(--dw-brand)}
.dw-ill.bad{background:var(--dw-bad-l);color:var(--dw-bad)}
.dw-state .st-t{font-size:15.5px;font-weight:750;color:var(--dw-ink)}
.dw-state .st-d{font-size:12.5px;color:var(--dw-muted);line-height:1.55;max-width:340px;margin-top:3px}
.dw-state .st-acts{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap;justify-content:center}
.dw-sbtn{height:32px;padding:0 13px;border-radius:8px;font-size:12px;font-weight:650;display:inline-flex;align-items:center;gap:6px;border:none}
.dw-sbtn.pri{background:var(--dw-brand);color:#fff} .dw-sbtn.pri:hover{background:var(--dw-brand-d)}
.dw-sbtn.ghost{border:1px solid var(--dw-line);background:#fff;color:var(--dw-ink2)} .dw-sbtn.ghost:hover{border-color:#cfdae6}
/* skeleton shimmer */
.dw-sk{width:100%;height:13px;border-radius:7px;background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);
  background-size:400% 100%;animation:dwshim 1.3s ease infinite}
@keyframes dwshim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.dw-sk-rows{width:100%;display:flex;flex-direction:column;gap:13px;padding:6px 2px}
.dw-sk-row{display:flex;align-items:center;gap:12px}
.dw-sk-row .dw-sk.c{width:34px;height:34px;border-radius:9px;flex-shrink:0}

/* search bar (widget list) */
.dw-search{display:flex;align-items:center;gap:7px;border:1px solid var(--dw-line);border-radius:8px;padding:0 10px;height:30px;
  background:#f7f9fc;width:172px;flex-shrink:0;transition:.13s}
.dw-search:focus-within{border-color:var(--dw-brand);background:#fff;box-shadow:0 0 0 3px var(--dw-brand-l)}
.dw-search i{color:var(--dw-faint);font-size:12px;flex-shrink:0}
.dw-search input{border:none;outline:none;background:none;font-size:12px;color:var(--dw-ink2);width:100%;min-width:0}
/* search di dalam header card (list widget) */
.dw-head-search{width:150px;height:28px}

/* footer caption util */
.dw-fcap{font-size:11px;color:var(--dw-muted);display:inline-flex;align-items:center;gap:6px}
.dw-fcap i{font-size:12px}
.dw-fade{animation:dwfade .25s ease}
@keyframes dwfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}