*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(135deg,#f0f7ff,#fff7fb);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:20px;
  color:#1f2937;
}

header{text-align:center;margin-bottom:20px}
header h1{font-size:2rem;font-weight:700}

.app{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:20px;
  flex:1;
}

.card{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-radius:14px;
  padding:20px;
  box-shadow:0 8px 30px rgba(9,30,63,0.08);
}

.circle{
  width:200px;height:200px;margin:0 auto;position:relative;
}
.circle svg{width:100%;height:100%;transform:rotate(-90deg)}
.circle circle{fill:none;stroke:#e6eef9;stroke-width:12}
#progressCircle{stroke-linecap:round;transition:stroke-dashoffset 1s linear, stroke 0.5s linear;}
.time{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:700;color:#0f172a;
}

.status{ text-align:center;margin:10px 0;font-weight:600 }
.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px 0}
button{
  display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;
  border:0;cursor:pointer;font-weight:600;background:#10b981;color:white;
}
button.secondary{background:#3b82f6}
button.ghost{background:transparent;color:#374151;border:1px solid rgba(55,65,81,0.08)}
button.warn{background:#ef4444}

ul{list-style:none;margin-top:10px}
li.item{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px;margin-top:5px;background:#f1f8ff;border-radius:8px;
}

.schedule-list li{
  display:flex;justify-content:space-between;align-items:center;padding:10px;margin-top:5px;
  background:#fff7ed;border-radius:8px;
}

/* Footer destacado */
footer{
  text-align:center;
  padding:20px;
  margin-top:20px;
  font-size:1rem;
  color:#1f2937;
  font-weight:700;
  background: rgba(255,255,255,0.95);
  border-top:2px solid #10b981;
}

footer a{
  color:#10b981;          
  text-decoration:none;
}

footer a:hover{
  text-decoration:underline;
}

/* Formulário Cronograma - Campos maiores */
form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:15px;
  align-items:center;
}

input[type=text], input[type=time]{
  padding:14px;
  border-radius:10px;
  border:1px solid #e6eef9;
  font-size:1.1rem;
}

input[type=text]{ flex:2; }       
input[type=time]{ flex:1; }       

button.secondary{
  padding:12px 16px;
  font-size:1rem;
}