@font-face {
  font-family: 'MyFont';
  src: url('Nice_Sugar.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --size:260px;
  --center:calc(var(--size)/2);
}

*{
  box-sizing:border-box;
  font-family:'MyFont',sans-serif;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(#f3a670,#e6a887);
  padding:30px;
  color:#9d4f2f;
}

h2{
    color: white;
}
.app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.clock-wrap{
  width:var(--size);
  height:var(--size);
  position:relative;
}

.clock{
  width:100%;
  height:100%;
  border-radius:50%;
  background:white;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.overlay{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
}

.wedge{
  position:absolute;
  inset:10px;
  border-radius:50%;
}

.tick{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.tick .label{
  position:absolute;
  left:calc(var(--size)/2 - 280px);
  top:-6px;
  font-size:13px;
  color:#111;
}

.hand{
  position:absolute;
  width:2px;
  height:calc(var(--center) - 15px);
  background:#031532;
  left:50%;
  top:50%;
  transform-origin:bottom center;
  transform:translate(-50%,-100%);
  border-radius:4px;
  z-index:5;
}

.center{
  width:120px;
  height:120px;
  background:white;
  border-radius:50%;
  position:absolute;
  z-index:100;
  display:flex;
  justify-content:center;
  align-items:center;
}

.wiggle{
  width:80px;
  animation:wiggle 2s ease-in-out infinite;
}

@keyframes wiggle{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}

#nowAct{
  width:320px;
  min-height:44px;
  background:white;
  border:0px solid #bd6d4c;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 12px;
  margin-top:20px;
}

button.primary{
  border:none;
  background:#bd6d4c;
  color:white;
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  font-size:13px;
  margin-top: 10px;
}

.activities{
  width:100%;
  max-width:380px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.activity-item{
  padding:14px;
  border-radius:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

.meta{
  color:#7a3f27;
}

.meta div{
  font-size:13px;
}

.activity-item button{
  border:none;
  background:white;
  border-radius:999px;
  padding:7px 12px;
  cursor:pointer;
}

.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.popup.show{
  display:flex;
}

.popup-content{
  width:340px;
  background:#fff7f2;
  border-radius:30px;
  padding:24px;
  border:4px solid #bd6d4c;
  position:relative;
}

.close-btn{
  position:absolute;
  top:12px;
  right:12px;
  border:none;
  width:34px;
  height:34px;
  border-radius:50%;
  cursor:pointer;
}

input{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:2px solid #f0d4c5;
  margin-top:6px;
}

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

.row>*{
  flex:1;
}

label{
  display:block;
  margin-top:12px;
}
.top-buttons{
  display:flex;
  gap:12px;
  margin-top:10px;
}

.top-buttons button{
  width:160px !important;
}

button.danger{
  margin-top:12px;
  padding:10px 12px;
  border-radius:999px;
  border:none;
  background:#fff;
  color:#bd6d4c;
  border:3px solid #bd6d4c;
  font-weight:400;
  cursor:pointer;
  transition:.25s;
}

button.danger:hover{
  background:#bd6d4c;
  color:white;
}
@keyframes pop{
  from{
    transform:scale(.7);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }
}