.cf-attendance-methods { background: #fff; }
.cf-attendance-methods .cf-section-heading { max-width: 790px; }
.cf-attendance-method { height: 100%; padding: 1.7rem; border: 1px solid var(--cf-line); border-radius: 20px; background: #fff; }
.cf-attendance-method.featured { border-color: transparent; background: var(--cf-navy); color: #fff; box-shadow: var(--cf-shadow); }
.cf-attendance-method > span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.2rem; border-radius: 14px; background: #def7f5; color: var(--cf-cyan-dark); font-size: 1.1rem; font-weight: 900; }
.cf-attendance-method.featured > span { background: var(--cf-cyan); color: var(--cf-navy); }
.cf-attendance-method h3 { font-size: 1.2rem; }
.cf-attendance-method.featured h3 { color: #fff; }
.cf-attendance-method p { margin: 0; color: var(--cf-muted); font-size: .9rem; }
.cf-attendance-method.featured p { color: #adc0cf; }

.cf-attendance-reconcile { background: var(--cf-bg); }
.cf-attendance-board { overflow: hidden; border: 1px solid #dce7ec; border-radius: 20px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-attendance-board__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem; border-bottom: 1px solid var(--cf-line); }
.cf-attendance-board__head small,
.cf-attendance-board__head strong { display: block; }
.cf-attendance-board__head small { color: var(--cf-muted); font-size: .68rem; }
.cf-attendance-board__head > span { padding: .45rem .65rem; border-radius: 8px; background: #e3f1ff; color: #3a78bd; font-size: .67rem; font-weight: 900; }
.cf-attendance-board__filters { display: flex; gap: .45rem; padding: .8rem 1rem; background: #f5f8fa; }
.cf-attendance-board__filters span { padding: .4rem .6rem; border-radius: 8px; color: var(--cf-muted); font-size: .63rem; }
.cf-attendance-board__filters span.active { background: var(--cf-navy); color: #fff; }
.cf-attendance-row { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-top: 1px solid #edf1f3; }
.cf-attendance-row > i { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #e3f1ff; color: #3a78bd; font-size: .68rem; font-style: normal; font-weight: 900; }
.cf-attendance-row p { flex: 1; margin: 0; }
.cf-attendance-row strong,
.cf-attendance-row small { display: block; }
.cf-attendance-row small { color: var(--cf-muted); font-size: .64rem; }
.cf-attendance-row > span { padding: .35rem .5rem; border-radius: 7px; font-size: .61rem; font-weight: 900; }
.cf-attendance-row.success > span { background: #e8f8f2; color: #239b75; }
.cf-attendance-row.warning > span { background: #fff2d7; color: #9d6b11; }
.cf-attendance-row.muted > span { background: #edf1f3; color: #718294; }
.cf-attendance-board__summary { display: grid; grid-template-columns: repeat(3, 1fr); padding: .9rem; background: var(--cf-navy); color: #fff; }
.cf-attendance-board__summary > div { padding: .3rem .7rem; border-right: 1px solid rgba(255, 255, 255, .1); }
.cf-attendance-board__summary > div:last-child { border: 0; }
.cf-attendance-board__summary strong,
.cf-attendance-board__summary small { display: block; }
.cf-attendance-board__summary strong { font-size: 1.2rem; }
.cf-attendance-board__summary small { color: #9eb2c1; font-size: .61rem; }

.cf-attendance-proof { background: #fff; }
.cf-attendance-browser { transform: rotate(-1deg); }
.cf-attendance-points { margin-top: 1.5rem; }
.cf-attendance-points > div { display: flex; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--cf-line); }
.cf-attendance-points > div > span { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #def7f5; color: var(--cf-cyan-dark); font-size: .62rem; font-weight: 900; }
.cf-attendance-points p { margin: 0; }
.cf-attendance-points strong,
.cf-attendance-points small { display: block; }
.cf-attendance-points small { color: var(--cf-muted); font-size: .72rem; }

.cf-attendance-audit { background: linear-gradient(135deg, #071b2f, #113b5d); color: #fff; }
.cf-attendance-audit h2 { color: #fff; }
.cf-attendance-audit p { color: #b4c7d4; }
.cf-attendance-audit .cf-kicker { color: var(--cf-cyan); }
.cf-attendance-audit-list { margin-top: 1.5rem; }
.cf-attendance-audit-list > div { display: flex; gap: .8rem; padding: .75rem 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.cf-attendance-audit-list > div > span { color: var(--cf-cyan); font-weight: 900; }
.cf-attendance-audit-list p { margin: 0; }
.cf-attendance-audit-list strong,
.cf-attendance-audit-list small { display: block; }
.cf-attendance-audit-list small { color: #91a9b9; font-size: .72rem; }
.cf-attendance-timeline { padding: 1.25rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: rgba(255, 255, 255, .06); }
.cf-attendance-timeline__title { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.cf-attendance-timeline__title > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cf-cyan); color: var(--cf-navy); font-size: .7rem; font-weight: 900; }
.cf-attendance-timeline p { flex: 1; margin: 0; }
.cf-attendance-timeline strong,
.cf-attendance-timeline small { display: block; }
.cf-attendance-timeline small { color: #93aaba; font-size: .67rem; }
.cf-attendance-timeline__item { display: flex; align-items: center; gap: .8rem; padding: 1rem .2rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.cf-attendance-timeline__item > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; font-weight: 900; }
.cf-attendance-timeline__item > i.green { background: rgba(35, 167, 121, .16); color: #50d8a8; }
.cf-attendance-timeline__item > i.blue { background: rgba(76, 139, 223, .16); color: #7eb4fb; }
.cf-attendance-timeline__item > i.cyan { background: rgba(36, 211, 197, .14); color: var(--cf-cyan); }
.cf-attendance-timeline__item > div { flex: 1; }
.cf-attendance-timeline__item > b { color: #adc0ce; font-size: .63rem; }

.cf-attendance-insights { background: var(--cf-bg); }
.cf-attendance-stats { transform: rotate(-1deg); }

.cf-attendance-boundary { background: #fff; }
.cf-attendance-boundary-list { padding: 1.25rem; border: 1px solid var(--cf-line); border-radius: 18px; background: #f8fbfc; }
.cf-attendance-boundary-list > div { display: flex; align-items: center; gap: .75rem; padding: .8rem; border-bottom: 1px solid var(--cf-line); }
.cf-attendance-boundary-list > div:last-child { border: 0; }
.cf-attendance-boundary-list span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #def7f5; color: var(--cf-cyan-dark); font-size: .72rem; font-weight: 900; }
.cf-attendance-boundary-list .muted { color: var(--cf-muted); }
.cf-attendance-boundary-list .muted span { background: #edf1f3; color: #899aa6; }

@media (max-width: 767.98px) {
  .cf-attendance-board__filters { overflow-x: auto; }
  .cf-attendance-board__filters span { flex: 0 0 auto; }
  .cf-attendance-row { align-items: flex-start; flex-wrap: wrap; }
  .cf-attendance-row p { min-width: calc(100% - 55px); }
  .cf-attendance-row > span { margin-left: 48px; }
}