/* 基础布局样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

/* 搜索区域布局 */
.search-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* 下拉选择框样式 */
md-outlined-select {
  width: 120px;
}

/* 搜索输入框（自动填充剩余空间） */
md-outlined-text-field {
  flex: 1;
  min-width: 200px;
}

/* 主题切换按钮 */
md-outlined-icon-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .container {
    padding: 12px;
  }

  .search-section {
    flex-direction: column;
    gap: 12px;
  }

  md-outlined-select,
  md-outlined-text-field {
    width: 100%;
  }

  md-outlined-icon-button {
    bottom: 16px;
    right: 16px;
  }
}

/* 公共优化样式 */
md-filled-tonal-button {
  margin-left: auto;
}

md-icon[slot="end"] {
  margin-left: 8px;
}

section {
    color: var(--md-sys-color-on-background);
}

/* 添加过渡效果 */
:root {
    transition: background-color 0.3s ease, color 0.3s ease;
  }