/* =============================
   APP CONTAINER
============================= */
.ls-app {
  max-width: 480px;
  margin: auto;
  padding: 12px;
  font-family: system-ui, sans-serif;
  background: #f6f7f9;
}

/* =============================
   CARD
============================= */
.ls-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.ls-card.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.ls-card.loading::after {
  content: "Updating GPS...";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  color: #555;
}

/* =============================
   MODES
============================= */
.hidden,
.ls-mode.hidden {
  display: none;
}

/* =============================
   CENTER CARD (SIMPLE MODE)
============================= */
.ls-center-card {
  text-align: center;
  padding: 40px 20px;
}

/* =============================
   BUTTON SYSTEM
============================= */
.ls-btn-primary {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  background: #1e88e5;
  color: #fff;
  font-weight: bold;
}

.ls-btn-secondary {
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: #e0e0e0;
  border: none;
}

.ls-btn {
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #e9ecef;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.ls-btn.primary {
  background: #1e88e5;
  color: #fff;
}

.ls-btn.danger {
  background: #ffebee;
  color: #c62828;
}

.ls-btn:disabled,
.ls-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================
   OUTPUT
============================= */
#ls-output {
  font-size: 14px;
  line-height: 1.6;
}

/* =============================
   ACTION BUTTON GRID
============================= */
.ls-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* =============================
   ADVANCED ROW SYSTEM
============================= */
.ls-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 80px;
  gap: 14px;
  align-items: start;
}

/* NAME COLUMN */
.name-col input {
  width: 100%;
  padding: 8px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* COORDINATES */
.coord-col {
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

.coord-col div {
  font-size: 12px;
}

/* ACCURACY */
.accuracy-col {
  font-size: 12px;
  text-align: right;
}

.accuracy-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 600;
}

/* =============================
   ADVANCED ACTIONS (REFRESH / NEW)
============================= */
.ls-advanced-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-start;
}

.ls-advanced-actions .ls-btn {
  width: auto;
  padding: 6px 10px;
  font-size: 12px;
}

/* =============================
   SAVED ITEMS
============================= */
.ls-saved-item {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.ls-saved-item .name-col {
  font-size: 13px;
  font-weight: 600;
}

/* =============================
   STATUS / MESSAGE
============================= */
.ls-status {
  font-size: 14px;
  margin-bottom: 8px;
}

.ls-status.success {
  color: #2e7d32;
}

.ls-status.error {
  color: #c62828;
}

.ls-success-msg {
  font-size: 14px;
  font-weight: 500;
  color: #2e7d32;
}

/* STATUS ROW */
.ls-status-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 10px;
}

/* ACCURACY COLORS */
.ls-accuracy.high {
  color: #2e7d32;
  font-weight: 600;
}

.ls-accuracy.medium {
  color: #f9a825;
  font-weight: 600;
}

.ls-accuracy.low {
  color: #c62828;
  font-weight: 600;
}

/* NOTES */
.ls-note {
  margin-top: 10px;
  font-size: 12px;
  color: #c62828;
}

/* TOAST */
.ls-toast {
  margin-top: 10px;
  padding: 8px;
  font-size: 12px;
  background: #e3f2fd;
  border-radius: 6px;
}

/* ACCURACY METER */
#ls-accuracyMeter {
  font-size: 13px;
  margin-top: 6px;
}

/* GUIDE */
.ls-guide {
  font-size: 12px;
  margin: 8px 0;
  color: #c62828;
}

/* =============================
   MOBILE OPTIMIZATION
============================= */
@media (max-width: 480px) {

  .ls-row {
    grid-template-columns: 1fr;
  }

  .accuracy-col {
    text-align: left;
    margin-top: 6px;
  }

  .ls-advanced-actions {
    flex-direction: column;
  }

  .ls-advanced-actions .ls-btn {
    width: 100%;
    font-size: 14px;
    padding: 10px;
  }

  .ls-status-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}