@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;font-family:Outfit,system-ui,sans-serif;background:#101019;color:#eeedf5}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:11px 17px;background:#ff5caa;color:#211425;font-weight:700}button.secondary{background:#302b40;color:#fff}a{color:#ff91c1}header{border-bottom:1px solid #302a3c;padding:24px 5%;display:flex;align-items:center;justify-content:space-between}header strong{font-size:24px}header span{color:#b3a7c4}.layout{display:grid;grid-template-columns:330px 1fr;gap:28px;max-width:1500px;margin:auto;padding:32px}h1{font-size:36px;margin:0 0 8px}h2{font-size:20px;margin:0 0 18px}p{color:#b5aec3;line-height:1.6}section,.panel{border:1px solid #363043;background:#1a1724;border-radius:18px;padding:24px;margin-bottom:20px}label{display:block;font-size:13px;color:#c4bbd1;margin:15px 0 6px}input,select{width:100%;background:#110f19;color:white;border:1px solid #43384f;border-radius:8px;padding:10px}input[type=color]{height:42px;padding:4px}input[type=checkbox]{width:auto}.row{display:flex;gap:12px}.row>*{flex:1}.tabs{display:flex;gap:8px;margin:24px 0}.tabs button{background:#24202f;color:#b8aec8}.tabs button.active{background:#ff5caa;color:#211425}.preview{height:360px;border:1px solid #3d334d;border-radius:12px;background:repeating-conic-gradient(#211d2a 0% 25%,#292432 0% 50%) 50%/24px 24px;overflow:hidden}.preview iframe{width:100%;height:100%;border:0}.link{font-size:12px;word-break:break-all;background:#100d17;padding:12px;border-radius:8px;display:block;margin:14px 0}.badge{padding:7px 12px;border:1px solid #b26091;color:#ff95c6;border-radius:20px;font-size:12px}#status{font-size:13px;color:#f4c8dc}#notice{min-height:24px;color:#ff9ac8}small{color:#a79bb9}.help{font-size:13px}.widget{background:transparent!important;overflow:hidden;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;color:var(--text);font-size:var(--font-size)}.widget .box{background:var(--bg);border:2px solid var(--accent);border-radius:18px;padding:22px;max-width:95vw;width:100%;box-shadow:0 8px 25px #0003}.widget .amount{color:var(--accent);font-size:2em;font-weight:800}.widget .muted{opacity:.8;font-size:.7em}.widget .alert{text-align:center;max-width:680px;animation:enter .55s ease}.widget .heart{font-size:2em}.widget .goal{max-width:900px}.widget .track{height:20px;background:#ffffff20;border-radius:20px;margin-top:14px;overflow:hidden}.widget .fill{height:100%;background:var(--accent);transition:width 1s}.widget .ticker{max-width:1200px;display:flex;gap:22px;align-items:center;overflow:hidden}.ticker .total{flex-shrink:0;border-right:1px solid #ffffff30;padding-right:22px}.ticker .scroll{white-space:nowrap;animation:scroll 25s linear infinite}.widget .qr{width:auto;max-width:330px;text-align:center}.qr img{width:200px;max-width:65vw;border-radius:8px;display:block;margin:0 auto 12px}.test-mark{font-size:12px;letter-spacing:2px;color:var(--accent);margin-bottom:8px}@keyframes scroll{from{transform:translateX(30%)}to{transform:translateX(-100%)}}@keyframes enter{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}@media(max-width:900px){.layout{grid-template-columns:1fr;padding:18px}.tabs{flex-wrap:wrap}header span{display:none}}
.widget #root{width:100%;display:flex;justify-content:center}.widget .ticker{padding:12px 20px}.widget:has(.ticker){padding:10px}.widget:has(.goal){padding:12px}

.preview{position:relative}.preview iframe{position:absolute;left:50%;top:50%;transform-origin:center}
.widget{padding:0!important}.widget .box{width:var(--width)!important;height:var(--height);max-width:none!important;border-radius:var(--radius);padding:var(--padding)!important;border-width:var(--borderWidth);overflow:hidden;display:flex;flex-direction:column;justify-content:center;flex-shrink:0}
.widget .ticker{flex-direction:row;justify-content:flex-start}.widget .track{height:var(--barHeight);flex-shrink:0}.widget .qr img{width:var(--qrSize);max-width:none;flex-shrink:0}.widget .goal .row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.widget .goal .row span{white-space:nowrap}.widget .alert{overflow-wrap:anywhere}
/* OBS sources start at the canvas origin; dashboard centres the iframe itself. */
.widget{align-items:flex-start;justify-content:flex-start}
.widget #root{width:100%;justify-content:flex-start;align-items:flex-start}

.widget .ticker{line-height:1.15}.widget .ticker .total{display:flex;align-items:center;gap:12px;padding-right:16px;white-space:nowrap}.widget .ticker .total .muted{font-size:.4em;max-width:65px;white-space:normal}.widget .ticker .total strong{font-size:1em}.widget .ticker .scroll{font-weight:600}
/* Keep the total label readable in a shallow OBS ticker. */
.widget .ticker .total .muted{font-size:.65em;font-weight:700;color:#ffffff;opacity:1;max-width:none;white-space:nowrap;letter-spacing:.025em}

.widget .goal{line-height:1.05}.widget .goal .row{gap:20px}.widget .goal .row strong{color:var(--text);font-weight:700}.widget .goal .row span{font-weight:700}.widget .goal .track{margin-top:5px}
/* Fit goal content to the actual browser canvas without cutting off totals. */
.widget .goal{width:min(var(--width),100vw)!important;max-width:100vw!important;font-size:min(var(--font-size),3.1vw);container-type:inline-size}
.widget .goal .row{grid-template-columns:minmax(0,1fr) max-content;gap:12px}
.widget .goal .row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.widget .goal .row span{flex:none;white-space:nowrap}

.widget .ticker{width:min(var(--width),100vw)!important;max-width:100vw!important;gap:14px}.widget .ticker .total{gap:8px;padding-right:12px}.widget .ticker .total .muted{font-size:.55em}.widget .goal{font-size:min(var(--font-size),3.5vw)}
.widget .alert{height:auto;min-height:var(--height);overflow:visible;padding:var(--padding)!important}.widget .alert .amount{line-height:1.15}.widget .alert strong{display:block}.widget .alert{position:relative;z-index:2}.confetti-piece{position:fixed;top:-24px;pointer-events:none;z-index:3;width:9px;height:15px;border-radius:2px;animation:confetti-fall var(--fall-duration) linear forwards}@keyframes confetti-fall{to{transform:translate(var(--drift),110vh) rotate(720deg);opacity:.4}}
.widget .qr{height:auto;min-height:var(--height);overflow:visible}.widget .qr strong,.widget .qr .muted{overflow-wrap:anywhere}.widget .qr img{max-width:100%;height:auto}
/* Alerts use the full OBS canvas; card size remains independently customisable. */
.widget[data-kind="alerts"]{width:100vw;height:100vh;align-items:center;justify-content:center}
.widget[data-kind="alerts"] #root{width:100%;height:100%;align-items:center;justify-content:center}
.widget[data-kind="alerts"] .alert{width:min(var(--width),calc(100vw - 48px))!important;max-width:calc(100vw - 48px)!important;min-height:var(--height);height:auto;flex-shrink:1}