body {
margin: 0;
font-family: Arial, sans-serif;
background: #212121;
color: #e6edf3;
padding: 30px;
}

.container {
max-width: 1100px;
margin: auto;
}

.card {
background:  #2f2f2f;;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}

h1, h2 {
margin-top: 0;
}

.stats {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
gap: 15px;
}

.stat-box {
background: #0d1117;
border: 1px solid #30363d;
border-radius: 10px;
padding: 15px;
}

.stat-number {
font-size: 28px;
font-weight: bold;
color: #56d364;
}

.progress-bar {
width: 100%;
height: 14px;
background: #21262d;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}

.progress-fill {
height: 100%;
width: 1%;
background: #2ea043;
}

.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tag {
background: #21262d;
padding: 8px 14px;
border-radius: 999px;
font-size: 14px;
border: 1px solid #30363d;
}


.heatmap-wrapper {
overflow-x: auto;
}

.month-labels {
display: grid;
grid-template-columns: repeat(53, 16px);
gap: 4px;
margin-left: 35px;
margin-bottom: 8px;
font-size: 12px;
color: #8b949e;
}

.heatmap-body {
display: flex;
gap: 8px;
}

.day-labels {
display: grid;
grid-template-rows: repeat(7, 16px);
gap: 4px;
font-size: 11px;
color: #8b949e;
}

.day-labels span {
height: 16px;
}

.heatmap {
display: grid;
grid-template-rows: repeat(7, 16px);
grid-auto-flow: column;
grid-auto-columns: 16px;
gap: 4px;
}

.square {
width: 16px;
height: 16px;
border-radius: 3px;
background: #212121;
}
.l0 { background:  #262626; }
.l1 { background: #0e4429; }
.l2 { background: #006d32; }
.l3 { background: #26a641; }
.l4 { background: #39d353; }

ul {
padding-left: 20px;
}

.badge {
display: inline-block;
background: #1f6feb;
padding: 8px 14px;
border-radius: 999px;
margin: 5px;
font-size: 14px;
}

.books-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.books-table th {
text-align: left;
padding: 14px;
border-bottom: 1px solid #30363d;
color: #8b949e;
}

.books-table td {
padding: 14px;
border-bottom: 1px solid #21262d;
}

.book-title {
color: #58a6ff;
font-weight: 600;
}

.status-pill {
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}

.completed {
background: rgba(46, 160, 67, 0.15);
color: #3fb950;
}

.reading {
background: rgba(31, 111, 235, 0.15);
color: #58a6ff;
}

.tooltip-box {
position: relative;
display: inline-block;
cursor: pointer;
}

.tooltip-text {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
position: absolute;
bottom: 120%;
left: 0;
background: #0d1117;
color: #e6edf3;
border: 1px solid #30363d;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
white-space: nowrap;
z-index: 100;
}

.tooltip-box:hover .tooltip-text {
visibility: visible;
opacity: 1;
}

canvas {
width: 100%;
max-height: 320px;
margin-top: 20px;
}