/* DJYTL withdrawal tracker (gold / silver).  [2026-10-17] Black and gold, djytl-ui.css tokens. */
.wdt{margin-top:14px;padding:18px 18px 14px;border:1px solid var(--line-gold);border-radius:var(--r-lg);background:radial-gradient(120% 140% at 0% 0%,rgba(214,178,74,.09),transparent 60%),var(--bg-2)}
.wdt-head{display:flex;flex-direction:column;gap:6px}
.wdt-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.wdt-amount{margin:0;font-weight:500;font-size:20px;color:var(--tx);font-variant-numeric:tabular-nums}
.wdt-amount b{font-weight:600;background:linear-gradient(135deg,#f6e3a1 0%,var(--gold) 40%,#fff1c2 55%,var(--gold-lo) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wdt-to{color:var(--tx-3);font-size:13px;font-weight:400}
.wdt-track{--wdt-step:0;position:relative;list-style:none;margin:20px 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.wdt-rail{position:absolute;left:12.5%;right:12.5%;top:13px;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.wdt-rail-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--wdt-step) / 3 * 100%);background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));transition:width .6s ease}
.wdt-rail-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,240,190,.7),transparent);transform:translateX(-100%);animation:wdt-sheen 2.4s ease-in-out infinite}
.wdt-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;color:var(--tx-3)}
.wdt-node{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--bg-3);border:1px solid var(--line-2);color:var(--bg)}
.wdt-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.wdt-step.done .wdt-node{background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));border-color:var(--gold)}
.wdt-step.done{color:var(--tx-2)}
.wdt-step.now{color:var(--gold-hi)}
.wdt-step.now .wdt-node{border-color:var(--gold);box-shadow:0 0 0 0 rgba(214,178,74,.5);animation:wdt-pulse 1.8s ease-out infinite}
.wdt-step.now .wdt-node::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--gold-hi);animation:wdt-spin 1.1s linear infinite}
.wdt-step.now .wdt-dot{background:var(--gold)}
.wdt-step.hold .wdt-node{border-color:var(--line-gold)}
.wdt-pause{width:8px;height:10px;border-left:3px solid var(--tx-3);border-right:3px solid var(--tx-3)}
.wdt-note{margin:10px 0 0;font-size:13px;color:var(--tx-2)}
.wdt-link{color:var(--gold-hi);text-decoration:none;margin-left:6px}
.wdt-link:hover{text-decoration:underline}
.wdt.is-done .wdt-rail-fill::after{animation:wdt-sweep 1.2s ease-out 1}
.wdt.is-off .wdt-rail-fill{width:0}
@keyframes wdt-spin{to{transform:rotate(360deg)}}
@keyframes wdt-pulse{0%{box-shadow:0 0 0 0 rgba(214,178,74,.45)}70%{box-shadow:0 0 0 10px rgba(214,178,74,0)}100%{box-shadow:0 0 0 0 rgba(214,178,74,0)}}
@keyframes wdt-sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes wdt-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (max-width:560px){
  .wdt-track{grid-template-columns:1fr;gap:14px}
  .wdt-rail{left:13px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .wdt-rail-fill{width:100%;height:calc(var(--wdt-step) / 3 * 100%);inset:0 0 auto 0}
  .wdt-step{flex-direction:row;text-align:left;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .wdt-rail-fill,.wdt-rail-fill::after,.wdt-step.now .wdt-node,.wdt-step.now .wdt-node::before{animation:none;transition:none}
}