/* ==================== 组件样式 ==================== */

/* 毛玻璃卡片容器 */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 153, 255, 0.2);
}

/* 地图容器 */
#map {
  width: 100%;
  height: 380px;
  border-radius: 10px;
  border: 2px solid rgba(0, 153, 255, 0.3);
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 153, 255, 0.2);
}

.tip {
  text-align: center;
  color: #a5b4fc;
  margin-top: 8px;
  font-size: 12px;
}

/* 表单样式 */
.form-item {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  width: 100%;
  color: #e2e8f0;
  font-weight: 500;
  font-size: 14px;
}

input, select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

input:focus, select:focus {
  border-color: #0099ff;
  box-shadow: 0 0 10px rgba(0, 153, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

select option {
  background: #1e293b;
  color: #fff;
}

/* 按钮组 */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  width: 100%;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn-add {
  background: linear-gradient(90deg, #10b981, #059669);
}

.btn-calc {
  background: linear-gradient(90deg, #0099ff, #0077ff);
}

.btn-clear {
  background: linear-gradient(90deg, #64748b, #475569);
}

.btn-del {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  padding: 6px 12px;
  font-size: 12px;
}

/* 需求点列表 */
.point-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin: 8px 0;
  color: #e2e8f0;
  font-size: 12px;
  transition: all 0.2s ease;
}

.point-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* GIS 数据面板 */
.gis-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.gis-item {
  width: 100%;
  padding: 8px;
  background: rgba(0, 153, 255, 0.1);
  border-radius: 6px;
  text-align: center;
}

.gis-item p {
  color: #a5b4fc;
  font-size: 12px;
}

.gis-item h4 {
  color: #00d4ff;
  margin: 4px 0;
  font-size: 14px;
}

/* 结果卡片 */
.result {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(123, 97, 255, 0.15));
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-top: 12px;
  display: none;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  animation: fadeIn 0.6s ease;
}

.result.show {
  display: block;
}

.result h3 {
  background: linear-gradient(90deg, #00d4ff, #7b61ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px;
}

.result p {
  color: #fff;
  font-size: 14px;
  margin: 8px 0;
  font-weight: 500;
}

.result .algorithm-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 153, 255, 0.2);
  border-radius: 16px;
  color: #00d4ff;
  font-size: 12px;
  margin: 8px 0;
}

/* 错误提示 */
.error {
  color: #fca5a5;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
}