:root{
  --bg:#0b0e14;
  --text:#e8eefc;
  --muted:#9fb0d0;
  --line:rgba(255,255,255,.10);
  --accent:#6aa9ff;
  --ok:rgba(87,227,137,.25);
  --bad:rgba(255,99,99,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(106,169,255,.25), transparent 60%), var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
}

.wrap{
  max-width:520px;
  margin:0 auto;
  padding:16px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  display:grid;
  gap:12px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.title{
  display:flex;
  align-items:center;
  gap:10px;
}

.title-ico{
  font-size:22px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

h1{margin:6px 0 0;font-size:20px;letter-spacing:.4px}

.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{
  font-size:14px;color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  width:34px;height:34px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.25);
}
.chip.ok{border-color:rgba(87,227,137,.35); background:var(--ok); color:rgba(232,238,252,.9)}
.chip.bad{border-color:rgba(255,99,99,.35); background:var(--bad); color:rgba(232,238,252,.9)}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}

.row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:10px;
}

label{display:grid;gap:8px;font-size:12px;color:var(--muted)}
.label-ico{
  font-size:14px;
  color:rgba(232,238,252,.75);
}
input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
  font-size:16px; /* prevent iOS zoom */
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

button{
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:var(--text);
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

button.primary{
  border-color:rgba(106,169,255,.4);
  background:rgba(106,169,255,.18);
}

button:active{transform:translateY(1px)}

.hint{
  margin:6px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: rgba(232,238,252,.9);
}

.compass{
  width:min(320px, 72vw);
  height:min(320px, 72vw);
  margin:10px auto 12px;
  position:relative;
}

.ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,.42));
}

.arrow{
  position:absolute; left:50%; top:50%;
  width:10px; height:46%;
  transform-origin:50% 92%;
  transform:translate(-50%, -92%) rotate(0deg);
}

.arrow::before{
  content:"";
  position:absolute; left:50%; top:0;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:26px solid var(--accent);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}

.arrow::after{
  content:"";
  position:absolute; left:50%; top:22px;
  transform:translateX(-50%);
  width:6px; height:calc(100% - 22px);
  border-radius:999px;
  background:rgba(106,169,255,.65);
}

.label{
  position:absolute;
  font-weight:700;
  color:rgba(232,238,252,.85);
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  user-select:none;
}
.north{left:50%; top:6px; transform:translateX(-50%)}
.south{left:50%; bottom:6px; transform:translateX(-50%)}
.east{right:8px; top:50%; transform:translateY(-50%)}
.west{left:8px; top:50%; transform:translateY(-50%)}

.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}

.stats div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
}
.stats b{color:var(--text)}

.stat-ico{
  font-size:16px;
}

.status{
  margin:12px 0 0;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:rgba(232,238,252,.9);
  overflow:auto;
  max-height:160px;
}

.right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn-ico{font-size:16px}
.btn-text{letter-spacing:.2px}

.icon-only{
  padding:12px;
}
.icon-only .btn-text{display:none}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

@media (min-width:520px){
  .row{grid-template-columns:1fr 1fr}
  .actions{grid-template-columns:1fr 1fr 1fr}
  .chips{justify-content:flex-end}
}