:root{
  --bg:#f7f7f7;
  --card:#ffffff;
  --accent:#2b7be4;
  --muted:#666;
  --danger:#e23a3a;
  --hpad:14px; /* horizontal padding used by form and map */
}
html,body,#app{height:100%;margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#111}
#app{display:flex;flex-direction:column;height:100vh}

/* Upper map area & layout: split 50/50 with form */
#brand{
  padding:6px 14px;
  background:transparent;
  text-align:center;
  line-height:1;
}
#brand .line1{
  font-weight:800;
  font-size:15px;
  color:var(--accent);
  letter-spacing:0.2px;
}
#brand .line2{
  font-weight:800;
  font-size:13px;
  color:var(--accent);
  margin-top:2px;
}
#title{
  padding:8px 14px 10px;
  font-weight:700;
  font-size:14px; /* reduced to be smaller than the brand lines */
  color:#111;
  background:transparent;
  text-align:center;
}
#map-area{flex:1;position:relative;background:#000;min-height:50vh;overflow:hidden}
#map{position:absolute;inset:0 var(--hpad);border-radius:12px;overflow:hidden;}

/* Timer top-right */
#timer{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.6);color:#fff;padding:6px 10px;border-radius:8px;font-weight:600;font-size:14px;min-width:88px;text-align:center;z-index:1000}

/* Lower form area: 50% */
#form-area{flex:1;padding:14px;background:transparent;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;min-height:50vh}
#report-form{background:var(--card);border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(10,10,10,0.08);display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;color:var(--muted);font-weight:600}
.field input{height:46px;padding:10px;border-radius:8px;border:1px solid #e6e6e6;font-size:16px;outline:none}
.field input:focus{border-color:var(--accent);box-shadow:0 6px 14px rgba(43,123,228,0.12)}

.buttons{display:flex;gap:10px;justify-content:flex-end}
button{min-width:120px;height:48px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:700;font-size:16px;touch-action:manipulation}
button[aria-pressed="true"]{background:var(--danger)}
#status{margin-top:8px;font-size:13px;color:var(--muted);height:20px}

/* When form hidden */
.hidden{display:none}

/* Responsive comfortable touch sizes */
@media (max-width:420px){
  #report-form{padding:10px}
  button{min-width:110px;height:48px;font-size:15px}
  #timer{font-size:13px;min-width:84px}
}