*{
box-sizing:border-box;
}

body{

margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:#0f172a;
color:white;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;

}

.app{

max-width:420px;
width:90%;

}

header{

text-align:center;
margin-bottom:25px;

}

h1{

margin:0;
font-size:28px;

}

.subtitle{

opacity:0.7;
margin-top:5px;

}

.status-card{

background:#1e293b;
border-radius:16px;
padding:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);

}

.status-row{

display:flex;
align-items:center;
gap:15px;

}

#gps-status{

font-weight:600;

}

#accuracy{

font-size:14px;
opacity:0.7;

}

.instructions{

margin-top:20px;
background:#111827;
padding:15px;
border-radius:12px;
font-size:14px;
opacity:0.85;

}

/* GPS indicator */

.gps{

width:14px;
height:14px;
border-radius:50%;

}

.searching{

background:#f59e0b;
animation:pulse 1.5s infinite;

}

.locked{

background:#22c55e;

}

@keyframes pulse{

0%{transform:scale(1);opacity:1}
50%{transform:scale(1.4);opacity:0.5}
100%{transform:scale(1);opacity:1}

}

/* Modal */

.modal{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);

display:flex;
justify-content:center;
align-items:center;

padding:20px;

}

.modal-card{

background:white;
color:black;
border-radius:18px;
padding:25px;
max-width:400px;
text-align:center;
animation:popup 0.3s ease;

}

@keyframes popup{

from{
transform:scale(0.8);
opacity:0;
}

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

}

button{

margin-top:15px;
border:none;
padding:12px 20px;
border-radius:10px;
background:#2563eb;
color:white;
font-weight:600;
cursor:pointer;

}

button:hover{

background:#1d4ed8;

}

.hidden{

display:none;

}