.checkin-panel { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
.checkin-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: 0; margin: 0; }
.checkin-days:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.checkin-days:has(> :nth-child(7):last-child) > .checkin-day { grid-column: span 3; }
.checkin-days:has(> :nth-child(7):last-child) > .checkin-day:nth-child(n+5) { grid-column: span 4; }
.checkin-day { position: relative; overflow: hidden; isolation: isolate; color: var(--text); text-align: center; font-weight: 400; line-height: 1.2; min-width: 0; display: grid; justify-items: center; gap: 0; padding: .2rem .25rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); font-size: .75rem; }
.checkin-day img { width: 18px; height: 18px; object-fit: contain; }
.checkin-day strong { white-space: nowrap; font-weight: 400; }
.checkin-symbol { display: grid; place-items: center; width: 18px; height: 18px; font-size: 1rem; }
.checkin-day.is-current { border-color: var(--accent); }
.checkin-day.is-received { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 72%); }
.checkin-day small { color: var(--text-muted); }
.checkin-claim-form { display: grid; flex: 1; margin: 0; }
.checkin-message { margin: 0; font-size: .8rem; color: var(--danger); }
.checkin-message:empty { display: none; }
.checkin-received-mark { position: absolute; top: .3rem; right: .4rem; color: var(--accent); font-weight: 800; }
.checkin-days .checkin-day.is-available { display: grid; border-color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--on-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 38%, transparent); transition: transform .18s, box-shadow .18s; }
.checkin-days .checkin-day.is-available:not(:disabled):hover { transform: translateY(-2px); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, white), var(--accent-hover)); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent); }
.checkin-days .checkin-day.is-available:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.checkin-days .checkin-day.is-available:disabled { cursor: wait; opacity: .7; }
@media(prefers-reduced-motion: reduce) { .checkin-days .checkin-day.is-available { transition: none; } .checkin-days .checkin-day.is-available:not(:disabled):hover { transform: none; } }
.checkin-reward-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.checkin-icon-edit { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.checkin-icon-edit img { object-fit: contain; }
.checkin-icon-edit [hidden] { display: none !important; }
.checkin-icon-edit small { width: 100%; overflow-wrap: anywhere; }
@media(max-width: 540px) { .checkin-reward-row { grid-template-columns: 1fr; } }

.checkin-days .checkin-day::before { position: absolute; z-index: 2; top: -28%; left: -48%; width: 32%; height: 156%; content: ''; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent), rgba(255, 255, 255, .28), color-mix(in srgb, var(--accent) 8%, transparent), transparent); filter: blur(1.2px); transform: skewX(-20deg) translateX(0); }
@keyframes checkin-day-sheen { 0% { opacity: 0; transform: skewX(-20deg) translateX(0); } 20% { opacity: .52; } 100% { opacity: 0; transform: skewX(-20deg) translateX(470%); } }
@media(hover: hover) { .checkin-days .checkin-day:not(:disabled):hover::before { animation: checkin-day-sheen .96s ease-out; } }
@media(prefers-reduced-motion: reduce) { .checkin-days .checkin-day::before { display: none; animation: none !important; } }