:root{
    --dbar-track-h:18px;
    --dbar-radius:9px;
    --dbar-track-bg:#e8ecf1;
    --dbar-confirmed:#22c55e;
    --dbar-confirmed-dark:#16a34a;
    --dbar-pending:#3b82f6;
    --dbar-pending-deep:#2563eb;
    --dbar-btn:#b54a4a;
    --dbar-btn-hover:#963d3d;
    --dbar-font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

#dbar-container{font-family:var(--dbar-font);max-width:680px;margin:2.5rem auto;padding:0 1rem;color:#1e293b;}

/* ── Top stats: Goal | Confirmed | Remaining ── */
.dbar-top-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1.2rem;text-align:center;}
.dbar-top-stats > div{display:flex;flex-direction:column;gap:.15rem;position:relative;}
.dbar-top-stats > div:nth-child(2){border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0;}
.dbar-stat-label{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;}
.dbar-stat-val{font-size:1.15rem;font-weight:700;color:#0f172a;letter-spacing:-.02em;}
.dbar-stat-sub{font-size:.72rem;font-weight:500;color:#94a3b8;display:block;margin-top:.1rem;}
.dbar-stat-label.dbar-green,.dbar-stat-val.dbar-green{color:var(--dbar-confirmed-dark);}

/* ── Bar ── */
.dbar-wrapper{position:relative;width:100%;height:var(--dbar-track-h);margin-bottom:.8rem;}

.dbar-track{position:relative;width:100%;height:100%;background:var(--dbar-track-bg);border-radius:var(--dbar-radius);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.08);}

.dbar-fill{position:absolute;top:0;height:100%;transition:width .8s cubic-bezier(.4,0,.2,1),left .8s cubic-bezier(.4,0,.2,1);will-change:width,left;}

/* Confirmed: diagonal ribbed texture */
.dbar-confirmed{
    left:0;
    border-radius:var(--dbar-radius) 0 0 var(--dbar-radius);
    background:
        repeating-linear-gradient(135deg,transparent 0,transparent 3px,rgba(255,255,255,.08) 3px,rgba(255,255,255,.08) 6px),
        linear-gradient(180deg,var(--dbar-confirmed),var(--dbar-confirmed-dark));
    z-index:1;
}

/* Pending: blue liquid extending from green edge */
.dbar-pending{
    border-radius:0 var(--dbar-radius) var(--dbar-radius) 0;
    background:linear-gradient(180deg,#60a5fa 0%,var(--dbar-pending) 40%,var(--dbar-pending-deep) 100%);
    z-index:2;
    overflow:hidden;
}

/* Wave crest at left edge of pending (where it pushes against green) */
.dbar-pending .dbar-crest{
    position:absolute;left:-10px;top:-2px;width:20px;height:calc(100% + 4px);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Cpath fill='%233b82f6' d='M14,2 C8,12 6,24 14,36 C18,42 14,46 14,46 L24,46 L24,2 Z'/%3E%3C/svg%3E") no-repeat center/contain;
    pointer-events:none;z-index:3;opacity:.95;
    animation:crestBreath 2.6s ease-in-out infinite alternate;
}

@keyframes crestBreath{0%{transform:scaleX(1) scaleY(1);}100%{transform:scaleX(1.08) scaleY(1.03);}}

/* Gentle rolling highlight inside pending */
/* Slow rolling surface wave inside pending */
.dbar-pending .dbar-wave-surface{
    position:absolute;inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 40' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='2' d='M0,20 Q50,5 100,20 T200,20 T300,20 T400,20 T500,20 T600,20 T700,20 T800,20'/%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='2' d='M0,25 Q50,10 100,25 T200,25 T300,25 T400,25 T500,25 T600,25 T700,25 T800,25'/%3E%3C/svg%3E") repeat-x;
    background-size:200% 100%;
    animation:waveSurface 6s linear infinite;
    pointer-events:none;
}
.dbar-pending .dbar-wave-surface::after{
    content:'';position:absolute;inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 40' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.5' d='M0,15 Q50,30 100,15 T200,15 T300,15 T400,15 T500,15 T600,15 T700,15 T800,15'/%3E%3C/svg%3E") repeat-x;
    background-size:200% 100%;
    animation:waveSurface 8s linear infinite reverse;
    pointer-events:none;
}
@keyframes waveSurface{0%{background-position:0 0;}100%{background-position:-200% 0;}}

/* Seam marker: blue circle knob where green meets blue */
.dbar-seam-marker{
    position:absolute;top:50%;transform:translate(-50%,-50%);
    width:14px;height:14px;border-radius:50%;
    background:var(--dbar-pending);
    border:2.5px solid #fff;
    box-shadow:0 2px 6px rgba(37,99,235,.35),inset 0 1px 2px rgba(255,255,255,.3);
    z-index:10;pointer-events:none;
    transition:left .8s cubic-bezier(.4,0,.2,1);
}
.dbar-seam-marker::before{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:4px;height:4px;border-radius:50%;background:#fff;
}

/* ── Below-bar stats ── */
.dbar-btm-stats{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.4rem;}
.dbar-funded{display:flex;flex-direction:column;gap:.1rem;}
.dbar-funded-pct{font-size:1.35rem;font-weight:800;color:var(--dbar-confirmed);line-height:1;}
.dbar-funded-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;}
.dbar-pending-stat{display:flex;flex-direction:column;gap:.1rem;text-align:right;}
.dbar-pending-amt{font-size:1.1rem;font-weight:700;color:var(--dbar-pending);line-height:1;}
.dbar-pending-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;}

/* ── Labels & Hearts ── */
.dbar-wrapper{position:relative;overflow:visible;}
.dbar-labels,.dbar-hearts{position:absolute;left:0;width:100%;pointer-events:none;z-index:5;overflow:visible;}
.dbar-labels{top:0;height:100%;}
.dbar-hearts{bottom:0;height:calc(100% + 70px);}

.dbar-float-label{position:absolute;bottom:calc(var(--dbar-track-h) + 10px);white-space:nowrap;font-size:.75rem;font-weight:700;color:#1e40af;background:#fff;padding:4px 12px;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.1);animation:dbarLabelPop .5s ease-out forwards;transform-origin:center bottom;}
@keyframes dbarLabelPop{0%{opacity:0;transform:scale(.6) translateY(10px);}70%{opacity:1;transform:scale(1.05) translateY(-2px);}100%{opacity:1;transform:scale(1) translateY(0);}}

.dbar-heart{position:absolute;font-size:1rem;animation:dbarHeartFloat 1.8s ease-out forwards;opacity:.85;}
@keyframes dbarHeartFloat{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-50px) scale(1.35);}}

/* ── Donate Button ── */
.dbar-donate-btn{
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    width:100%;padding:.85rem;font-size:1rem;font-weight:700;color:#fff;
    background:var(--dbar-btn);border:none;border-radius:14px;
    cursor:pointer;transition:background .2s,transform .1s;letter-spacing:-.01em;
}
.dbar-donate-btn:hover{background:var(--dbar-btn-hover);}
.dbar-donate-btn:active{transform:scale(.97);}
.dbar-donate-btn .dbar-btn-heart-circle{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
    flex-shrink:0;
}
.dbar-donate-btn .dbar-btn-heart-circle svg{width:14px;height:14px;fill:#fff;}

/* ── Modals ── */
.dbar-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;}
.dbar-modal.active{display:flex;}
.dbar-modal-overlay{position:absolute;inset:0;background:transparent;}
.dbar-modal-content{position:relative;background:#fff;border-radius:16px;padding:2rem;width:90%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:dbarModalIn .35s ease-out;}
@keyframes dbarModalIn{from{opacity:0;transform:translateY(80px) scale(.92);}to{opacity:1;transform:translateY(0) scale(1);}}
.dbar-modal-close{position:absolute;top:.8rem;right:1rem;background:none;border:none;font-size:1.5rem;color:#9ca3af;cursor:pointer;}
.dbar-modal h3{margin:0 0 1rem;font-size:1.2rem;color:#111827;}
.dbar-modal label{display:block;margin:.6rem 0 .25rem;font-size:.82rem;color:#4b5563;}
.dbar-modal input{width:100%;padding:.65rem .85rem;border:1px solid #d1d5db;border-radius:10px;font-size:.95rem;outline:none;transition:border-color .2s;box-sizing:border-box;}
.dbar-modal input:focus{border-color:var(--dbar-btn);}
.dbar-submit-btn,.dbar-done-btn,.dbar-payment-link{display:block;width:100%;margin-top:1rem;padding:.75rem;text-align:center;font-size:.95rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;text-decoration:none;box-sizing:border-box;}
.dbar-submit-btn{color:#fff;background:var(--dbar-btn);}
.dbar-submit-btn:hover{background:var(--dbar-btn-hover);}
.dbar-submit-btn:disabled{opacity:.6;cursor:not-allowed;}
/* Payment link: force white text even against aggressive themes */
#dbar-payment-link.dbar-payment-link,
.dbar-modal-content a.dbar-payment-link{
    color:#fff !important;
    background:#b54a4a;
    text-decoration:none !important;
}
.dbar-payment-link:hover{background:#963d3d;}
.dbar-done-btn{color:#374151;background:#f3f4f6;margin-top:.5rem;}
.dbar-done-btn:hover{background:#e5e7eb;}

/* ── Amount row: currency select + number input ── */
.dbar-amount-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;}
.dbar-currency-select{padding:.65rem .5rem;border:1px solid #d1d5db;border-radius:10px;font-size:.95rem;background:#fff;cursor:pointer;flex-shrink:0;}
.dbar-amount-row input{flex:1;margin-top:0 !important;}

/* ── Mobile responsive tweaks ── */
@media (max-width:480px){
    #dbar-container{padding:0 .6rem;margin:1.5rem auto;}
    .dbar-top-stats{gap:.5rem;}
    .dbar-stat-val{font-size:.92rem;}
    .dbar-stat-sub{font-size:.6rem;}
    .dbar-stat-label{font-size:.58rem;}
    .dbar-funded-pct{font-size:1.1rem;}
    .dbar-pending-amt{font-size:.9rem;}
    .dbar-donate-btn{padding:.7rem;font-size:.9rem;}
    .dbar-modal-content{padding:1.4rem;width:92%;}
}