/* Daily streak card on the app home (app-streak.js). */
.sk { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: center; margin: 18px 0 6px; padding: 20px 22px; overflow: hidden; color: #cdd2da; background: radial-gradient(80% 140% at 0% 50%, rgba(249, 115, 22, 0.18), transparent 60%), radial-gradient(60% 120% at 100% 0%, rgba(34, 197, 94, 0.12), transparent 60%), linear-gradient(160deg, #0d1733, #0a1020); border: 1px solid rgba(249, 115, 22, 0.28); border-radius: 18px; box-shadow: 0 30px 70px -40px rgba(249, 115, 22, 0.6); animation: sk-in 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.sk[hidden] { display: none; }
.sk.is-cold { border-color: rgba(124, 196, 255, 0.25); background: radial-gradient(80% 140% at 0% 50%, rgba(124, 196, 255, 0.12), transparent 60%), linear-gradient(160deg, #0d1733, #0a1020); box-shadow: none; }
.sk-stage { position: relative; display: flex; align-items: center; gap: 12px; perspective: 600px; }
.sk-orb { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 50% 62%, rgba(251, 146, 60, 0.45), rgba(234, 88, 12, 0.12) 55%, transparent 72%); box-shadow: inset 0 0 30px rgba(251, 146, 60, 0.35), 0 0 50px rgba(249, 115, 22, 0.35); transform-style: preserve-3d; transition: transform 0.2s ease-out; animation: sk-bob 4s ease-in-out infinite; }
.sk.is-cold .sk-orb { background: radial-gradient(circle at 50% 62%, rgba(124, 196, 255, 0.25), transparent 70%); box-shadow: inset 0 0 24px rgba(124, 196, 255, 0.2); }
.sk-flame { position: absolute; left: 50%; bottom: 18px; width: 54px; height: 70px; transform: translateX(-50%) translateZ(20px); filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.8)); }
.sk-flame span { position: absolute; left: 50%; bottom: 0; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform-origin: 50% 100%; }
.sk-f1 { width: 54px; height: 70px; margin-left: -27px; background: linear-gradient(to top, #ea580c, #f97316 45%, #fb923c 70%, rgba(253, 186, 116, 0)); animation: sk-flick 1.4s ease-in-out infinite; }
.sk-f2 { width: 40px; height: 54px; margin-left: -20px; background: linear-gradient(to top, #f97316, #fbbf24 60%, rgba(253, 224, 71, 0)); animation: sk-flick 1.1s ease-in-out infinite reverse; }
.sk-f3 { width: 24px; height: 34px; margin-left: -12px; background: linear-gradient(to top, #fde68a, #fffbeb 70%, rgba(255, 255, 255, 0)); animation: sk-flick 0.9s ease-in-out infinite; }
.sk-f4 { width: 12px; height: 14px; margin-left: -6px; bottom: 2px !important; background: #fff; opacity: 0.85; border-radius: 50% !important; }
.sk.is-cold .sk-flame { filter: drop-shadow(0 0 8px rgba(124, 196, 255, 0.6)); opacity: 0.55; }
.sk.is-cold .sk-f1 { background: linear-gradient(to top, #1d4ed8, #3b82f6 50%, rgba(147, 197, 253, 0)); }
.sk.is-cold .sk-f2 { background: linear-gradient(to top, #3b82f6, #93c5fd 60%, rgba(219, 234, 254, 0)); }
.sk.is-cold .sk-f3 { background: linear-gradient(to top, #dbeafe, rgba(255, 255, 255, 0)); }
.sk-embers { position: absolute; left: -20%; top: -60%; width: 140%; height: 150%; pointer-events: none; }
.sk-num { display: flex; flex-direction: column; line-height: 1; }
.sk-num strong { color: #fff; font: 700 2.8rem/1 "Space Grotesk", Inter, sans-serif; text-shadow: 0 0 24px rgba(249, 115, 22, 0.6); animation: sk-pop 0.7s 0.2s cubic-bezier(0.2, 0.9, 0.2, 1.4) both; }
.sk-num span { margin-top: 4px; color: #fdba74; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sk.is-cold .sk-num strong { text-shadow: none; } .sk.is-cold .sk-num span { color: #93c5fd; }
.sk-kicker { color: #fb923c; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sk-title { margin: 4px 0 4px; color: #f1f4fa; font: 700 1.2rem/1.25 "Space Grotesk", Inter, sans-serif; }
.sk-sub { margin: 0 0 12px; color: #aab2c3; font-size: 0.86rem; line-height: 1.5; }
.sk-week { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.sk-week li { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: sk-up 0.4s ease-out both; }
.sk-dot { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 50%; }
.sk-dot svg { width: 14px; height: 14px; }
.sk-week li.is-on .sk-dot { background: linear-gradient(135deg, #f97316, #ea580c); border: 0; box-shadow: 0 6px 14px -6px rgba(249, 115, 22, 0.9); }
.sk-week li.is-today .sk-dot { outline: 2px solid rgba(251, 191, 36, 0.8); outline-offset: 2px; }
.sk-week small { color: #8f97a8; font-size: 0.66rem; }
.sk-week li.is-today small { color: #fbbf24; font-weight: 700; }
.sk-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.78rem; }
.sk-next svg { flex: none; width: 18px; height: 18px; color: #fbbf24; }
.sk-next > span { flex: 1 1 auto; color: #cdd2da; }
.sk-next em { color: #8f97a8; font-style: normal; }
.sk-bar { flex: 1 1 100%; height: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.07); border-radius: 999px; }
.sk-bar b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f97316, #fbbf24); border-radius: inherit; transition: width 1.1s cubic-bezier(0.2, 0.9, 0.2, 1); }
.sk-goals { padding: 14px; background: rgba(4, 8, 18, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; }
.sk-ghead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sk-ghead > div:last-child strong { display: block; color: #f1f4fa; font-size: 0.92rem; }
.sk-ghead > div:last-child span { color: #8f97a8; font-size: 0.74rem; }
.sk-ring { --p: 0; position: relative; display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(#22c55e calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0); transition: --p 1s; }
.sk-ring::before { content: ""; position: absolute; inset: 5px; background: #0b1328; border-radius: 50%; }
.sk-ring strong { position: relative; color: #fff; font: 700 0.84rem/1 Inter, sans-serif; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.sk-glist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sk-glist li { animation: sk-up 0.4s ease-out both; }
.sk-glist a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: inherit; text-decoration: none; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; transition: border-color 0.15s, transform 0.15s; }
.sk-glist a:hover { border-color: rgba(34, 197, 94, 0.5); transform: translateX(3px); }
.sk-glist a:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.sk-gic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: #7cc4ff; background: rgba(124, 196, 255, 0.1); border-radius: 9px; }
.sk-gic svg { width: 15px; height: 15px; }
.sk-glist li.is-done .sk-gic { color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); animation: sk-pop 0.5s cubic-bezier(0.2, 0.9, 0.2, 1.5); }
.sk-gtx strong { display: block; color: #e8ecf5; font-size: 0.84rem; }
.sk-gtx small { color: #8f97a8; font-size: 0.72rem; }
.sk-glist li.is-done .sk-gtx strong { color: #86efac; }
.sk-party { position: absolute; left: 18px; bottom: 14px; z-index: 3; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 14px; color: #1f1300; background: linear-gradient(135deg, #fde68a, #fbbf24); border-radius: 12px; box-shadow: 0 16px 34px -14px rgba(251, 191, 36, 0.9); animation: sk-drop 0.6s cubic-bezier(0.2, 0.9, 0.2, 1.3) both; transition: opacity 0.4s, transform 0.4s; }
.sk-party.is-out { opacity: 0; transform: translateY(-10px); }
.sk-party svg { grid-row: 1 / 3; width: 26px; height: 26px; }
.sk-party strong { font-size: 0.95rem; } .sk-party span { font-size: 0.76rem; }
.sk-conf { position: absolute; top: -10px; z-index: 2; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: sk-fall 1.8s ease-in forwards; }
/* The flame, its glow, the day dots and the goal ring are true circles and drawings: they keep their round shapes
   (square.css squares everything else; its comment asks new circles to say so). */
.sk-orb, .sk-dot, .sk-ring { border-radius: 50% !important; }
.sk-f1, .sk-f2, .sk-f3 { border-radius: 50% 50% 46% 46% / 62% 62% 38% 38% !important; }
.sk-f4 { border-radius: 50% !important; }
.sk-bar, .sk-bar b { border-radius: 999px !important; }
@keyframes sk-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes sk-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes sk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes sk-flick { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 25% { transform: scale(0.94, 1.06) rotate(2deg); } 50% { transform: scale(1.04, 0.95) rotate(-1deg); } 75% { transform: scale(0.97, 1.04) rotate(3deg); } }
@keyframes sk-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes sk-drop { from { opacity: 0; transform: translateY(-16px) scale(0.9); } }
@keyframes sk-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(320px) rotate(var(--r)); opacity: 0; } }
@media (max-width: 1100px) { .sk { grid-template-columns: 170px minmax(0, 1fr); } .sk-goals { grid-column: 1 / -1; } }
@media (max-width: 620px) {
  .sk { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .sk-stage { justify-content: center; }
  .sk-mid { text-align: center; } .sk-week { justify-content: center; gap: 6px; } .sk-dot { width: 28px; height: 28px; }
  .sk-next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .sk, .sk-orb, .sk-flame span, .sk-num strong, .sk-week li, .sk-glist li, .sk-glist li.is-done .sk-gic, .sk-party, .sk-conf { animation: none; } }