*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{background:linear-gradient(135deg,#fdf2f7,#fee2e2,#e0f2fe) 0 0/200% 200%;justify-content:center;align-items:center;min-height:100vh;padding:16px;animation:12s ease-in-out infinite bgMove;display:flex;position:relative;overflow-x:hidden}@keyframes bgMove{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}#bgCanvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.card{z-index:1;background:#fff;border-radius:24px;justify-content:center;align-items:flex-start;gap:32px;width:100%;max-width:900px;padding:32px 28px;display:flex;position:relative;box-shadow:0 18px 40px #00000014}.left{flex:1}h1{color:#111827;margin-bottom:6px;font-size:32px;line-height:1.1}h1 span.highlight{color:#f43f5e}.subtitle{color:#4b5563;margin-bottom:20px;font-size:16px}.calendar-img{border-radius:20px;width:100%;max-width:260px;margin:-15px auto 20px;display:block;overflow:hidden}.calendar-img video{border-radius:20px;width:100%;display:block}.months{width:100%;margin-bottom:18px;padding:8px 0;position:relative}.months-inner{z-index:1;flex-direction:column;gap:10px;width:100%;padding-left:0;display:flex;position:relative}.months-row{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;column-gap:10px;width:100%;display:grid}.month-item{color:#111827;opacity:.5;text-align:center;background:#ffe4ea;border-radius:14px;justify-content:center;align-items:center;gap:6px;min-width:0;padding:11px 8px;font-size:13px;transition:opacity .2s,transform .2s,box-shadow .2s,background .2s,color .2s;display:flex}.month-item.active{opacity:1;transform:translateY(-2px);box-shadow:0 4px 12px #f43f5e59}.month-item.completed{color:#166534;opacity:1;background:#ecfdf3;box-shadow:0 4px 12px #22c55e4d}.month-item.pending{color:#b91c1c;opacity:1;background:#fee2e2;box-shadow:0 4px 12px #f8717159}.check-circle{background:#fff;border:2px solid #f43f5e;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:border-color .2s,background .2s;display:flex}.check-circle svg{fill:none;stroke:#f43f5e;stroke-width:2px;width:12px;height:12px;transition:stroke .2s}.month-item.completed .check-circle{background:#dcfce7;border-color:#22c55e}.month-item.completed .check-circle svg{stroke:#16a34a}.month-item.pending .check-circle{background:#fee2e2;border-color:#ef4444}.month-item.pending .check-circle svg{stroke:#b91c1c}.month-connector{background:#fee2e2;border-radius:999px;justify-self:center;width:100%;max-width:20px;height:4px;position:relative;overflow:hidden}.month-connector-fill{border-radius:inherit;background:linear-gradient(90deg,#22c55e,#16a34a);width:0%;transition:width .35s linear;position:absolute;top:0;bottom:0;left:0}.progress-info{color:#6b7280;margin-bottom:16px;font-size:13px}@keyframes floatBtn{0%{transform:translateY(0);box-shadow:0 10px 24px #f43f5e59}50%{transform:translateY(-5px);box-shadow:0 18px 32px #f43f5e80}to{transform:translateY(0);box-shadow:0 10px 24px #f43f5e59}}.btn{color:#fff;cursor:pointer;opacity:0;pointer-events:none;background:#f43f5e;border:none;border-radius:999px;outline:none;justify-content:center;align-items:center;gap:8px;margin:0 auto;padding:14px 28px;font-size:15px;font-weight:700;transition:transform .12s,box-shadow .12s,opacity .12s;display:flex;box-shadow:0 10px 24px #f43f5e59}.btn.visible{opacity:1;pointer-events:auto;animation:2.4s ease-in-out infinite floatBtn}.btn:hover{animation:none;transform:translateY(-2px);box-shadow:0 18px 36px #f43f5e8c}.tiktok-loader-overlay{z-index:9999;background:#fff;flex-direction:column;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.tiktok-loader-overlay.active{display:flex}.tiktok-loader-circle{border:6px solid #00f2ea;border-color:#00f2ea #ff0050 #0000000f #0000000f;border-radius:50%;width:70px;height:70px;margin-bottom:18px;animation:1s linear infinite tiktok-spin}.tiktok-loader-text{color:#111827;opacity:.7;font-size:14px}@keyframes tiktok-spin{to{transform:rotate(360deg)}}@media (max-width:700px){.card{flex-direction:column;align-items:flex-start}.btn{margin:0 auto}.calendar-img{max-width:240px;margin-bottom:16px}.months-inner{padding-left:0}}
