:root{--bg:#ffffff;--text:#000000;--border:#4468a9;--accent:#ff5e5b;--accent-hover:#e04e4b;--secondary:#f3f3f3;--success:#107225;--goal-green:#3ed676;--border-width:2px;--radius:0px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',sans-serif;background-color:var(--bg);color:var(--border);min-height:100vh;display:flex;flex-direction:column;padding-bottom:80px}
.global-loader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;gap:20px;transition:opacity .5s ease,visibility .5s ease}
.global-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.spinner-ring{width:72px;height:72px;border-radius:50%;padding:5px;animation:spin 1.6s linear infinite;display:flex;align-items:center;justify-content:center}
.spinner-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--bg)}
.loader-label{font-size:1rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
/* icon spin for dl buttons */
@keyframes spin-icon{to{transform:rotate(360deg)}}
.spinning{animation:spin-icon .8s linear infinite}

.container{width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;flex:1;padding:15px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;border-bottom:var(--border-width) solid var(--border);padding:12px 8px}
.logo-area{display:flex;align-items:center;gap:10px}
.logo-img{height:32px;width:auto}
.header-title h1{font-size:1.1rem;font-weight:800;letter-spacing:-.5px}
.tools-btn{background:var(--secondary);color:var(--text);border:var(--border-width) solid var(--border);padding:6px 12px;font-size:.7rem;font-weight:800;text-decoration:none;transition:all .1s}
.tools-btn:hover{background:var(--border);color:var(--bg)}
.card{border:var(--border-width) solid var(--border);margin-bottom:20px;background:white}
.card-header{background:var(--border);color:white;padding:10px 15px;font-weight:800;font-size:.85rem;display:flex;justify-content:space-between;align-items:center}
.format-tabs{display:flex; justify-self: center; }
.tab-btn{padding:12px;font-weight:700;font-size:.9rem;border:none;border-right:var(--border-width) solid var(--border);background:white;color:var(--text);cursor:pointer;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:6px}
.tab-btn:last-child{border-right:none}
/*.tab-btn.active{background:#d7e0fb;text-decoration:underline;text-underline-offset:4px}*/
.tab-btn svg{width:15px;height:15px;flex-shrink:0}
.upload-section{padding:15px;border-bottom:var(--border-width) solid var(--border)}
.drop-zone{border:2px dashed var(--border);padding:32px 20px;text-align:center;cursor:pointer;transition:background .15s;background:#fafbff}
.drop-zone:hover,.drop-zone.drag-over{background:#d7e0fb}
.drop-zone-icon{width:40px;height:40px;margin:0 auto 10px;color:var(--border)}
.drop-zone-icon svg{width:40px;height:40px}
.drop-zone h3{font-size:.95rem;font-weight:800;margin-bottom:4px;color:var(--border);text-transform:uppercase}
.drop-zone p{font-size:.72rem;color:#888;margin-bottom:16px;font-weight:600;letter-spacing:.5px}
.btn-choose{background:var(--border);color:white;border:none;padding:10px 22px;font-weight:800;font-size:.85rem;text-transform:uppercase;cursor:pointer;transition:opacity .2s;display:inline-flex;align-items:center;gap:6px}
.btn-choose:hover{opacity:.85}
.btn-choose svg{width:15px;height:15px}
.hints-row{display:flex;gap:24px;justify-content:center;margin-top:16px}
.hint{text-align:center}
.hint-val{font-size:.85rem;font-weight:800;color:var(--border)}
.hint-key{font-size:.65rem;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-top:1px}
.url-section{padding:15px;border-bottom:var(--border-width) solid var(--border);display:none}
.url-section.on{display:block}
.url-label{font-size:.65rem;font-weight:800;text-transform:uppercase;margin-bottom:6px;display:block}
.url-row{display:flex;flex-direction:column;gap:10px}
@media(min-width:480px){.url-row{flex-direction:row}}
.url-input{flex:1;padding:12px;border:var(--border-width) solid var(--border);font-size:.9rem;font-weight:600;background:white;font-family:inherit}
.url-input:focus{outline:2px solid var(--text);outline-offset:2px}
.url-input::placeholder{color:#aaa}
.btn-go-url{background:var(--border);color:white;border:none;padding:12px 18px;font-weight:800;font-size:.85rem;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.btn-go-url:hover{opacity:.9}
#status-box{display:none;flex-direction:row;align-items:center;gap:8px;margin:12px 14px 14px;padding:0 10px;background:#fff}
#status-box.visible{display:flex}
#status-box .infinity-loader{width:50px;height:50px;flex-shrink:0;object-fit:contain}
#status-label{font-size:1.1rem;font-weight:600;color:var(--border);text-align:left;line-height:1}
.err-bar{display:none;padding:10px 14px;background:#fff0f0;border:var(--border-width) solid var(--accent);font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:12px}
.err-bar.on{display:block}

/* ── Result section ── */
#result-section{display:none;border:var(--border-width) solid var(--border);margin-bottom:20px;background:white}
#result-section.visible{display:block}
.result-header{background:var(--border);color:white;padding:10px 15px;font-weight:800;font-size:.85rem;display:flex;justify-content:space-between;align-items:center;gap:10px}
.result-fname-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.result-done-badge{background:var(--success);color:white;font-size:.65rem;font-weight:800;padding:3px 8px;letter-spacing:1px;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;gap:4px}
.result-done-badge svg{width:11px;height:11px}

.track-row{display:flex;flex-direction:column;padding:12px 14px;border-bottom:var(--border-width) solid var(--border)}
.track-row:last-of-type{border-bottom:none}
.track-top{display:flex;align-items:center;gap:10px}
.play-btn{width:38px;height:38px;border-radius:0;border:var(--border-width) solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .1s;background:white;color:var(--border)}
.play-btn svg{width:22px;height:22px}
.play-btn:hover{background:var(--border);color:white}
.track-row.playing .play-btn{background:var(--border);color:white}
.track-info{flex:1;min-width:0}
.track-badge{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:2px 8px;margin-bottom:5px}
.badge-orig{background:#f0f0f0;color:#666;border:1px solid #ddd}
.badge-vocal{background:#d7e0fb;color:var(--border);border:1px solid var(--border)}
.badge-inst{background:#d4f4e2;color:#107225;border:1px solid #107225}
.waveform{height:24px;display:flex;align-items:center;gap:2px;overflow:hidden}
.wf-bar{width:2px;border-radius:1px;opacity:.4;background:var(--border)}
.track-inst .wf-bar{background:#107225}
.track-orig .wf-bar{background:#999}
.track-row.playing .wf-bar{opacity:1;animation:wfA .6s ease-in-out infinite}
.track-row.playing .wf-bar:nth-child(even){animation-delay:.15s}
.track-row.playing .wf-bar:nth-child(3n){animation-delay:.3s}
@keyframes wfA{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1.3)}}

/* Download icon button */
.dl-icon{width:38px;height:38px;background:var(--secondary);border:var(--border-width) solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--border);cursor:pointer;flex-shrink:0;transition:all .1s}
.dl-icon svg{width:16px;height:16px}
.dl-icon:hover{background:var(--border);color:white}
.dl-icon.dis{opacity:.25;pointer-events:none}
.dl-icon.loading{background:var(--border);color:white;pointer-events:none}
.dl-icon.loading svg{animation:spin-icon .7s linear infinite}

/* Seek slider — filled track fix */
.seek-wrap{display:none;margin-top:9px;padding:0 2px}
.seek-wrap.on{display:block}
.seek-row{display:flex;align-items:center;gap:8px}
.seek-time{font-family:'Inter',monospace;font-size:.65rem;font-weight:800;color:#888;white-space:nowrap;min-width:28px;text-transform:uppercase}
.seek-time.r{text-align:right}
/* The key fix: use inline style background via JS + !important override */
input[type=range].seeker{
  -webkit-appearance:none;appearance:none;flex:1;height:12px;
  border-radius:0;outline:none;cursor:pointer;
  border:1px solid var(--border);
  background:var(--secondary); /* fallback, overridden by JS */
}
input[type=range].seeker::-webkit-slider-runnable-track{height:10px;border-radius:0}
input[type=range].seeker::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:0;cursor:pointer;
  border:2px solid var(--border);margin-top:-4px;
  background:var(--border);transition:transform .1s
}
input[type=range].seeker:hover::-webkit-slider-thumb{transform:scale(1.3)}
input[type=range].seeker::-moz-range-thumb{width:14px;height:14px;border-radius:0;cursor:pointer;border:2px solid var(--border);background:var(--border)}
.track-inst input[type=range].seeker::-webkit-slider-thumb{background:#107225;border-color:#107225}
.track-inst input[type=range].seeker::-moz-range-thumb{background:#107225;border-color:#107225}
.track-orig input[type=range].seeker::-webkit-slider-thumb{background:#999;border-color:#999}
.track-orig input[type=range].seeker::-moz-range-thumb{background:#999;border-color:#999}

.result-actions{display:flex;gap:0;border-top:var(--border-width) solid var(--border)}
.btn-save-all{flex:1;padding:14px;background:var(--success);color:white;border:none;border-right:var(--border-width) solid var(--border);font-size:.9rem;font-weight:800;text-transform:uppercase;cursor:pointer;transition:opacity .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-save-all svg{width:16px;height:16px}
.btn-save-all:hover{opacity:.85}
.btn-new-task{padding:14px 18px;background:white;color:var(--text);border:none;font-size:.9rem;font-weight:800;text-transform:uppercase;cursor:pointer;transition:all .1s}
.btn-new-task:hover{background:var(--secondary)}

/* ── Download Dialog ── */
.dl-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;align-items:center;justify-content:center;padding:20px}
.dl-overlay.open{display:flex}
.dl-dialog{background:white;border:var(--border-width) solid var(--border);width:100%;max-width:380px;box-shadow:6px 6px 0 var(--border)}
.dl-dialog-hdr{background:var(--border);color:white;padding:12px 15px;font-weight:800;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}
.dl-dialog-hdr button{background:none;border:none;color:white;cursor:pointer;padding:0;display:flex;align-items:center}
.dl-dialog-hdr button svg{width:18px;height:18px}
.dl-dialog-body{padding:18px 15px;display:flex;flex-direction:column;gap:10px}
.dl-dialog-body p{font-size:.8rem;font-weight:600;color:#666;margin-bottom:2px}
.btn-dl-main{width:100%;padding:14px;background:var(--success);color:white;border:none;font-size:.95rem;font-weight:800;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s;box-shadow:3px 3px 0 rgba(0,0,0,.15)}
.btn-dl-main svg{width:17px;height:17px}
.btn-dl-main:hover{opacity:.9}
.btn-dl-main:disabled{opacity:.6;cursor:not-allowed}
.btn-dl-support{width:100%;padding:13px;background:var(--accent);color:white;border:none;font-size:.9rem;font-weight:800;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:all .1s;box-shadow:3px 3px 0 var(--border)}
.btn-dl-support svg{width:15px;height:15px}
.btn-dl-support:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border)}
.dl-dialog-note{font-size:.7rem;color:#aaa;font-weight:600;text-align:center;margin-top:2px}

/* Success view */
#success-view{display:none;text-align:center;padding:30px 20px;border:var(--border-width) solid var(--border);margin-bottom:20px;background:white}
#success-view.visible{display:block}
.success-title{font-size:1.4rem;font-weight:800;margin-bottom:15px;line-height:1.2}
.kofi-btn{display:block;background:var(--accent);color:white;padding:14px 20px;font-size:1rem;font-weight:800;text-decoration:none;border:var(--border-width) solid var(--secondary);margin-bottom:15px;width:100%;text-transform:uppercase;box-shadow:3px 3px 0px var(--border);transition:all .1s;display:flex;align-items:center;justify-content:center;gap:8px}
.kofi-btn svg{width:18px;height:18px}
.kofi-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0px var(--border);background:var(--accent-hover)}
.kofi-btn:active{transform:translate(2px,2px);box-shadow:none}
.convert-again-btn{display:inline-block;background:white;color:var(--text);padding:12px 25px;font-size:.9rem;font-weight:800;border:var(--border-width) solid var(--border);text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0px var(--border);transition:all .1s}
.convert-again-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0px var(--border)}
.fixed-footer{width:100%;background:white;padding:10px 15px;margin-top:-10px}
.goal-pill{background:#f2f4eb;border-radius:10px;height:50px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 4px;border:1.5px solid var(--border);box-shadow:2px 2px 0px rgba(0,0,0,.1)}
.goal-fill{position:absolute;left:4px;top:4px;bottom:4px;background:var(--goal-green);border-radius:10px;width:0%;transition:width 1s ease;z-index:1}
.goal-text-left{position:relative;z-index:2;font-size:.9rem;font-weight:800;padding-left:12px;display:flex;align-items:center;gap:6px}
.goal-text-right{position:relative;z-index:2;font-size:1rem;font-weight:800;padding-right:12px}
.goal-icon{width:28px;height:28px}
.float-support{position:fixed;bottom:52px;left:18px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:50px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;box-shadow:0 4px 20px rgba(0,185,254,.3);transition:transform .2s,background .2s;z-index:99;text-decoration:none}
.float-support:hover{transform:translateY(-3px);background:#009ad6}
.float-support svg{width:18px;height:18px}
footer{position:fixed;bottom:0;left:0;width:100%;text-align:center;font-size:1rem;font-weight:600;color:#09759c;padding:10px 0;border:1.5px solid var(--border);background:white;z-index:1100}
.cloudflare-note{margin-left:10px;font-weight:bold;font-size:.9rem;color:green;margin-top:-10px}
.cloudflare-img{width:80px;height:40px;vertical-align:middle;margin-bottom:25px}
.why-title{margin-left:10px;font-weight:bold;font-size:1.2rem;margin-top:-25px}
@media(min-width:1024px){.cloudflare-note{font-size:1.2rem}.cloudflare-img{width:105px;height:70px;margin-bottom:40px}.why-title{margin-top:-40px}}
.seo-content{margin:12px 10px 0;font-size:.85rem;line-height:1.7;color:#444}
.seo-content h2{font-size:1rem;font-weight:800;color:var(--border);margin:14px 0 6px}
.seo-content p{margin-bottom:8px}
.fade-out{opacity:0;transition:opacity .3s ease}
 @keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
 }
.spin svg{
  animation: spin 0.9s linear infinite;
 }
/* Container fade-in (new) */
        .container {
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .container.visible {
            opacity: 1;
        }

        /* Goal pill — upgraded to v3.4 column style (old was simple horizontal) */
        .goal-pill {
            flex-direction: column !important;
            align-items: stretch !important;
            height: auto !important;
            padding: 10px 14px 12px !important;
            gap: 0 !important;
            animation: accentPulse 3s ease-in-out infinite;
        }

        .goal-pill::before {
            content: "";
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: skewX(-25deg);
            animation: goalShine 4s infinite;
            z-index: 3;
            pointer-events: none;
        }

        @keyframes goalShine {
            0% {
                left: -120%;
            }

            100% {
                left: 150%;
            }
        }

        @keyframes accentPulse {
            0% {
                border-color: var(--accent);
                box-shadow: 2px 2px 0px rgba(0, 0, 0, .1), 0 0 0px var(--accent);
            }

            50% {
                border-color: var(--accent);
                box-shadow: 2px 2px 0px rgba(0, 0, 0, .1), 0 0 5px var(--accent);
            }

            100% {
                border-color: var(--accent);
                box-shadow: 2px 2px 0px rgba(0, 0, 0, .1), 0 0 0px var(--accent);
            }
        }

        .goal-pill-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
        }

        .goal-pill-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--border);
        }

        .goal-pill-label .goal-icon {
            width: 20px;
            height: 20px;
        }

        .goal-pill-pct {
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--border);
        }

        .goal-track {
            position: relative;
            z-index: 2;
            background: rgba(255, 255, 255, 0.55);
            border: 1.5px solid var(--border);
            border-radius: 4px;
            height: 14px;
            overflow: hidden;
            width: 100%;
        }

        .goal-fill-bar {
            height: 100%;
            background: var(--goal-green);
            border-radius: 2px;
            width: 0%;
            transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
        }

        .goal-subline {
            position: relative;
            z-index: 2;
            font-size: 0.70rem;
            font-weight: 600;
            color: #555;
            margin-top: 6px;
            text-align: center;
        }

        /* Server note block (new) */
        .server-note {
            margin: 4px 0 14px;
            padding: 11px 14px;
            background: #f0f5ff;
            border-left: 3px solid var(--border);
            font-size: 0.80rem;
            line-height: 1.6;
            color: #444;
        }

        .server-note strong {
            color: var(--border);
        }

        /* About / FAQ block (new — matches YT converter .youtube-block) */
        .youtube-block {
            margin-bottom: 20px;
            background: white;
        }

        .youtube-block-header {
            background: var(--border);
            color: white;
            padding: 10px 15px;
            font-weight: 800;
            font-size: 0.85rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .youtube-block-body {
            padding: 15px 15px 5px;
        }

        .youtube-block h2,
        .youtube-block-body h2 {
            font-size: 0.85rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--border);
            border-left: 3px solid var(--accent);
            padding-left: 8px;
            margin: 16px 0 8px;
        }

        .youtube-block h2:first-child,
        .youtube-block-body h2:first-child {
            margin-top: 0;
        }

        .youtube-block p,
        .youtube-block-body p {
            font-size: 0.85rem;
            font-weight: 400;
            color: #333;
            line-height: 1.65;
            margin-bottom: 10px;
        }

        .youtube-block p strong,
        .youtube-block-body p strong {
            color: var(--border);
            font-weight: 800;
        }

        /* FAQ accordion (new) */
        .youtube-faq {
            margin: 12px -15px 0;
        }

        .youtube-faq details {
            border-bottom: 1px solid #d7e0fb;
        }

        .youtube-faq details:last-child {
            border-bottom: none;
        }

        .youtube-faq summary {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 0.82rem;
            color: var(--border);
            cursor: pointer;
            padding: 11px 15px;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            transition: background 0.1s;
        }

        .youtube-faq summary::-webkit-details-marker {
            display: none;
        }

        .youtube-faq summary::after {
            content: "+";
            font-size: 1rem;
            font-weight: 800;
            color: var(--accent);
            flex-shrink: 0;
            margin-left: 8px;
        }

        .youtube-faq details[open]>summary {
            background: #d7e0fb;
            border-bottom: 1px solid var(--border);
        }

        .youtube-faq details[open]>summary::after {
            content: "−";
        }

        .youtube-faq details p {
            font-size: 0.83rem;
            font-weight: 400;
            color: #333;
            line-height: 1.6;
            padding: 10px 15px 12px;
            margin: 0;
            background: #f8f9ff;
        }

        /* Share section (new) */
        .share-section {
            text-align: center;
            padding: 15px;
        }

        .share-icons {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .share-icons a {
            display: inline-block;
        }

        .share-icons img {
            width: 25px;
            height: 25px;
            cursor: pointer;
            transition: 0.2s;
        }

        .share-icons img:hover {
            transform: scale(1.15);
        }

        #moreShare {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: #444;
            color: white;
            font-size: 23px;
            cursor: pointer;
        }

        /* Support dialog (new — matches YT converter) */
        #supportBackdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(3px);
            z-index: 9998;
        }

        #supportDialog {
            display: none;
            position: fixed;
            bottom: 50%;
            right: 50%;
            transform: translate(50%, 50%) scale(0.85);
            width: min(360px, calc(100vw - 32px));
            background: #fff;
            border: 2px solid var(--border);
            border-radius: 20px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
            z-index: 9999;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #supportDialog.sd-open {
            opacity: 1;
            transform: translate(50%, 50%) scale(1);
        }

        .sd-banner {
            background: linear-gradient(135deg, #4468a9 0%, #2d8cc4 100%);
            padding: 28px 24px 22px;
            text-align: center;
            position: relative;
        }

        .sd-banner-emoji {
            font-size: 2.8rem;
            line-height: 1;
            margin-bottom: 10px;
            display: block;
        }

        .sd-banner h3 {
            color: #fff;
            font-size: 1.15rem;
            font-weight: 800;
            margin: 0 0 4px;
        }

        .sd-banner p {
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.78rem;
            margin: 0;
            font-weight: 500;
        }

        .sd-close {
            position: absolute;
            top: 12px;
            right: 14px;
            background: rgba(255, 255, 255, 0.18);
            border: none;
            color: #fff;
            font-size: 1rem;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sd-close:hover {
            background: rgba(255, 255, 255, 0.35);
        }

        .sd-body {
            padding: 20px 22px 22px;
        }

        .sd-story {
            border-left: 3px solid var(--accent);
            padding: 10px 12px;
            background: #fafafa;
            margin-bottom: 14px;
            font-size: 0.79rem;
            line-height: 1.6;
            color: #444;
        }

        .sd-story p {
            margin: 0 0 5px;
        }

        .sd-story p:last-child {
            margin-bottom: 0;
        }

        .sd-story strong {
            color: var(--border);
        }

        .sd-costs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 14px;
        }

        .sd-cost-tag {
            background: #d7e0fb;
            color: var(--border);
            font-size: 0.70rem;
            font-weight: 800;
            padding: 4px 10px;
            border: 1px solid var(--border);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .sd-stat {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f0f5ff;
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 8px;
        }

        .sd-stat-icon {
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        .sd-stat-text {
            font-size: 0.82rem;
            color: #4468a9;
            font-weight: 600;
            line-height: 1.5;
        }

        .sd-stat-text strong {
            font-size: 1.05rem;
            color: #2d5fa8;
        }

        .sd-stat-text .sd-sub {
            display: block;
            font-size: 0.75rem;
            color: #888;
            font-weight: 500;
            margin-top: 2px;
        }

        .sd-stat-text .sd-sub strong {
            font-size: 0.82rem;
            color: #555;
        }

        .sd-btn-support {
            display: block;
            width: 100%;
            padding: 13px;
            background: linear-gradient(135deg, #4468a9, #2d8cc4);
            color: #fff;
            text-align: center;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 800;
            font-size: 0.95rem;
            text-transform: uppercase;
            margin-top: 16px;
            margin-bottom: 10px;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(68, 104, 169, 0.35);
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .sd-btn-support:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(68, 104, 169, 0.45);
            color: #fff;
        }

        .sd-btn-later {
            display: block;
            width: 100%;
            padding: 8px;
            background: transparent;
            color: #ccc;
            text-align: center;
            border: none;
            border-radius: 12px;
            font-size: 0.78rem;
            font-weight: 400;
            cursor: pointer;
        }

        .sd-btn-later:hover {
            color: #999;
        }

        .sd-note {
            text-align: center;
            font-size: 0.72rem;
            color: #bbb;
            margin-top: 10px;
        }

        /* Float support shine (new) */
        .float-support {
            overflow: hidden;
            position: fixed;
        }

        .float-support::before {
            content: "";
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: skewX(-25deg);
            animation: supportShine 3.5s infinite;
        }

        @keyframes supportShine {
            0% {
                left: -120%;
            }

            100% {
                left: 150%;
            }
        }

        /* Bookmark note (new) */
        #bookmark-msg {
            margin: 1rem 0;
            padding: 11px 14px;
            background: #f0f5ff;
            border-left: 3px solid var(--border);
            font-size: 0.80rem;
            line-height: 1.6;
            color: #444;
            text-align: center;
        }

        /* Cross-link btn (new) */
        .crosslink-btn {
            border: 2px solid var(--border);
            background-color: #fff;
            color: var(--border);
            font-weight: 600;
            text-transform: none;
            text-decoration: none;
            text-align: center;
            padding: 10px 25px;
            width: fit-content;
            display: block;
            margin: auto;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
        }

        .crosslink-btn:hover {
            background: var(--secondary);
        }