.checkins-section { margin-top:54px; padding-bottom:42px; }
.checkins-heading,.checkins-section-title,.checkin-today-row,.checkin-category-footer,.checkin-category-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.checkins-heading { align-items:flex-end; margin-bottom:28px; }.checkins-heading h2 { margin:4px 0 6px; font-size:28px; color:#20263a; }.checkins-heading p:not(.eyebrow) { margin:0; color:#7a8397; font-size:13px; }
.checkins-add-button { display:inline-flex; align-items:center; gap:7px; border:0; border-radius:8px; padding:11px 15px; background:#715cf2; color:#fff; font-weight:700; box-shadow:0 7px 16px rgba(91,72,219,.2); }.checkins-add-button span { font-size:20px; line-height:12px; }.checkins-add-button:hover { background:#6753eb; transform:translateY(-1px); }
.checkins-boards { margin-top:34px; padding-top:18px; border-top:1px solid #e5e7ef; }.checkins-board-list { display:grid; gap:16px; }.checkin-project-board { min-width:0; padding:17px 18px 14px; border:1px solid #e2e6ed; border-radius:8px; background:#fff; box-shadow:0 9px 25px rgba(38,49,65,.045); }.checkin-board-header { display:grid; grid-template-columns:minmax(145px,1fr) auto auto; align-items:center; gap:14px; margin-bottom:17px; }.checkin-board-identity { display:flex; align-items:center; min-width:0; gap:10px; }.checkin-board-identity > span { width:10px; height:32px; flex:0 0 auto; border-radius:3px; background:var(--board-color); }.checkin-board-identity h4 { overflow:hidden; margin:0; color:#263047; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.checkin-board-identity p { margin:4px 0 0; color:#8a93a4; font-size:10px; }.checkin-board-stats { display:flex; gap:14px; color:#8c94a4; font-size:9px; }.checkin-board-stats span { white-space:nowrap; }.checkin-board-stats strong { margin-right:2px; color:#364158; font:600 12px "DM Mono",monospace; }.checkin-board-actions { display:flex; align-items:center; gap:6px; }.checkin-board-actions button { min-height:29px; border:1px solid #dfe3eb; border-radius:7px; padding:5px 9px; background:#fff; color:#657087; font-size:10px; }.checkin-board-actions button:hover { border-color:color-mix(in srgb,var(--board-color) 65%,#ccd2dc); background:color-mix(in srgb,var(--board-color) 18%,white); color:#3f4a60; }.checkin-board-actions .checkin-board-today { border-color:color-mix(in srgb,var(--board-color) 65%,#ccd2dc); color:#3f4a60; font-weight:700; }.checkin-board-actions .checkin-board-today.is-done { background:color-mix(in srgb,var(--board-color) 24%,white); }.checkin-board-actions .checkin-delete { width:29px; min-width:29px; padding:0; color:#a2a8b5; font-size:18px; }
.checkin-board-map-shell { display:grid; grid-template-columns:24px minmax(0,1fr); gap:0 8px; width:100%; min-width:0; }.checkin-board-map-scroll { min-width:0; overflow-x:auto; overflow-y:hidden; padding:0 1px 7px; scrollbar-color:#c9cfda transparent; scrollbar-width:thin; }.checkin-board-map-scroll:not(.has-history) { overflow-x:hidden; padding-bottom:0; }.checkin-board-map-scroll::-webkit-scrollbar { height:6px; }.checkin-board-map-scroll::-webkit-scrollbar-track { background:transparent; }.checkin-board-map-scroll::-webkit-scrollbar-thumb { border-radius:999px; background:#c9cfda; }.checkin-board-map-scroll::-webkit-scrollbar-thumb:hover { background:#aeb6c5; }.checkin-board-map { min-width:0; }.checkin-board-months { display:grid; grid-template-columns:repeat(var(--board-weeks,53),minmax(0,1fr)); gap:2px; height:18px; color:#8f97a5; font-size:8px; }.checkin-board-months span { overflow:visible; white-space:nowrap; }.checkin-board-map-grid { display:grid; grid-template-columns:repeat(var(--board-weeks,53),minmax(0,1fr)); grid-template-rows:repeat(7,minmax(0,1fr)); grid-auto-flow:column; gap:2px; width:100%; }.checkin-board-weekdays { display:grid; grid-template-rows:repeat(7,minmax(0,1fr)); gap:2px; min-width:24px; overflow:visible; padding-top:18px; padding-bottom:7px; color:#8f97a8; font-size:9px; white-space:nowrap; }.checkin-board-weekdays span { display:grid; min-width:24px; place-items:center; }.checkin-board-cell { position:relative; width:100%; min-width:0; aspect-ratio:1; overflow:hidden; border:0; border-radius:clamp(1px,.22vw,3px); padding:0; background:#eef1f3; box-shadow:inset 0 0 0 1px rgba(38,49,65,.025); }.checkin-board-cell:not(span) { cursor:pointer; }.checkin-board-cell:not(span):hover { z-index:2; transform:scale(1.35); box-shadow:0 3px 8px rgba(36,52,71,.18); }.checkin-board-cell.is-before-start,.checkin-board-cell.is-future { opacity:.35; }.checkin-board-cell.is-skipped::after { content:""; position:absolute; top:20%; left:45%; width:1px; height:60%; border-radius:2px; background:#aeb5c0; transform:rotate(40deg); }.checkin-board-cell.is-complete { background:var(--board-color); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--board-color) 75%,#536174); }.checkin-board-cell.is-complete::after { display:none; }.checkin-board-cell.is-complete.is-forced::after { display:block; content:"+"; top:50%; left:50%; width:auto; height:auto; background:transparent; color:#fff; font:700 clamp(5px,.55vw,9px)/1 "DM Mono",monospace; transform:translate(-50%,-50%); }.checkin-board-cell.is-today { outline:2px solid #29364a; outline-offset:1px; }.checkin-board-legend { display:flex; align-items:center; justify-content:flex-end; gap:13px; margin-top:8px; color:#969daa; font-size:8px; }.checkin-board-legend span { display:flex; align-items:center; gap:4px; }.checkin-board-legend i { position:relative; width:9px; height:9px; border-radius:2px; background:#eef1f3; }.checkin-board-legend i.is-skipped::after { content:""; position:absolute; top:2px; left:4px; width:1px; height:6px; background:#aeb5c0; transform:rotate(40deg); }.checkin-board-legend i.is-complete { background:var(--board-color); }.checkin-board-legend i.is-forced { background:var(--board-color); }.checkin-board-legend i.is-forced::after { content:"+"; position:absolute; inset:0; color:#fff; font:700 7px/9px "DM Mono",monospace; text-align:center; }
.checkin-makeup-dialog { width:min(400px,calc(100% - 32px)); }.checkin-makeup-name { margin:-7px 0 0; color:#313b51; font-size:14px; font-weight:700; }.checkin-makeup-hint { margin:-7px 0 0; color:#9299a7; font-size:10px; }.checkin-makeup-dialog input[type="date"] { width:100%; border:1px solid #dde1eb; border-radius:8px; padding:10px 11px; color:#283046; font:13px "Noto Sans SC",sans-serif; outline-color:#715cf2; }
.checkins-activity { margin-bottom:34px; padding:22px 0 20px; border-top:1px solid #e5e7ef; border-bottom:1px solid #e5e7ef; }
.checkins-activity-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; margin-bottom:19px; }.checkins-activity-header h3 { margin:4px 0 0; color:#20263a; font-size:18px; }.checkins-activity-summary { display:flex; justify-content:flex-end; gap:20px; color:#8a92a3; font-size:11px; }.checkins-activity-summary span { white-space:nowrap; }.checkins-activity-summary strong { margin-right:3px; color:#30394e; font:600 15px "DM Mono",monospace; }
.checkins-view-switch { display:flex; align-items:center; padding:3px; border:1px solid #e1e4eb; border-radius:8px; background:#f7f8fa; }.checkins-view-switch button { min-width:45px; padding:6px 9px; border:0; border-radius:6px; background:transparent; color:#8a91a0; font-size:11px; }.checkins-view-switch button:hover { color:#48627f; }.checkins-view-switch button.is-active { background:#fff; color:#27374a; font-weight:700; box-shadow:0 2px 7px rgba(39,52,70,.09); }
.checkins-activity-chart { min-height:151px; }.checkin-heatmap-shell { display:grid; grid-template-columns:18px minmax(0,1fr); gap:0 8px; position:relative; }.checkin-heatmap-scroll { min-width:0; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }.checkin-heatmap-scroll::-webkit-scrollbar { display:none; }.checkin-heatmap-months { display:grid; grid-template-columns:repeat(53,12px); column-gap:3px; width:max-content; height:20px; color:#8b93a2; font-size:10px; }.checkin-heatmap-months span { white-space:nowrap; }.checkin-heatmap-grid { display:grid; grid-template-rows:repeat(7,12px); grid-auto-flow:column; grid-auto-columns:12px; gap:3px; width:max-content; }.checkin-heatmap-weekdays { display:grid; grid-template-rows:repeat(7,12px); gap:3px; padding-top:20px; color:#a0a6b1; font-size:9px; }.checkin-heatmap-cell { width:12px; height:12px; border-radius:3px; background:#f0f2f4; box-shadow:inset 0 0 0 1px rgba(36,50,66,.025); transition:transform 100ms ease,box-shadow 100ms ease; }.checkin-heatmap-cell:hover { position:relative; z-index:2; transform:scale(1.45); box-shadow:0 3px 8px rgba(32,71,108,.18); }.checkin-heatmap-cell.level-1,.checkin-activity-legend .level-1 { background:#d7ebff; }.checkin-heatmap-cell.level-2,.checkin-activity-legend .level-2 { background:#9ed1ff; }.checkin-heatmap-cell.level-3,.checkin-activity-legend .level-3 { background:#57a8ef; }.checkin-heatmap-cell.level-4,.checkin-activity-legend .level-4 { background:#1879d1; }.checkin-heatmap-cell.is-today { box-shadow:0 0 0 2px #202c3d; }.checkin-heatmap-cell.is-future { opacity:.35; }.checkin-activity-legend { grid-column:2; display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:10px; color:#969daa; font-size:9px; }.checkin-activity-legend i { width:10px; height:10px; border-radius:3px; background:#f0f2f4; }
.checkin-weekly-activity { padding-top:7px; }.checkin-week-bars { display:grid; grid-template-columns:repeat(52,minmax(5px,1fr)); align-items:end; gap:5px; height:105px; padding:0 2px; border-bottom:1px solid #e8eaf0; background:repeating-linear-gradient(to top,transparent 0,transparent 25px,#f1f3f6 26px); }.checkin-week-bar { display:flex; align-items:flex-end; height:100%; }.checkin-week-bar i { display:block; width:100%; height:var(--activity-height); min-height:4px; border-radius:3px 3px 1px 1px; background:linear-gradient(180deg,#78bfff,#1e7fd6); transition:height 180ms ease,filter 120ms ease; }.checkin-week-bar:hover i { filter:saturate(1.25) brightness(.92); }.checkin-week-axis { display:flex; justify-content:space-between; margin-top:8px; color:#949ba9; font-size:9px; }
.checkin-cumulative-activity { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.checkin-month-total { padding:11px 12px; border:1px solid #e5e8ef; border-radius:7px; background:#fff; }.checkin-month-total div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }.checkin-month-total strong { color:#384258; font-size:12px; }.checkin-month-total div span,.checkin-month-total small { color:#9299a8; font-size:9px; }.checkin-month-total i { display:block; height:5px; margin:9px 0 6px; overflow:hidden; border-radius:4px; background:#eef1f4; }.checkin-month-total i span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a8d7ff,#2587dd); }
.checkins-today,.checkins-library { border-top:1px solid #e5e7ef; padding-top:18px; }.checkins-library { margin-top:34px; }.checkins-section-title { margin-bottom:14px; }.checkins-section-title h3 { margin:4px 0 0; color:#20263a; font-size:18px; }.checkins-section-title > span { color:#8a91a2; font:11px "DM Mono",monospace; }
.checkins-today-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.checkin-today-row { min-height:76px; padding:13px 14px; border:1px solid #e4e7f0; border-radius:8px; background:#fff; box-shadow:0 8px 20px rgba(37,44,65,.035); }.checkin-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--checkin-color); box-shadow:0 0 0 4px color-mix(in srgb,var(--checkin-color) 25%,white); }.checkin-today-row > div { flex:1; min-width:0; }.checkin-today-row strong { display:block; color:#293147; font-size:14px; }.checkin-today-row p { margin:4px 0 0; color:#8590a3; font-size:11px; }.checkin-today-row button,.checkin-category-footer button { border:1px solid color-mix(in srgb,var(--checkin-color) 65%,#c9cdd7); border-radius:7px; padding:7px 10px; background:#fff; color:#46516a; font-size:12px; font-weight:700; }.checkin-today-row button:hover,.checkin-category-footer button:hover { background:color-mix(in srgb,var(--checkin-color) 25%,white); }.checkin-today-row.is-complete { background:#fafbfc; }.checkin-today-row.is-complete strong { color:#8d95a4; text-decoration:line-through; }.checkin-today-row.is-complete button { border-color:#dce0e7; color:#8b93a1; }
.checkins-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.checkin-category-card { min-height:170px; padding:15px; border:1px solid #e3e6ee; border-top:4px solid var(--checkin-color); border-radius:8px; background:#fff; box-shadow:0 8px 20px rgba(37,44,65,.04); transition:transform 150ms ease,box-shadow 150ms ease; }.checkin-category-card:hover { transform:translateY(-2px); box-shadow:0 12px 25px rgba(37,44,65,.08); }.checkin-category-card-top { min-height:18px; }.checkin-color-mark { width:22px; height:8px; border-radius:2px; background:var(--checkin-color); }.checkin-delete { width:26px; height:26px; border:0; border-radius:6px; background:transparent; color:#a2a8b5; font-size:20px; line-height:1; }.checkin-delete:hover { background:#fff1f2; color:#b75762; }.checkin-category-card h4 { margin:20px 0 7px; color:#273047; font-size:15px; }.checkin-schedule { margin:0; color:#8490a4; font-size:11px; }.checkin-category-footer { margin-top:27px; }.checkin-category-footer span { color:#788398; font-size:11px; }
.checkin-empty { grid-column:1 / -1; margin:0; padding:24px; border:1px dashed #dce0e9; border-radius:8px; color:#8a92a2; font-size:13px; text-align:center; }
.checkin-dialog { width:min(500px,calc(100% - 32px)); border:0; border-radius:16px; padding:0; box-shadow:0 22px 54px rgba(34,40,60,.22); }.checkin-dialog::backdrop { background:rgba(38,43,58,.28); backdrop-filter:blur(4px); }.checkin-dialog form { display:grid; gap:17px; position:relative; padding:30px; }.checkin-dialog .dialog-close { top:14px; right:14px; }.checkin-dialog h2 { margin:0; padding-right:34px; color:#252c40; font-size:24px; }.checkin-dialog label { display:grid; gap:7px; color:#687287; font-size:12px; }.checkin-dialog input[type="text"],.checkin-dialog input[type="number"],.checkin-dialog input:not([type]) { width:100%; border:1px solid #dde1eb; border-radius:8px; padding:10px 11px; color:#283046; font:13px "Noto Sans SC",sans-serif; outline-color:#715cf2; }.checkin-dialog fieldset { min-width:0; margin:0; padding:0; border:0; }.checkin-dialog legend { margin-bottom:9px; color:#687287; font-size:12px; }.checkin-color-palette { display:flex; flex-wrap:wrap; gap:8px; }.checkin-color-swatch { width:27px; height:27px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #d8dce5; }.checkin-color-swatch.is-selected { box-shadow:0 0 0 2px #715cf2; transform:scale(1.08); }.checkin-custom-color { display:flex !important; width:max-content; align-items:center; gap:8px; margin-top:12px; }.checkin-custom-color input { width:28px; height:28px; padding:0; border:0; background:transparent; }.checkin-interval-options { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid #dfe2ec; border-radius:8px; }.checkin-interval-options label { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 6px; border-right:1px solid #dfe2ec; color:#566077; white-space:nowrap; cursor:pointer; }.checkin-interval-options label:last-child { border:0; }.checkin-interval-options input { width:14px; height:14px; flex:0 0 14px; margin:0; padding:0; accent-color:#715cf2; }.checkin-frequency-panel { margin-top:13px; padding:12px; border:1px solid #e4e5f0; border-radius:8px; background:#fafaff; }.checkin-frequency-panel p { margin:0 0 10px; color:#798397; font-size:11px; }.checkin-frequency-panel label { display:flex; align-items:center; gap:8px; }.checkin-frequency-panel input[type="number"] { width:75px; }.checkin-day-options { display:flex; flex-wrap:wrap; gap:7px; }.checkin-day-choice { display:block !important; position:relative; }.checkin-day-choice input { position:absolute; opacity:0; }.checkin-day-choice span { display:grid; width:31px; height:29px; place-items:center; border:1px solid #dfe3ec; border-radius:6px; background:#fff; color:#6b758a; font-size:11px; }.checkin-day-choice input:checked + span { border-color:#8c7cf1; background:#eeebff; color:#5e4fd2; font-weight:700; }.checkin-form-error { min-height:17px; margin:-8px 0 0; color:#c65d69; font-size:11px; }
@media(min-width:621px){.sidebar{position:sticky;top:0;align-self:start;height:100dvh;min-height:0;overflow-y:auto;scrollbar-width:none}.sidebar::-webkit-scrollbar{display:none}}@media(max-height:760px) and (min-width:621px){.sidebar{padding-top:18px;padding-bottom:18px}.nav-list{margin-top:25px}.sidebar-footer p{display:none}}
@media(max-width:1120px){.checkin-board-header{grid-template-columns:1fr auto}.checkin-board-stats{grid-column:1 / -1;grid-row:2;justify-content:flex-start}.checkins-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.checkin-cumulative-activity{grid-template-columns:repeat(3,minmax(0,1fr));}}@media(max-width:720px){.checkins-today-list,.checkins-category-grid{grid-template-columns:1fr}.checkins-heading{align-items:flex-start;flex-direction:column}.checkins-add-button{align-self:flex-end}.checkin-board-header{display:flex;align-items:flex-start;flex-wrap:wrap;gap:9px}.checkin-board-identity{flex:1 1 150px}.checkin-board-stats{order:3;width:100%;overflow-x:auto}.checkin-board-actions{order:2;margin-left:auto}.checkin-project-board{padding:14px 11px}.checkin-board-map-shell{grid-template-columns:18px minmax(0,1fr);gap:0 5px}.checkin-board-map-grid,.checkin-board-months{gap:1px}.checkin-board-weekdays{min-width:18px;gap:1px;font-size:8px}.checkin-board-weekdays span{min-width:18px}.checkin-board-legend{gap:7px}.checkin-dialog form{padding:24px 20px}.checkin-interval-options{font-size:11px}}
.checkin-board-map-scroll { padding-right:4px; }
.checkin-board-cell.is-today { outline:0; box-shadow:inset 0 0 0 1px rgba(41,54,74,.42), inset 0 0 0 999px rgba(255,255,255,.18); }
.checkin-board-cell.is-today::before { content:""; position:absolute; right:2px; bottom:2px; width:3px; height:3px; border-radius:50%; background:rgba(41,54,74,.7); pointer-events:none; }
.checkin-board-cell.is-complete.is-today { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--board-color) 75%,#536174), inset 0 0 0 2px rgba(255,255,255,.58); }
.checkin-board-cell.is-complete.is-today::before { background:rgba(255,255,255,.9); }
.checkin-heatmap-cell.is-today { box-shadow:inset 0 0 0 1px rgba(32,44,61,.48); }