/* =========================================================
   TBS ORGANIZA TAREAS - PREMIUM BABY SHOWER
========================================================= */
.tbs-todo {
    --tbs-accent: var(--tbs-accent, #a65c38);
    --tbs-accent-2: var(--tbs-accent-2, #e8b7c7);
    --tbs-accent-3: var(--tbs-accent-3, #eed1b2);
    --tbs-soft-text: #8f7b85;
    --tbs-border: rgba(223, 202, 194, 0.9);
    --tbs-card: rgba(255,255,255,.78);
    width: 100%;
    max-width: 1280px;
    margin: 28px auto;
    padding: 0 12px;
    display: flex;
    justify-content: center;
    font-family: var(--tbs-font, "Roboto", Arial, sans-serif);
}
.tbs-todo *, .tbs-todo *::before, .tbs-todo *::after { box-sizing: border-box; }

.tbs-todo-box {
    width: 100%;
    max-width: 1240px;
    position: relative;
    overflow: hidden;
    padding: 38px 42px 34px;
    border-radius: 44px;
    border: 1px solid rgba(227, 201, 192, .95);
    background:
        radial-gradient(circle at 0% 10%, rgba(236, 216, 190, 0.52), transparent 32%),
        radial-gradient(circle at 100% 0%, rgba(244, 212, 227, 0.52), transparent 34%),
        linear-gradient(135deg, #fffdfb 0%, #fff9fb 42%, #fdfdff 100%);
    box-shadow: 0 24px 64px rgba(181, 140, 122, .12), inset 0 1px 0 rgba(255,255,255,.92);
    color: #4f433f;
}
.tbs-todo-box::before,
.tbs-todo-box::after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter: blur(2px);
}
.tbs-todo-box::before {
    width: 320px; height: 320px; left: -120px; bottom: -130px;
    background: radial-gradient(circle, rgba(255,231,240,.72) 0%, rgba(255,231,240,0) 70%);
}
.tbs-todo-box::after {
    width: 280px; height: 280px; right: -100px; top: -120px;
    background: radial-gradient(circle, rgba(234,240,255,.68) 0%, rgba(234,240,255,0) 72%);
}
.tbs-todo-box > * { position: relative; z-index: 2; }

/* HERO */
.tbs-todo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 30px;
    align-items: center;
    margin-bottom: 26px;
}
.tbs-todo-kicker-row {
    display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.tbs-todo-icon {
    width: 78px; height: 78px; flex: 0 0 78px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 24px;
    background: linear-gradient(135deg, #f7e3ce, #efb7c8);
    color: #a45c37; font-size: 54px; font-weight: 700; line-height:1;
    box-shadow: 0 18px 36px rgba(233, 180, 198, .24), inset 0 1px 0 rgba(255,255,255,.6);
}
.tbs-todo-eyebrow {
    display:inline-flex; align-items:center; justify-content:center;
    min-height: 44px; padding: 0 24px;
    border-radius: 999px;
    border: 1px solid rgba(220, 198, 189, .95);
    background: rgba(255,255,255,.78);
    color: #a45c37; font-size: 13px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
    box-shadow: 0 12px 22px rgba(181, 140, 122, .08);
}
.tbs-todo-title {
    margin: 0 0 12px;
    max-width: 520px;
    color: #a45c37;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.05em;
}
.tbs-todo-sub {
    max-width: 650px;
    color: #7e6b78;
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}
.tbs-todo-hero-copy .tbs-todo-sub { text-align:left; }
.tbs-todo-hero-media { display:flex; justify-content:flex-end; }
.tbs-todo-hero-illustration {
    width: 100%; max-width: 470px;
    border-radius: 40px;
    padding: 0;
    background: linear-gradient(135deg, rgba(247, 227, 206, .55), rgba(240, 184, 206, .42));
    box-shadow: 0 20px 52px rgba(181,140,122,.14);
}
.tbs-todo-hero-illustration img {
    width:100%; display:block; border-radius: 34px;
}

/* PROGRESS */
.tbs-todo-progress-card {
    max-width: 1160px;
    margin: 4px auto 34px;
    padding: 22px 26px 24px;
    border-radius: 32px;
    border: 1px solid rgba(222, 202, 193, .92);
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,252,253,.95));
    box-shadow: 0 18px 42px rgba(181, 140, 122, .09), inset 0 1px 0 rgba(255,255,255,.95);
    overflow: hidden;
}
.tbs-progress-head {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin-bottom: 16px;
}
.tbs-progress-pill {
    display:inline-flex; align-items:center; gap:8px;
    min-height: 36px; padding: 0 16px;
    border-radius:999px; background:#fff; border:1px solid rgba(230,207,199,.95);
    color:#a45c37; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.tbs-progress-head-icons { color:#c78a5b; font-size: 18px; }
.tbs-progress-scene {
    position: relative;
    padding: 14px 0 20px;
}
.tbs-progress-cloud {
    position:absolute; display:block; border-radius: 999px; background: rgba(255,255,255,.85);
    box-shadow: 0 8px 18px rgba(189, 174, 188, .12);
    animation: tbsCloudFloat 8s ease-in-out infinite;
}
.tbs-progress-cloud::before, .tbs-progress-cloud::after {
    content:""; position:absolute; border-radius:50%; background: inherit;
}
.tbs-cloud-1 { width: 62px; height: 22px; top: -2px; left: 28px; }
.tbs-cloud-1::before { width: 26px; height: 26px; left: 8px; top: -10px; }
.tbs-cloud-1::after { width: 24px; height: 24px; right: 8px; top: -8px; }
.tbs-cloud-2 { width: 82px; height: 24px; top: 24px; right: 52px; animation-delay: -3s; }
.tbs-cloud-2::before { width: 28px; height: 28px; left: 14px; top: -12px; }
.tbs-cloud-2::after { width: 30px; height: 30px; right: 10px; top: -12px; }
.tbs-progress-track-wrap { position:relative; padding-top: 18px; }
.tbs-progress-track {
    position:relative;
    width:100%; height: 24px; overflow:hidden;
    border-radius: 999px;
    background: linear-gradient(180deg, #ece6e4, #f5f0ee);
    box-shadow: inset 0 2px 8px rgba(150, 118, 104, .08), 0 1px 0 rgba(255,255,255,.96);
}
.tbs-progress-track::before {
    content:""; position:absolute; inset: 4px; border-radius:999px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 26px, rgba(255,255,255,.12) 26px 52px);
    opacity:.55; pointer-events:none;
}
.tbs-progress-fill {
    position:relative;
    width:0%; height:100%; border-radius:999px;
    background: linear-gradient(90deg, #a55c38 0%, #efb7c8 46%, #efcfab 100%);
    box-shadow: 0 10px 22px rgba(239, 183, 200, .22), inset 0 1px 0 rgba(255,255,255,.42);
    transition: width .55s cubic-bezier(.2,.78,.2,1);
    overflow: visible;
}
.tbs-progress-fill::after {
    content:""; position:absolute; top:0; bottom:0; width: 90px; right: -24px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
    transform: skewX(-22deg);
    animation: tbsProgressShine 2.8s linear infinite;
}
.tbs-progress-glow {
    position:absolute; inset:0; border-radius:inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.tbs-progress-traveler {
    position:absolute; right:-10px; top:50%; transform:translateY(-50%);
    width: 30px; height: 30px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:#fff9fc; box-shadow: 0 10px 20px rgba(165,92,56,.18);
    font-size: 17px;
}
.tbs-progress-milestones {
    display:flex; justify-content:space-between; gap:8px;
    margin-top: 14px; padding: 0 4px;
}
.tbs-progress-step {
    width: 36px; height: 36px; display:flex; align-items:center; justify-content:center;
    border-radius: 999px; background:#fff; border:1px solid rgba(227,205,196,.95);
    box-shadow: 0 8px 16px rgba(181, 140, 122, .08);
    font-size:16px; opacity: .58; transform: scale(.95);
    transition: all .35s ease;
}
.tbs-progress-step.is-active {
    opacity:1; transform: scale(1.04);
    box-shadow: 0 12px 24px rgba(239,183,200,.18);
    background: linear-gradient(135deg, #fffef7, #fff4fa);
}
.tbs-progress-text {
    margin-top: 8px;
    color: #a45c37;
    font-size: 14px;
    font-weight: 900;
    line-height:1.3;
    text-align:center;
}

/* TASKS */
.tbs-todo-list {
    display:flex; flex-direction:column; gap:18px;
    width:100%; max-width:1160px; margin:0 auto 24px;
}
.tbs-todo-item {
    position:relative;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    width:100%; min-height: 82px;
    padding: 18px 20px;
    border-radius: 28px;
    border: 1px solid rgba(228, 214, 208, .95);
    background: rgba(255,255,255,.78);
    box-shadow: 0 14px 28px rgba(181,140,122,.06), inset 0 1px 0 rgba(255,255,255,.95);
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, opacity .22s ease;
}
.tbs-todo-item:hover {
    border-color: rgba(236, 198, 212, .96);
    box-shadow: 0 18px 36px rgba(181,140,122,.09), inset 0 1px 0 rgba(255,255,255,.96);
}
.tbs-todo-item.completed {
    border-color: rgba(211, 231, 216, .9);
    background: linear-gradient(135deg, rgba(248,255,251,.92), rgba(255,255,255,.98));
}
.tbs-todo-left { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.tbs-check {
    width: 34px; height: 34px; flex:0 0 34px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 12px; border:2px solid rgba(217, 193, 185, .96);
    background:#fff; cursor:pointer; user-select:none;
    box-shadow: 0 8px 18px rgba(181, 140, 122, .10), inset 0 1px 0 rgba(255,255,255,.96);
    transition: all .22s ease;
}
.tbs-check:hover { border-color: rgba(236, 198, 212, .96); }
.tbs-todo-item.completed .tbs-check {
    border-color: rgba(232, 183, 200, .96);
    background: linear-gradient(135deg, #e3b8c5, #d6a3b0);
    color:#fff;
}
.tbs-todo-item.completed .tbs-check::before { content:"✔"; font-size:18px; font-weight:900; }
.tbs-text {
    flex:1; color:#433c40; font-size:17px; font-weight:800; line-height:1.42; word-break:break-word;
}
.tbs-todo-item.completed .tbs-text {
    color:#9f9297;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(164,92,55,.36);
}
.tbs-delete {
    width: 46px; height: 46px; flex:0 0 46px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 18px; border: 1px solid rgba(228,214,208,.98);
    background: rgba(255,255,255,.88); color:#b37a5b; font-size: 26px; line-height:1; cursor:pointer;
    box-shadow: 0 8px 20px rgba(181,140,122,.08);
    transition: all .2s ease;
}
.tbs-delete:hover { background:#fff5f8; color:#9f5938; }

/* ADD */
.tbs-todo-add {
    display:grid; grid-template-columns: 1fr auto; gap: 14px;
    width:100%; max-width:1160px; margin: 0 auto 18px;
}
.tbs-input-wrapper { position:relative; }
.tbs-input-icon {
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    color:#a45c37; font-size: 24px; font-weight:700;
}
#tbsTodoInput {
    width:100%; min-height: 62px; padding: 16px 20px 16px 52px;
    border-radius: 22px; border:1px solid rgba(228,214,208,.98);
    background: rgba(255,255,255,.88); color:#433c40;
    font-family:inherit; font-size:16px; font-weight:700;
    outline:none; box-shadow: 0 12px 24px rgba(181,140,122,.06), inset 0 1px 0 rgba(255,255,255,.96);
}
#tbsTodoInput::placeholder { color:#b1a4a9; }
#tbsTodoInput:focus {
    border-color: rgba(236, 198, 212, .96);
    box-shadow: 0 0 0 4px rgba(239,183,200,.14), 0 12px 24px rgba(181,140,122,.08);
}
#tbsTodoAddBtn {
    min-height: 62px; padding: 16px 28px; border:0; border-radius: 22px;
    background: linear-gradient(135deg, #efd4b7 0%, #f3c8d5 100%); color:#7f4f34;
    font-family:inherit; font-size:18px; font-weight:900; cursor:pointer;
    box-shadow: 0 18px 38px rgba(239,183,200,.22), inset 0 1px 0 rgba(255,255,255,.52);
}
#tbsTodoAddBtn:hover { filter: brightness(1.03) saturate(1.04); }

.tbs-reset-wrapper { text-align:center; margin-top: 10px; }
.tbs-reset-btn {
    min-height: 44px; padding: 11px 22px; border-radius: 999px; border:1px solid rgba(220,198,189,.95);
    background:#fff; color:#8c5a3b; font-family:inherit; font-size:14px; font-weight:900; cursor:pointer;
    box-shadow: 0 10px 20px rgba(181,140,122,.06);
}
.tbs-reset-btn:hover { background:#fff7fb; }
.tbs-todo-footer {
    max-width:760px; margin: 18px auto 0; color:#8b7b84; font-size:14px; font-weight:700; line-height:1.5; text-align:center;
}

/* THEME ADAPTATION */
.tbs-todo-box[style*="--tbs-accent"] .tbs-todo-title,
.tbs-todo-box[style*="--tbs-accent"] .tbs-progress-text,
.tbs-todo-box[style*="--tbs-accent"] .tbs-todo-eyebrow,
.tbs-todo-box[style*="--tbs-accent"] .tbs-progress-pill,
.tbs-todo-box[style*="--tbs-accent"] .tbs-input-icon,
.tbs-todo-box[style*="--tbs-accent"] #tbsTodoAddBtn,
.tbs-todo-box[style*="--tbs-accent"] .tbs-reset-btn,
.tbs-todo-box[style*="--tbs-accent"] .tbs-delete { color: var(--tbs-accent, #a65c38); }

/* responsive */
@media (max-width: 980px) {
    .tbs-todo-box { padding: 28px 24px; border-radius: 34px; }
    .tbs-todo-hero { grid-template-columns: 1fr; }
    .tbs-todo-hero-copy .tbs-todo-sub, .tbs-todo-title { text-align:center; max-width:none; }
    .tbs-todo-kicker-row { justify-content:center; }
    .tbs-todo-hero-media { justify-content:center; }
    .tbs-progress-head { flex-direction:column; align-items:center; }
}
@media (max-width: 768px) {
    .tbs-todo { padding:0 8px; }
    .tbs-todo-box { padding: 22px 14px; border-radius: 28px; }
    .tbs-todo-icon { width:64px; height:64px; font-size:44px; border-radius:20px; }
    .tbs-todo-eyebrow { min-height:40px; font-size:12px; padding: 0 18px; }
    .tbs-todo-title { font-size: clamp(34px, 10vw, 48px); }
    .tbs-todo-sub { font-size: 15px; }
    .tbs-todo-progress-card { padding: 18px 14px 20px; border-radius: 24px; }
    .tbs-progress-track { height: 22px; }
    .tbs-progress-step { width:32px; height:32px; font-size:14px; }
    .tbs-todo-item { min-height: 74px; padding: 14px 14px; border-radius: 22px; }
    .tbs-text { font-size:16px; }
    .tbs-delete { width:42px; height:42px; border-radius:16px; }
    .tbs-todo-add { grid-template-columns: 1fr; }
    #tbsTodoAddBtn { width:100%; font-size:16px; }
    #tbsTodoInput { min-height:58px; font-size:15px; }
}
@media (max-width: 480px) {
    .tbs-todo-title { font-size: 32px; }
    .tbs-todo-sub { font-size: 14px; }
    .tbs-progress-milestones { gap:6px; }
    .tbs-progress-step { width:28px; height:28px; font-size:13px; }
    .tbs-check { width: 30px; height: 30px; flex-basis: 30px; }
    .tbs-text { font-size:15px; }
}

@keyframes tbsProgressShine {
    0% { transform: translateX(-160px) skewX(-22deg); }
    100% { transform: translateX(580px) skewX(-22deg); }
}
@keyframes tbsCloudFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}


/* =========================================================
   FIX 20260607-10
   ORGANIZACIÓN DE TAREAS - HEADER COMO WISHLIST / REGALOS VIRTUALES
   Objetivo:
   - Bajar tamaño de título y subtítulo.
   - Mantener imagen y progreso.
   - Conservar formato premium responsive.
========================================================= */

.tbs-todo .tbs-todo-hero {
    gap: clamp(24px, 3.2vw, 44px) !important;
    margin-bottom: 26px !important;
}

.tbs-todo .tbs-todo-kicker-row {
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.tbs-todo .tbs-todo-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 18px !important;
    font-size: 38px !important;
    line-height: 1 !important;
}

.tbs-todo .tbs-todo-eyebrow {
    min-height: 24px !important;
    padding: 6px 13px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
}

.tbs-todo .tbs-todo-title {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    color: var(--tbs-primary-dark, var(--tbs-accent, #9b6238)) !important;

    font-size: clamp(30px, 3.4vw, 44px) !important;
    font-weight: 760 !important;
    line-height: 1.06 !important;
    letter-spacing: -.045em !important;
    text-align: left !important;
}

.tbs-todo .tbs-todo-sub {
    display: block !important;
    max-width: 780px !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--tbs-muted, #7e6b78) !important;

    font-size: clamp(13.5px, 1.15vw, 15.5px) !important;
    font-weight: 500 !important;
    line-height: 1.56 !important;
    letter-spacing: -.005em !important;
    text-align: left !important;
}

.tbs-todo .tbs-todo-hero-illustration {
    max-width: 560px !important;
    border-radius: 28px !important;
}

.tbs-todo .tbs-todo-hero-illustration img {
    border-radius: 28px !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .tbs-todo .tbs-todo-title {
        max-width: 100% !important;
        font-size: clamp(28px, 4.4vw, 38px) !important;
        text-align: center !important;
    }

    .tbs-todo .tbs-todo-sub {
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .tbs-todo .tbs-todo-kicker-row {
        justify-content: center !important;
    }
}

/* Móvil */
@media (max-width: 768px) {
    .tbs-todo .tbs-todo-hero {
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .tbs-todo .tbs-todo-kicker-row {
        gap: 12px !important;
        margin-bottom: 10px !important;
    }

    .tbs-todo .tbs-todo-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        flex-basis: 42px !important;
        border-radius: 15px !important;
        font-size: 28px !important;
    }

    .tbs-todo .tbs-todo-eyebrow {
        min-height: 20px !important;
        padding: 4px 9px !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        letter-spacing: .14em !important;
    }

    .tbs-todo .tbs-todo-title {
        font-size: 25px !important;
        line-height: 1.08 !important;
        font-weight: 760 !important;
        letter-spacing: -.04em !important;
        text-align: center !important;
    }

    .tbs-todo .tbs-todo-sub {
        margin-top: 7px !important;
        font-size: 12.5px !important;
        line-height: 1.44 !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    .tbs-todo .tbs-todo-hero-illustration,
    .tbs-todo .tbs-todo-hero-illustration img {
        border-radius: 20px !important;
    }
}


/* =========================================================
   FIX 20260607-11
   ORGANIZACIÓN DE TAREAS - CONFETTI MÁS VISIBLE
   - Reactiva confetti aunque la librería global no cargue.
   - Más cantidad de piezas.
   - Capa fija por encima del módulo.
========================================================= */

.tbs-todo-confetti-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.tbs-todo-confetti-piece {
    position: fixed !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;

    font-size: 18px !important;
    line-height: 1 !important;

    opacity: 0;
    filter: drop-shadow(0 8px 12px rgba(155, 98, 56, .16));

    transform: translate(0, 0) scale(.45) rotate(0deg);
    animation: tbsTodoFallbackConfetti var(--duration, 1.2s) cubic-bezier(.16,.72,.28,1) var(--delay, 0s) forwards !important;
}

.tbs-todo-confetti-piece:nth-child(3n) {
    font-size: 15px !important;
}

.tbs-todo-confetti-piece:nth-child(4n) {
    font-size: 22px !important;
}

.tbs-todo-confetti-piece:nth-child(5n) {
    filter: drop-shadow(0 8px 12px rgba(239, 183, 200, .22));
}

.tbs-todo-item.tbs-confetti-celebrate {
    animation: tbsTodoTaskCelebrate .85s ease-out both !important;
}

@keyframes tbsTodoFallbackConfetti {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.45) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    78% {
        opacity: .95;
    }

    100% {
        opacity: 0;
        transform:
            translate(var(--x, 80px), var(--y, -120px))
            scale(var(--s, 1))
            rotate(var(--r, 160deg));
    }
}

@keyframes tbsTodoTaskCelebrate {
    0% {
        box-shadow:
            0 14px 28px rgba(181,140,122,.06),
            inset 0 1px 0 rgba(255,255,255,.95);
    }

    38% {
        box-shadow:
            0 22px 48px rgba(239,183,200,.24),
            0 0 0 7px rgba(255,240,247,.82),
            0 0 0 13px rgba(247,200,115,.16),
            inset 0 1px 0 rgba(255,255,255,.98);
    }

    100% {
        box-shadow:
            0 14px 28px rgba(181,140,122,.06),
            inset 0 1px 0 rgba(255,255,255,.95);
    }
}


/* =========================================================
   FIX 20260607-12
   CONFETTI CENTRADO Y MUCHO MÁS VISIBLE
   Corrige el problema de confetti escondido en esquina superior izquierda.
========================================================= */

.tbs-todo-confetti-layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    overflow: visible !important;
    contain: none !important;
}

.tbs-todo-confetti-piece {
    position: fixed !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    font-size: 24px !important;
    line-height: 1 !important;

    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 10px 14px rgba(155, 98, 56, .22));

    transform: translate3d(0, 0, 0) scale(.55) rotate(0deg);
    animation: tbsTodoFallbackConfettiBig var(--duration, 1.6s) cubic-bezier(.16,.72,.22,1) var(--delay, 0s) forwards !important;
}

.tbs-todo-confetti-piece:nth-child(3n) {
    font-size: 20px !important;
}

.tbs-todo-confetti-piece:nth-child(4n) {
    font-size: 30px !important;
}

.tbs-todo-confetti-piece:nth-child(5n) {
    filter: drop-shadow(0 10px 16px rgba(239, 183, 200, .32));
}

.tbs-todo-confetti-piece:nth-child(7n) {
    font-size: 18px !important;
}

.tbs-todo-item.tbs-confetti-celebrate {
    animation: tbsTodoTaskCelebrateBig 1s ease-out both !important;
}

@keyframes tbsTodoFallbackConfettiBig {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.55) rotate(0deg);
    }

    8% {
        opacity: 1;
    }

    72% {
        opacity: .98;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(var(--x, 140px), var(--y, -180px), 0)
            scale(var(--s, 1))
            rotate(var(--r, 240deg));
    }
}

@keyframes tbsTodoTaskCelebrateBig {
    0% {
        box-shadow:
            0 14px 28px rgba(181,140,122,.06),
            inset 0 1px 0 rgba(255,255,255,.95);
        transform: scale(1);
    }

    36% {
        box-shadow:
            0 26px 56px rgba(239,183,200,.30),
            0 0 0 8px rgba(255,240,247,.88),
            0 0 0 16px rgba(247,200,115,.18),
            inset 0 1px 0 rgba(255,255,255,.98);
        transform: scale(1.012);
    }

    100% {
        box-shadow:
            0 14px 28px rgba(181,140,122,.06),
            inset 0 1px 0 rgba(255,255,255,.95);
        transform: scale(1);
    }
}