/* Android设计规范的基本样式 */
:root {
  --primary-color: #6200ee;
  --primary-variant: #3700b3;
  --secondary-color: #03dac6;
  --secondary-variant: #018786;
  --background: #ffffff;
  --surface: #ffffff;
  --error: #b00020;
  --on-primary: #ffffff;
  --on-secondary: #000000;
  --on-background: #000000;
  --on-surface: #000000;
  --on-error: #ffffff;
  --safe-area-top: 0px;
  --safe-area-bottom: 60px;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--background);
  color: var(--on-background);
  padding-bottom: var(--safe-area-bottom);
}

/* 考虑顶部工具栏的安全区域，保证内容不被状态栏遮挡 */
.android-toolbar {
  height: 56px;
  background-color: var(--primary-color);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 底部导航和操作按钮的安全区域，保证不被底部home indicator遮挡 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--surface);
  padding-bottom: env(safe-area-inset-bottom, 8px);
  z-index: 10;
}

/* 为长页面添加底部边距，避免内容被底部固定元素遮挡 */
.pb-safe {
  padding-bottom: calc(var(--safe-area-bottom) + 16px);
}

.android-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
  background-color: var(--surface);
  overflow: hidden;
}

.android-btn {
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  cursor: pointer;
}

.android-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--safe-area-bottom));
  z-index: 9;
}

.iframe-container {
  /* margin: 16px; */
  /* border: 1px solid #ddd;
  border-radius: 8px; */
  overflow: hidden;
}

.iframe-label {
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --surface: #1e1e1e;
    --on-background: #ffffff;
    --on-surface: #ffffff;
  }
}