.qpd-widget {
    --qpd-ink: #10213f;
    --qpd-green: #2f7d32;
    --qpd-soft-green: #e9f6e8;
    --qpd-cream: #fffdf4;
    --qpd-sold: #a9adb5;
    --qpd-held: #f4d27a;
    --qpd-selected: #bfe6ff;
    --qpd-border: #1e293b;
    color: var(--qpd-ink);
    font-family: inherit;
    max-width: 980px;
    margin: 2rem auto;
}

.qpd-panel {
    align-items: flex-start;
    background: linear-gradient(135deg, #f2fbff 0%, #ffffff 55%, #eff9ee 100%);
    border: 1px solid rgba(16, 33, 63, 0.12);
    border-radius: 22px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1.25rem;
}

.qpd-kicker {
    color: var(--qpd-green);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.qpd-title {
    font-size: clamp(1.55rem, 4vw, 2.35rem);
    line-height: 1.08;
    margin: 0 0 0.5rem;
}

.qpd-intro {
    margin: 0;
    max-width: 680px;
}

.qpd-lang-toggle,
.qpd-checkout {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
}

.qpd-lang-toggle {
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(16, 33, 63, 0.12);
    color: var(--qpd-green);
    min-width: 54px;
    padding: 0.65rem 0.9rem;
}

.qpd-stage {
    background: #eaf8ff;
    border: 1px solid rgba(16, 33, 63, 0.12);
    border-radius: 28px;
    overflow: hidden;
}

.qpd-sheep-svg {
    display: block;
    height: auto;
    width: 100%;
}

.qpd-ground {
    fill: #a7d876;
}

.qpd-cloud path {
    fill: #ffffff;
    stroke: #2f3b52;
    stroke-linejoin: round;
    stroke-width: 4;
}

.qpd-cloud text {
    fill: #172554;
    font-size: 34px;
    font-weight: 800;
    text-anchor: middle;
}

.qpd-cloud text + text {
    fill: var(--qpd-green);
    font-size: 30px;
}

.qpd-fleece,
.qpd-head,
.qpd-ear,
.qpd-leg {
    fill: var(--qpd-cream);
    stroke: var(--qpd-border);
    stroke-linejoin: round;
    stroke-width: 5;
}

.qpd-tail {
    fill: none;
    stroke: var(--qpd-border);
    stroke-linecap: round;
    stroke-width: 16;
}

.qpd-ear {
    fill: #ffe8df;
}

.qpd-hoof,
.qpd-eye {
    fill: #111827;
}

.qpd-nose {
    fill: #ffc9c9;
    stroke: var(--qpd-border);
    stroke-linejoin: round;
    stroke-width: 4;
}

.qpd-smile {
    fill: none;
    stroke: var(--qpd-border);
    stroke-linecap: round;
    stroke-width: 3;
}

.qpd-piece path {
    fill: #ffffff;
    stroke: var(--qpd-border);
    stroke-linejoin: round;
    stroke-width: 4;
    transition: fill 180ms ease, transform 180ms ease, filter 180ms ease;
}

.qpd-piece text {
    fill: #111827;
    font-size: 36px;
    font-weight: 900;
    pointer-events: none;
    text-anchor: middle;
}

.qpd-piece.qpd-status-available {
    cursor: pointer;
}

.qpd-piece.qpd-status-available:hover path,
.qpd-piece.qpd-status-available:focus path {
    fill: var(--qpd-soft-green);
    filter: drop-shadow(0 6px 5px rgba(47, 125, 50, 0.25));
}

.qpd-piece.qpd-selected path {
    fill: var(--qpd-selected);
}

.qpd-piece.qpd-status-held path {
    fill: var(--qpd-held);
}

.qpd-piece.qpd-status-sold path {
    fill: var(--qpd-sold);
}

.qpd-piece.qpd-status-held,
.qpd-piece.qpd-status-sold {
    cursor: not-allowed;
    opacity: 0.8;
}

.qpd-controls {
    align-items: end;
    background: #ffffff;
    border: 1px solid rgba(16, 33, 63, 0.12);
    border-radius: 22px;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1.2fr 1fr auto;
    margin-top: 1rem;
    padding: 1rem;
}

.qpd-selected {
    font-size: 1.05rem;
    font-weight: 800;
}

.qpd-donor-label {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.qpd-donor-name {
    border: 1px solid rgba(16, 33, 63, 0.25);
    border-radius: 14px;
    font: inherit;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
}

.qpd-checkout {
    background: var(--qpd-green);
    color: #ffffff;
    min-height: 46px;
    padding: 0.7rem 1.2rem;
}

.qpd-checkout:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.qpd-message {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 1.2em;
}

.qpd-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.25rem;
    justify-content: space-between;
    margin-top: 0.85rem;
}

.qpd-footer span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.qpd-dot {
    border: 1px solid var(--qpd-border);
    border-radius: 999px;
    display: inline-block;
    height: 0.85rem;
    width: 0.85rem;
}

.qpd-dot-available {
    background: #ffffff;
}

.qpd-dot-held {
    background: var(--qpd-held);
}

.qpd-dot-sold {
    background: var(--qpd-sold);
}

.qpd-error {
    background: #fff4f4;
    border: 1px solid #fecaca;
    border-radius: 12px;
    color: #991b1b;
    padding: 1rem;
}

@media (max-width: 760px) {
    .qpd-panel,
    .qpd-controls {
        grid-template-columns: 1fr;
    }

    .qpd-panel {
        align-items: stretch;
    }

    .qpd-lang-toggle {
        align-self: flex-start;
    }

    .qpd-cloud text {
        font-size: 28px;
    }

    .qpd-cloud text + text {
        font-size: 24px;
    }

    .qpd-piece text {
        font-size: 30px;
    }
}