:root { --bg:#f4f5f7; --card:#fff; --text:#1d1f23; --muted:#6b7280; --accent:#f5a400; --line:#e3e5e8; }
  @media (prefers-color-scheme: dark) { :root { --bg:#121417; --card:#1c1f24; --text:#eceef1; --muted:#9aa1ab; --line:#2c3037; } }
  * { box-sizing:border-box; }
  body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); }
  header { padding:14px 16px; font-weight:700; font-size:18px; }
  main { display:grid; grid-template-columns:1fr 380px; gap:16px; padding:0 16px 16px; }
  @media (max-width:860px){ main { grid-template-columns:1fr; } #map { height:45vh; min-height:280px; } }
  #map { height:70vh; min-height:360px; border-radius:12px; border:1px solid var(--line); }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
  .card h3 { margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  label { display:block; font-size:13px; color:var(--muted); margin:8px 0 4px; }
  input, textarea, select { font-size:16px !important; }
  input, textarea { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
  select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
  textarea { resize:vertical; min-height:56px; }
  .row { display:flex; gap:8px; }
  .row > * { flex:1; }
  button { min-height:44px; padding:9px 14px; border:0; border-radius:8px; background:var(--accent); color:#1d1f23; font-weight:600; cursor:pointer; font:inherit; font-weight:600; }
  button.sec { background:var(--line); color:var(--text); }
  .btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .info-city { font-size:20px; font-weight:700; color:var(--accent); }
  .info p { margin:4px 0; font-size:14px; }
  .badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:99px; background:#fde68a; color:#78350f; margin-top:6px; }
  .badge.gps { background:#bbf7d0; color:#14532d; }
  #status { font-size:13px; color:var(--muted); min-height:18px; margin-top:6px; }
  #results div { padding:6px 4px; border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; }
  #results div:hover { background:var(--bg); }
  .pick { display:flex; gap:8px; }
  .pick label { flex:1; margin:0; display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px;
    border-radius:8px; font-size:15px; font-weight:600; color:#1d1f23; background:var(--accent); cursor:pointer; }
  .pick label.sec { background:var(--line); color:var(--text); }
  .pick input { position:absolute; width:1px; height:1px; opacity:0; }
  canvas { max-width:100%; border-radius:8px; margin-top:10px; display:none; }
  /* dulu atribut style="" di HTML (dipindah agar CSP tidak perlu 'unsafe-inline') */
  header { padding-top:max(14px, env(safe-area-inset-top)); }
  #btnSearch { flex:0; }
  #tzInfo { font-size:13px; color:var(--muted); margin-top:6px; }
  #manualTimeBox { display:none; margin-top:10px; }