#archive-container {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    font-family: 'Inter', sans-serif;
    margin-top: 16px;
}

.button-container {
    display: flex;
    gap: 8px;
}

h1 {
    font-family: 'Merriweather';
}

.archive-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin: 6px 0;
    border-radius: 6px;
    background-color: #f4f4f4;
}

.archive-tab {
    font-size: 16px;
}

.archive-item p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.play-button {
    padding: 8px 12px;
    background-color: #F7DA21;
    color: black;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Inter';
}

.play-button.daily-button {
    padding: 8px 12px;
    background-color: #71BFEB;
    color: black;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Inter';
}

#back-to-menu {
    margin-top: 0px;
    padding: 12px 20px;
    font-size: 16px;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.today-item {
    background-color: white;

}


/* --- archive page --- */
#archive-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top: 24px;
}
@media(max-width:520px){
  #archive-list{ grid-template-columns:repeat(3,1fr); }
}

.day-tile.disabled{
  background:transparent;              /* no grey card */
  border:none;
  cursor:default; pointer-events:none; /* never clickable */
  transform:none !important;
  filter:none !important;
  color:#9a9a9a;                       /* light grey text */
}
.day-tile.disabled .weekday,
.day-tile.disabled .date{ color:inherit; }

.day-tile{
  padding:14px 8px;
  border-radius:8px;
  background:#F4F4F4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  cursor:pointer;
  transition:.15s transform,.15s background-color;
}
.day-tile:hover{ transform:translateY(-2px); }

.day-tile.completed{
  background:#71BFEB;        /* main brand blue */ /*  Matches colour already used in UI */
  color:#fff;
}
.day-tile.completed .weekday,
.day-tile.completed .date{ color:#fff; }

.day-tile.disabled .countdown{
  font-size:20px; font-weight:600;
}


#weekly-summary{
  font-family:'Inter',sans-serif;
  font-weight:600;
  margin:4px 0 12px;
  color:#444;
}



#calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:8px}
#weekday-header{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:24px;font-weight:600}
.weekday-label{padding:4px 0}
.day-tile{aspect-ratio:1/1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:500;cursor:pointer;user-select:none;padding: 0px;}
.day-tile.other,.day-tile.future{background:#ffffff;color:#aaa;cursor:default}
.day-tile.normal{background:#EAEAEA}
.day-tile.completed{background:#71BFEB;color:#fff}
.day-tile:hover{transform:translateY(-2px)}
.day-tile.future:hover, .day-tile.other:hover{transform:translateY(0px)}
#month-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0;padding:16px 0;background:#f4f4f4;border-radius:8px;font-weight:600}
#month-summary div{font-size:14px;line-height:1.2}
#month-summary span{font-size:28px}

.archive-tabbar{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
}

.archive-tab{
  padding:6px 14px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-family:inherit;
  background:#EAEAEA;
  color:#000;
}

.archive-tab.active{
  background:#2F2F2F;
  color:#fff;
}

.dim{opacity:.3}

  .modal {
    position: absolute;
    top: 0px;
    width: 100%;
    max-width: 534px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    z-index: 999;
    overflow: hidden;
    justify-content: space-between;
  }

.modal-content   { background:#71BFEB; padding:20px 24px; border-radius:8px; width:260px; text-align:center }
#nameError       { color:#d00; margin-top:4px; height:16px; font-size:.9rem }


#title-row {
  display:flex;
  justify-content:space-between;  /* pushes ends apart */
  align-items:center;             /* vertical align */
  margin-bottom:12px;
}

#month-title { margin:0; font-size:1.8rem; }

/* keep the badge look */
#user-badge { font-weight:600; cursor:pointer }


h2, h4, p {
margin: 0px;
}

/* PROFILE MODAL */
.profile-modal{

  width:100%; background:#71BFEB;}

.profile-head{display:flex;justify-content:space-between;align-items:center;margin:0px;}
.profile-subline{display:flex;justify-content:space-between;align-items:center;
                 font-size:16px;margin:0px; width: 100%;color:#0B3750;}
#editUsername{background:none;border:none;cursor:pointer;text-decoration:underline;margin:0px;font-size:16px;}

.profile-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px
}
.profile-stats h4{margin:0;font-size:14px;font-weight:600;color:#0B3750;margin-bottom:8px;}
.profile-stats p {margin:0;font-size:28px;font-weight:600}



h2 {
  font-family: 'Merriweather';
  font-size: 40px;
}

#closeProfile {
  cursor: pointer;
}

#usernameBadge {
  padding: 4px 12px;
  background-color: #F7DA21;
  border-radius: 4px;
}

#profile-info {
display:flex;flex-direction: column;align-items: start;gap: 4px; width: 100%;
margin-bottom: 24px;
}

#profileUsername {
  margin-top: -4px;
}