body{
font-family:Arial;
margin-top:5px;
background:#f2f2f2;
}

.programHeader{
display:flex;
gap:10px;
align-items:center;
}

.programID{
font-size:49px;
font-weight:bold;
width:35px;
text-align:center;
color:#444;
margin-top:-8px;
}

.programLines{
line-height:1.6;
}

.programLines div{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.programLines > div{
margin-bottom:6px;
}

.programLines b{
margin-left:3px;
}

.daysOnCapsule,
.daysOffCapsule{
background:#e2e2e2;
padding:3px 6px;
border-radius:10px;
font-size:12px;
}

.timeCapsule{
background:#e9e9e9;
padding:3px 6px;
border-radius:7px;
display:inline-block;
font-weight:bold;
font-size:13px;
}

.syncIcon.spin{
display:inline-block;
animation:spin 1s linear infinite;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

.nodeBubble{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:50%;
background:#ddd;
margin:2px;
font-size:13px;
}

.nodeBubble.ok{
background:#2ecc71;
color:white;
}





.node{
padding:12px;
background:#bbb;
border-radius:6px;
text-align:center;
cursor:pointer;
}

.node.active{
background:#2b6cb0;
color:white;
}

.node:hover{
background:#2b6cb0;
}

.daysRow{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:6px;
gap:3px;
}
.daysRow:last-child{
  margin-bottom:0;
}
.day-on,
.day-off{
flex:1;
padding:3px 5px;
background:#bbb;
border-radius:6px;
cursor:pointer;
user-select:none;
text-align:center;
}

.day-on.active,
.day-off.active{
background:#2b6cb0;
color:white;
}

.day-on:hover,
.day-off:hover{
background:#2b6cb0;
}

.nav{
display:flex;
gap:12px;
justify-content:center;
margin-bottom:20px;
}

.nav a{
background:#3498db;
color:white;
padding:8px 14px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
}

.label{
width:40px;
font-weight:bold;
}

.container{
margin:auto;
padding:0px;
margin-bottom:0px;
}

.editor{
background:white;
border:1px solid #ddd;
border-radius:8px;
padding:12px;
margin-bottom:10px;
}

.row{
display:flex;
gap:10px;
margin-bottom:10px;
}






.timebox{
  
font-weight:bold;
flex:1;
background:#efefef;
border-radius:8px;
padding:5px 12px;
font-size:18px;
text-align:center;
border:1px solid #d6d6d6;
margin-bottom:10px;
}

.timebox input{
width:100%;
margin-top:5px;
padding:5px;
border-radius:6px;
border:1px solid #cfcfcf;
background:white;
text-align:center;
font-size:16px;
}












.menu{
display:flex;
gap:10px;
}

.menu button{
flex:1;
padding:14px;
border:none;
border-radius:8px;
cursor:pointer;
}

.save{
background:#4caf50;
color:white;
}
.save{
  transition:0.2s;
}

.save.saved{
  background:#2ecc71;
  color:#fff;
}
.save.saved{
  transform:scale(1.05);
}

.cancel{
background:#888;
color:white;
}

.programlist{
background:white;
border-radius:10px;
border:1px solid #ddd;
padding:10px;
}

.program{
background:#f7f7f7;
border:1px solid #ddd;
border-radius:8px;
padding:12px;
margin-bottom:10px;
transition:0.2s;
}

.editBtn,
.delBtn{
background:#2b6cb0;
color:white;
border:none;
border-radius:5px;
padding:4px 8px;
cursor:pointer;
margin-left:6px;
}



.delBtn{
background:#d9534f;
}
.editBtn:hover{
background:#1f4f86;
}

.delBtn:hover{
background:#c9302c;
}



.program button{
margin-top:5px;
margin-right:5px;
}

#toggleNodes{
position:relative;
font-size:0;
}

#toggleNodes::before,
#toggleNodes::after{
content:"";
position:absolute;
background:#000;
}

#toggleNodes::before{
width:16px;
height:3px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

#toggleNodes::after{
width:3px;
height:16px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

input{
width:100%;
font-size:16px;
padding:4px;
box-sizing:border-box;
}


.nodeBubble{
  background:#ccc;
}

.nodeBubble.syncing{
  background:#f1c40f;
}

.nodeBubble.synced{
  background:#2ecc71;
}




.syncBtn{
  background:#007bff;
  color:white;
  border:none;
  border-radius:7px;
  padding:5px 9px;
  cursor:pointer;
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:bold;
  line-height:1;
}

.syncBtn:hover{
  background:#0056b3;
}

.syncBtn:disabled{
  opacity:0.8;
  cursor:default;
}

.syncCircle{
  width:13px;
  height:13px;
  border:2px solid rgba(255,255,255,0.45);
  border-top-color:white;
  border-radius:50%;
  box-sizing:border-box;
}

.syncCircle.spinning{
  animation: syncSpin 0.75s linear infinite;
}

@keyframes syncSpin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}