.draw-panel, .draw-showcase {
    --draw-ink: #071536;
    --draw-line: #e1e5ec;
    color: var(--draw-ink);
    font-family: var(--cartao-font-body, Inter, Arial, sans-serif);
}

.draw-panel {
    min-width: 0;
    border: 1px solid var(--draw-line);
    border-radius: 20px;
    background: linear-gradient(156deg, #fff, #f3f4f6);
    box-shadow: 0 5px 12px #10213f24, 0 1px 3px #10213f1c;
}

.draw-progress {
    --progress-gold: #ffc52e;
    --progress-divider: #a4c0d7aa;
    display: grid;
    grid-template-columns: minmax(0, 36fr) minmax(0, 45fr) minmax(0, 19fr);
    align-items: center;
    container-type: inline-size;
    min-width: 0;
    padding: clamp(5px, 1.05vw, 14px) clamp(9px, 2vw, 26px);
    border: 1px solid #a4c0d7;
    border-radius: clamp(11px, 1.7vw, 22px);
    background:
        radial-gradient(ellipse at 48% 105%, #f0ad3c36, transparent 21%),
        radial-gradient(ellipse at 75% 0%, #11649585, transparent 49%),
        linear-gradient(#06345d, #031329 82%);
    color: #fff;
    box-shadow: 0 4px 8px #0008, 0 0 8px #75baf486, inset 0 1px 4px #9ad9ff4a;
    font-family: var(--cartao-font-body, Inter, Arial, sans-serif);
}

.natal-campaign :is(.draw-panel, .draw-showcase) h2 {
    margin: 0;
    color: var(--draw-ink);
    font: 800 clamp(1.2rem, 2.8vw, 1.8rem)/1.14 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    letter-spacing: -.035em;
}

.draw-progress-intro, .draw-progress-remaining {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.7cqw, 20px);
    min-width: 0;
}

.draw-progress-icon {
    flex: none;
    width: clamp(22px, 5.9cqw, 61px);
    aspect-ratio: 1;
    color: var(--progress-gold);
    filter: drop-shadow(0 1px 3px #d18a0563);
}

.natal-campaign .draw-progress-intro h2 {
    margin: 0;
    color: #fff;
    font: 800 clamp(.67rem, 2.35cqw, 1.62rem)/1.08 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    letter-spacing: -.035em;
}

.natal-campaign .draw-progress-intro p {
    max-width: 37ch;
    margin: .24em 0 0;
    color: #cfdbe8;
    font-size: clamp(.43rem, 1.37cqw, .9rem);
    line-height: 1.13;
}

.draw-progress-sales {
    display: grid;
    gap: clamp(3px, .85cqw, 9px);
    min-width: 0;
    padding-inline: clamp(6px, 2.25cqw, 25px);
    border-inline: 1px solid var(--progress-divider);
}

.draw-progress-tally {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1cqw, 10px);
    font-size: clamp(.53rem, 1.67cqw, 1.03rem);
    line-height: 1.15;
    text-align: center;
}
.draw-progress-tally svg { flex: none; width: clamp(11px, 2.8cqw, 26px); color: var(--progress-gold); }
.draw-progress-tally b, .draw-progress-remaining strong {
    color: var(--progress-gold);
    font-family: var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    font-weight: 800;
}

.draw-progress-track {
    position: relative;
    height: clamp(14px, 2.8cqw, 30px);
    overflow: hidden;
    border: 1px solid #b5cadd;
    border-radius: 999px;
    background: linear-gradient(#142740, #223b57);
    box-shadow: inset 0 2px 4px #030a17a0;
}

.draw-progress-fill {
    display: block;
    width: var(--draw-fill);
    height: 100%;
    border-radius: inherit;
    background:
        radial-gradient(circle at 28% 44%, #fffde7 0 6%, #fff58d 9%, #fff69f70 21%, transparent 40%) 0 0 / 16% 100%,
        radial-gradient(circle at 69% 72%, #fff7b2 0 4%, #fff69f80 15%, transparent 31%) 0 0 / 13% 100%,
        linear-gradient(180deg, #fff3a9a8, transparent 52%, #ab610023),
        linear-gradient(90deg, #d18a05, #ffc52e, #ffe777, #ffbb25);
    box-shadow: inset 0 1px 2px #fff8be, 0 0 6px #ffc52ea6;
    transition: width .3s ease;
}

.draw-progress-percent {
    position: absolute;
    top: 50%;
    left: calc(var(--draw-fill) - .48em);
    transform: translate(-100%, -50%);
    color: #151508;
    font: 800 clamp(.53rem, 1.56cqw, 1rem)/1 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    white-space: nowrap;
    transition: left .3s ease;
}
.draw-progress-track-low .draw-progress-percent {
    left: calc(var(--draw-fill) + .48em);
    transform: translateY(-50%);
    color: #fff;
}

.draw-progress-remaining {
    padding-left: clamp(5px, 2.2cqw, 24px);
    font-size: clamp(.48rem, 1.5cqw, 1rem);
    line-height: 1.05;
}
.draw-progress-remaining .draw-progress-icon { width: clamp(18px, 4.6cqw, 49px); }
.draw-progress-remaining strong {
    display: block;
    margin-block: .04em;
    font-size: clamp(.68rem, 2.5cqw, 1.62rem);
    overflow-wrap: anywhere;
}

.draw-showcase {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(235px, 3fr);
    align-items: start;
    gap: 12px;
    margin: 13px 4px 7px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f4f5f7, #eaf0f980);
}

.natal-campaign .draw-prizes h2 {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 5px 12px;
    font-size: clamp(1.2rem, 2.6vw, 1.65rem);
}
.draw-prizes h2::after { flex: 1; height: 2px; background: #d99b22; content: ""; }

.draw-prize-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.draw-prize-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 245px;
    padding: 14px clamp(6px, 1.2vw, 15px) 16px;
    border: 1px solid #e5e6ea;
    border-radius: 18px;
    background: linear-gradient(145deg, #fafbfc, #f2f3f5);
    box-shadow: 0 4px 7px #10213f20;
    text-align: center;
}
.draw-prize-card img { width: 100%; height: 105px; object-fit: contain; }
.draw-prize-card:not(:has(img)) h3 { margin-top: auto; }
.draw-prize-card h3 {
    display: grid;
    align-content: center;
    min-height: 2.25em;
    margin: 0;
    color: var(--draw-ink);
    font: 800 clamp(.93rem, 1.86vw, 1.19rem)/1.12 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    overflow-wrap: anywhere;
}
.draw-prize-status {
    width: min(100%, 124px);
    margin-top: auto;
    padding: 6px 4px;
    border-radius: 13px;
    background: #d6f8d9;
    color: #09531b;
    font-size: clamp(.78rem, 1.5vw, 1rem);
    font-weight: 700;
}
.draw-prizes-empty { padding: 22px 16px; }

.draw-live {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px 15px 17px;
    background: linear-gradient(#fbfbfc, #f5f7fb 75%, #eef3fb);
    text-align: center;
}
.natal-campaign .draw-live h2 { font-size: clamp(1.1rem, 2vw, 1.27rem); }
.draw-live h2 i { margin-right: 4px; color: #c87b08; font-size: 1.34em; vertical-align: middle; }
.draw-live p { margin: 0; font-size: .9rem; line-height: 1.25; }
.draw-live small { font-size: .73rem; }
.draw-live .draw-live-clock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 5px 0 6px;
}
.draw-live .draw-live-clock > div {
    display: grid;
    place-content: center;
    min-width: 0;
    min-height: 58px;
    padding: 3px 0;
    border: 1px solid #e0e6f1;
    border-radius: 11px;
    background: linear-gradient(142deg, #dce4f1, #e9eef7);
    color: var(--draw-ink);
}
.draw-live-clock strong {
    font: 800 clamp(1.05rem, 2.55vw, 1.6rem)/1.1 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    overflow-wrap: anywhere;
}
.draw-live-clock span { font-size: .78rem; }

.draw-live-actions { display: grid; gap: 8px; margin-top: 6px; }
.draw-live-actions > :is(a, button) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 39px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font: 800 .98rem/1.12 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    text-decoration: none;
}
.draw-live-actions .draw-live-primary {
    min-height: 43px;
    background: linear-gradient(#ffd774, #c78a1b);
    color: #12110c;
}
.draw-live-primary i { font-size: 1.25em; }
.draw-live-primary:disabled { cursor: default; }
.draw-live-actions .draw-live-secondary { border-color: #071536; color: var(--draw-ink); }

@media (max-width: 800px) {
    .draw-showcase { grid-template-columns: minmax(0, 1fr); }
    .draw-live { width: 100%; }
}

@media (max-width: 560px) {
    .draw-prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .draw-prize-card { min-height: 205px; }
    .draw-prize-card img { height: 85px; }
}

@media (max-width: 520px) {
    .draw-progress {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 9px;
        padding: 8px 11px 10px;
    }
    .draw-progress-sales {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 5px 0 0;
        border: 0;
        border-top: 1px solid var(--progress-divider);
    }
    .natal-campaign .draw-progress-intro h2 { font-size: .84rem; }
    .natal-campaign .draw-progress-intro p { font-size: .61rem; }
    .draw-progress-tally, .draw-progress-percent { font-size: .68rem; }
    .draw-progress-remaining { border-left: 1px solid var(--progress-divider); font-size: .6rem; }
    .draw-progress-remaining strong { font-size: .83rem; }
}

@media (prefers-reduced-motion: reduce) {
    .draw-progress-fill, .draw-progress-percent { transition: none; }
}