/* 和家亲H5页面开发规范 - 基础样式 */
:root {
    /* 颜色规范 */
    --primary-color: #00a0e9;      /* 主色 */
    --success-color: #52c41a;      /* 成功色 */
    --warning-color: #faad14;      /* 警告色 */
    --error-color: #f5222d;        /* 错误色 */
    --text-primary: #333333;       /* 主要文字 */
    --text-secondary: #666666;     /* 次要文字 */
    --text-tertiary: #999999;      /* 辅助文字 */
    --background-color: #f5f5f5;   /* 背景色 */
    --card-background: #ffffff;    /* 卡片背景 */
    --border-color: #e8e8e8;       /* 边框色 */
    --disabled-color: #d9d9d9;     /* 禁用色 */
    
    /* 尺寸规范 */
    --header-height: 44px;
    --footer-height: 60px;
    --border-radius: 14px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    
    /* 字体规范 */
    --font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--background-color);
    max-width: 100vw;
    overflow-x: hidden;
    padding-bottom: var(--footer-height);
}

/* 顶部状态栏 */
.status-bar {
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    background: var(--card-background);
}

.status-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.status-icons i {
    width: 16px;
    height: 16px;
    background-color: var(--text-primary);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}

/* ============================================
   图标基础样式 - 使用 background-image 方式
   兼容小米、华为、OPPO、vivo等所有安卓手机
   ============================================ */
.icon-base {
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
}

/* 信号图标 - 黑色 */
.icon-signal {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l2 2c2.76-2.76 7.24-2.76 10 0l2-2c-4.01-4.01-10.99-4.01-15 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* WiFi图标 - 黑色 */
.icon-wifi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l2 2c2.76-2.76 7.24-2.76 10 0l2-2c-4.01-4.01-10.99-4.01-15 0zm4-4l2 2c1.13-1.13 2.87-1.13 4 0l2-2c-2.21-2.21-5.79-2.21-8 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 电池图标 - 黑色 */
.icon-battery {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4zM13 18h-2v-2h2v2zm0-4h-2V9h2v5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.battery-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* 头部样式 */
.app-header {
    height: var(--header-height);
    background: var(--card-background);
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: var(--spacing-md);
}

.btn-back {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 返回箭头图标 */
.icon-back {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.header-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.device-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), #40a9ff);
    border-radius: 8px;
    flex-shrink: 0;
}

.device-icon i {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 手表图标 - 白色 */
.icon-watch {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 12c0-2.54-1.19-4.81-3.04-6.27L16 0H8l-.96 5.73C5.19 7.19 4 9.46 4 12s1.19 4.81 3.04 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54 20 12zM6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z'/%3E%3C/svg%3E");
}

.header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.app-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-all;
    margin: 0;
}
.online-status {
    font-size: 12px;
    color: #999;
    margin-top: 0;
}

.connection-status {
    font-size: var(--font-size-xs);
    color: var(--success-color);
}


/* 主内容区 */
.app-main {
    padding: var(--spacing-md) var(--spacing-lg);
    padding-bottom: 70px;
    overflow: visible;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    position: relative;
}

/* 下拉刷新指示器 - 浅底模式（默认） */
.pull-refresh-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--spacing-md) 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
}

.pull-refresh-indicator.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.pull-refresh-text {
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
}

.pull-refresh-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.4);
    border-top-color: transparent;
    border-radius: 50%;
    animation: pull-refresh-spin 0.8s linear infinite;
}

@keyframes pull-refresh-spin {
    to { transform: rotate(360deg); }
}

/* 下拉刷新指示器 - 深底模式 */
@media (prefers-color-scheme: dark) {
    .pull-refresh-text {
        color: rgba(255, 255, 255, 0.6);
    }

    .pull-refresh-spinner {
        width: 20px;
        height: 20px;
        border-color: rgba(255, 255, 255, 0.6);
        border-top-color: transparent;
    }
}

/* 设备展示区 */
.device-display-section {
    text-align: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    overflow: visible;
}

.device-image-container {
    margin-bottom: var(--spacing-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

.watch-image {
    max-width: 100%;
    width: 280px;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.hint-message {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    line-height: 1.5;
    display: block;
    overflow: visible;
}

/* 每日目标卡片 */
.daily-goal-section {
    margin-bottom: var(--spacing-xl);
}

.goal-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.goal-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.progress-ring {
    width: 120px;
    height: 120px;
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.5s ease;
}

.goal-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.goal-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.goal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.goal-dot.blue {
    background: #1890ff;
}

.goal-dot.yellow {
    background: #faad14;
}

.goal-dot.green {
    background: #52c41a;
}

.goal-dot.purple {
    background: #722ed1;
}

.goal-dot.red {
    background: #f5222d;
}

.goal-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* 心率 i 提示图标 */
.heart-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1890ff;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
    flex-shrink: 0;
}
.heart-info-icon:hover { background: #40a9ff; }

/* 心率异常：标红 + 警告图标（使用SVG背景图，兼容所有手机） */
.goal-item.abnormal .goal-value,
.exercise-detail-item.abnormal {
    color: #ff4d4f !important;
    font-weight: 600;
}
.goal-item.abnormal .goal-value::after,
.exercise-detail-item.abnormal::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4d4f'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.exercise-detail {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    display: flex;
    gap: 16px;
}
.exercise-detail-item {
    display: inline-flex;
    align-items: center;
}

.btn-set-goal {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* 目标图标 */
.icon-target {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300a0e9'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 最新运动数据 */
.latest-exercise-section {
    margin-bottom: var(--spacing-xl);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-primary);
}

/* 右箭头图标 - 灰色 */
.icon-arrow-right {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.exercise-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.exercise-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exercise-icon.running {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
}

.exercise-icon i {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 跑步图标 - 白色 */
.icon-running {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.5 3.5c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/svg%3E");
}

.exercise-info {
    flex: 1;
}

.exercise-name {
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.exercise-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* 健康指标网格 */
.health-metrics-section {
    margin-bottom: var(--spacing-xl);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.metric-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    cursor: pointer;
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.metric-icon.steps {
    background: linear-gradient(135deg, #52c41a, #73d13d);
}

.metric-icon.distance {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
}

.metric-icon.sleep {
    background: linear-gradient(135deg, #722ed1, #9254de);
}

.metric-icon.heart {
    background: linear-gradient(135deg, #f5222d, #ff4d4f);
}

.metric-icon.time {
    background: linear-gradient(135deg, #faad14, #ffc53d);
}

.metric-icon i {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 步数图标 - 白色 */
.icon-steps {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.5 3.5c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/svg%3E");
}

/* 距离图标 - 白色 */
.icon-distance {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

/* 睡眠图标 - 白色 */
.icon-sleep {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* 心率图标 - 白色 */
.icon-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

/* 时间图标 - 白色 */
.icon-time {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}



.metric-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.metric-value {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.metric-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* 小右箭头图标 - 灰色 */
.icon-arrow-right-small {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 运动类型网格 */
.exercise-types-section {
    margin-bottom: var(--spacing-xl);
}

.exercise-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.exercise-type-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    cursor: pointer;
}

.exercise-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.exercise-type-icon.running {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
}

.exercise-type-icon.cycling {
    background: linear-gradient(135deg, #13c2c2, #36cfc9);
}

.exercise-type-icon.walking {
    background: linear-gradient(135deg, #faad14, #ffc53d);
}

.exercise-type-icon.climbing {
    background: linear-gradient(135deg, #722ed1, #9254de);
}

.exercise-type-icon.training {
    background: linear-gradient(135deg, #f5222d, #ff4d4f);
}

.exercise-type-icon i {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 骑行图标 - 白色 */
.icon-cycling {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.18 10l-1.7-4.68C16.19 4.53 15.44 4 14.56 4H9.44c-.88 0-1.63.53-1.92 1.32L5.82 10H2v2h2.18c.17 1.04.84 1.92 1.8 2.4L6 19h2l.82-4.6c.96-.48 1.63-1.36 1.8-2.4H15c.17 1.04.84 1.92 1.8 2.4L17.6 19H20l-.98-4.6c.96-.48 1.63-1.36 1.8-2.4H22v-2h-3.82zM9.44 6h5.12l1.2 3.32h-7.52L9.44 6z'/%3E%3C/svg%3E");
}

/* 步行图标 - 白色 */
.icon-walking {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.5 3.5c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm-7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm7 0c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/svg%3E");
}

/* 爬山图标 - 白色 */
.icon-climbing {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

/* 训练图标 - 白色 */
.icon-training {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.exercise-type-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.exercise-type-value {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.exercise-type-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* 底部导航栏 */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    background: var(--card-background);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    color: #4E5E79;
    transition: color 0.2s;
    position: relative;
}

.nav-item.active {
    color: #3084F2;
}

/* 底部导航栏图标 - 使用多色SVG方案 */
.nav-item i {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 健康图标 - 蓝色(选中态) / 灰色(未选中态) */
.icon-health {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E5E79'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.nav-item.active .icon-health {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233084F2'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

/* 设备图标 */
.icon-device {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E5E79'%3E%3Cpath d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");
}
.nav-item.active .icon-device {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233084F2'%3E%3Cpath d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");
}

/* 关爱图标 */
.icon-care {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E5E79'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.nav-item.active .icon-care {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233084F2'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* 服务图标 */
.icon-service {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E5E79'%3E%3Cpath d='M5 4h14v2H5zm0 4h14v2H5zm0 4h9v2H5zm0 4h6v2H5z'/%3E%3C/svg%3E");
}
.nav-item.active .icon-service {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233084F2'%3E%3Cpath d='M5 4h14v2H5zm0 4h14v2H5zm0 4h9v2H5zm0 4h6v2H5z'/%3E%3C/svg%3E");
}

/* 发现图标 */
.icon-discover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E5E79'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 20.49 21.49 19 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}
.nav-item.active .icon-discover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233084F2'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 20.49 21.49 19 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.nav-item span {
    font-size: 11px;
    color: inherit;
}

/* 底部导航红点（运营可配样式） */

.nav-badge {
    position: absolute;
    top: 4px;
    right: 22px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background-color: #FA4B4B; /* 红点颜色 */
    border: 1px solid #ffffff; /* 外描边 1px */
    color: #ffffff;
    font-size: 10px;
    line-height: 12px;
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: none;
    justify-content: center;
    align-items: center;
}

.nav-badge.show {
    display: flex;
}

/* 加载遮罩 */
.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-mask.active {
    display: flex;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-mask p {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
}

/* 消息提示 */
.message-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10000;
    display: none;
}

.message-toast.show {
    display: block;
}

/* 页面内容容器 */
.page-content {
    width: 100%;
    padding: 0 0 20px 0;
}


/* 设备/关爱页面样式 */
.location-section {
    margin-bottom: var(--spacing-xl);
}

.location-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.location-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-primary);
}

.location-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.location-map {
    width: 100%;
    height: 300px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: #e9ecef;
}

#amapContainer {
    width: 100%;
    height: 300px;
}

/* 立即定位按钮 */
.locate-now-btn {
    width: 100%;
    margin-top: var(--spacing-lg);
    padding: 14px 24px;
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    transition: all 0.2s ease;
}

.locate-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

.locate-now-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.locate-now-btn:disabled {
    background: linear-gradient(135deg, #b3b3b3, #cccccc);
    cursor: not-allowed;
    box-shadow: none;
}

.locate-now-btn i {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 定位图标 - 白色 */
.icon-locate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z'/%3E%3C/svg%3E");
}

.map-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* 位置标记图标 - 绿色 */
.icon-location-marker {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352c41a'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.marker-label {
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    margin-top: 4px;
    box-shadow: var(--shadow-sm);
}

.map-roads {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

.road {
    position: absolute;
    background: #666;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    color: white;
}

.road-1 { top: 20%; left: 10%; }
.road-2 { top: 50%; left: 20%; }
.road-3 { bottom: 30%; left: 15%; }
.road-4 { bottom: 20%; right: 20%; }
.road-5 { top: 70%; right: 10%; }

.map-landmarks {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 10px;
    color: var(--text-secondary);
}

.landmark {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

.landmark:nth-child(1) { top: 15%; right: 20%; }
.landmark:nth-child(2) { top: 30%; left: 15%; }
.landmark:nth-child(3) { bottom: 25%; left: 25%; }

.btn-refresh-map {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
}

/* 刷新按钮图标 - 蓝色 */
.btn-refresh-map i {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300a0e9'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 设置按钮区域 */
.settings-buttons-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.setting-btn {
    background: var(--card-background);
    border: none;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

.setting-btn:active {
    transform: scale(0.95);
}

.setting-btn.geo-fence {
    background: linear-gradient(135deg, #52c41a, #73d13d);
    color: white;
}

.setting-btn.sos {
    background: linear-gradient(135deg, #9254de, #b37feb);
    color: white;
}

.setting-btn i {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 围栏图标 - 白色 */
.icon-geo-fence {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

/* SOS图标 - 白色 */
.icon-sos {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.setting-btn span {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* SOS 紧急联系人列表 */
.sosList-section {
    margin: 20px 16px;
}
.sosList-section .section-header {
    margin-bottom: 16px;
}
.sosList-section .section-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary, #333);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sosList-section .section-title::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4d4f'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}
.sosList-list {
    background: var(--card-background, #ffffff);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid var(--border-color, #f0f0f0);
}
.sosList-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    transition: background-color 0.2s ease;
    cursor: pointer;
}
.sosList-item:hover {
    background-color: rgba(255, 77, 79, 0.05);
}
.sosList-item:last-child {
    border-bottom: none;
}
.sosList-item.empty {
    text-align: center;
    color: var(--text-tertiary, #999);
    font-style: italic;
    padding: 32px 20px;
}
.sos-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
}
.contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 18px;
    flex-shrink: 0;
}
.contact-info {
    flex: 1;
    min-width: 0;
}
.contact-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #333);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-phone {
    font-size: 14px;
    color: var(--text-secondary, #666);
    display: flex;
    align-items: center;
    gap: 6px;
}
.contact-phone::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

/* 告警内容卡片样式（优化版） */
.sos-alerts-section {
    margin: 20px 16px;
}
.alerts-list {
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(255, 77, 79, 0.1);
    border: 1px solid rgba(255, 77, 79, 0.1);
}
.alerts-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}
.alerts-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 告警空状态图标 - 使用SVG替代emoji */
.alerts-empty-icon::after {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.11.88 2 1.99 2H19c1.1 0 2-.89 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}
.alerts-empty-text {
    color: #999;
    font-size: 14px;
}
.alerts-empty-hint {
    color: #bbb;
    font-size: 12px;
    margin-top: 6px;
}
.alert-item {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 77, 79, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.alert-item:last-child {
    border-bottom: none;
}
.alert-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ff4d4f, #ff7875);
}
.alert-item:hover {
    background: rgba(255, 77, 79, 0.03);
}
.alert-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}
/* 告警图标 - 使用SVG替代emoji */
.alert-icon::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.alert-content {
    flex: 1;
    min-width: 0;
}
.alert-type {
    display: inline-block;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(255, 77, 79, 0.25);
}

/* ========== 联系人管理样式 ========== */

/* 新增联系人按钮 */
.add-contact-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.add-contact-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
}
.add-contact-btn:disabled {
    background: linear-gradient(135deg, #b3b3b3, #cccccc);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.icon-add {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 联系人提示 */
.contact-tip {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 12px 0 0;
    margin-top: 8px;
}

/* SOS联系人特殊样式（前3个） */
.sosList-item.sos-contact {
    background: linear-gradient(135deg, rgba(255, 77, 79, 0.05), rgba(255, 120, 117, 0.05));
    border-left: 3px solid #ff4d4f;
}
.sosList-item.sos-contact .contact-avatar {
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
}
.sos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 8px;
}

/* 联系人操作按钮 */
.contact-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.contact-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.contact-action-btn.edit {
    background: rgba(24, 144, 255, 0.1);
    color: #1890ff;
}
.contact-action-btn.edit:hover {
    background: rgba(24, 144, 255, 0.2);
}
.contact-action-btn.delete {
    background: rgba(255, 77, 79, 0.1);
    color: #ff4d4f;
}
.contact-action-btn.delete:hover {
    background: rgba(255, 77, 79, 0.2);
}
.icon-edit {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231890ff'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-delete {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4d4f'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 联系人弹窗 */
.contact-modal {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.contact-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.contact-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.contact-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}
.contact-modal-close:hover {
    background: #f5f5f5;
    color: #333;
}
.contact-modal-body {
    padding: 20px;
    max-height: min(56vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 批量新增 */
.contact-batch-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-batch-row {
    display: grid;
    grid-template-columns: 22px 1fr 1fr 28px;
    align-items: center;
    gap: 8px;
}
.contact-batch-row-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-align: center;
}
.contact-batch-row .contact-form-input {
    padding: 10px 10px;
    font-size: 14px;
    min-width: 0;
}
.contact-batch-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: #f5f5f5;
    color: #999;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.contact-batch-remove:hover {
    background: #ffebee;
    color: #ff4d4f;
}
.contact-add-row-btn {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    background: #fafafa;
    color: #1890ff;
    font-size: 14px;
    cursor: pointer;
}
.contact-add-row-btn:hover {
    border-color: #1890ff;
    background: #f0f7ff;
}
.contact-batch-hint {
    margin-top: 10px;
}
.contact-edit-section .contact-form-item:last-child {
    margin-bottom: 0;
}

/* 紧急联系人列表内「查看更多」：右侧对齐，样式同「新增」按钮 */
.contact-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sosList-item.sosList-item--more {
    padding: 0;
    cursor: default;
}
.sosList-item.sosList-item--more:hover {
    background-color: transparent;
}
.contact-more-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 20px 14px;
    box-sizing: border-box;
}
.sosList-item--more .add-contact-btn.contact-more-toggle {
    flex-shrink: 0;
    width: auto;
}
.icon-more-arr {
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
    display: inline-block;
}
.add-contact-btn.contact-more-toggle.is-expanded .icon-more-arr {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .icon-more-arr {
        transition: none;
    }
}
.contact-form-item {
    margin-bottom: 20px;
}
.contact-form-item:last-child {
    margin-bottom: 0;
}
.contact-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}
.contact-form-label .required {
    color: #ff4d4f;
    margin-left: 2px;
}
.contact-form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    transition: all 0.2s;
    outline: none;
}
.contact-form-input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
}
.contact-form-input.error {
    border-color: #ff4d4f;
}
.contact-form-input::placeholder {
    color: #bfbfbf;
}
.contact-form-error {
    font-size: 12px;
    color: #ff4d4f;
    margin-top: 6px;
    min-height: 18px;
}
.contact-form-hint {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}
.contact-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
}
.contact-modal-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.contact-modal-btn.cancel {
    background: #f5f5f5;
    color: #666;
}
.contact-modal-btn.cancel:hover {
    background: #e8e8e8;
}
.contact-modal-btn.confirm {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    color: #fff;
}
.contact-modal-btn.confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}
.contact-modal-btn.confirm:disabled {
    background: linear-gradient(135deg, #b3b3b3, #cccccc);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 删除确认弹窗 */
.delete-confirm-modal {
    background: #fff;
    border-radius: 16px;
    width: 85%;
    max-width: 300px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.delete-confirm-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}
.delete-confirm-msg {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}
.delete-confirm-btns {
    display: flex;
    gap: 12px;
}
.delete-confirm-btn {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.delete-confirm-btn.cancel {
    background: #f5f5f5;
    color: #666;
}
.delete-confirm-btn.cancel:hover {
    background: #e8e8e8;
}
.delete-confirm-btn.confirm {
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    color: #fff;
}
.delete-confirm-btn.confirm:hover {
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

/* 联系人为空状态 */
.contact-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.contact-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-empty-icon::after {
    content: '';
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bfbfbf'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.contact-empty-text {
    font-size: 14px;
    color: #999;
}
.contact-empty-hint {
    font-size: 12px;
    color: #bfbfbf;
    margin-top: 8px;
}

/* 已达上限提示 */
.contact-limit-tip {
    text-align: center;
    padding: 12px;
    background: #fff7e6;
    border-radius: 8px;
    font-size: 13px;
    color: #fa8c16;
    margin-top: 12px;
}

.alert-message {
    color: #333;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-all;
}
.alert-time {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* 告警时间图标 - 使用SVG替代emoji */
.alert-time::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 告警弹窗 */
.alert-popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
    justify-content: center;
    align-items: center;
}
.alert-popup-overlay.show { display: flex; }
.alert-popup-box {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 320px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.alert-popup-title {
    font-size: 16px;
    font-weight: 600;
    color: #ff4d4f;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-popup-title::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4d4f'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.alert-popup-msg { font-size: 14px; color: #333; line-height: 1.6; }
.alert-popup-msg-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}
.alert-popup-line {
    padding: 10px 12px;
    background: #fff5f5;
    border-radius: 10px;
    border-left: 3px solid #ff4d4f;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.alert-popup-tip {
    margin: 12px 0 0;
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}
.alert-popup-btn {
    margin-top: 16px;
    width: 100%;
    padding: 10px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --text-tertiary: #808080;
        --background-color: #1a1a1a;
        --card-background: #2a2a2a;
        --border-color: #3a3a3a;
        --disabled-color: #4a4a4a;
    }
}

/* 响应式适配 */
@media (max-width: 320px) {
    :root {
        --font-size-md: 14px;
        --spacing-lg: 12px;
        --spacing-xl: 16px;
    }
    
    .app-main {
        padding: var(--spacing-md);
        padding-bottom: calc(var(--footer-height) + var(--spacing-md));
    }
}

/* 设备管控入口样式 */
.device-control-section {
    margin-bottom: var(--spacing-lg);
}

.device-control-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.device-control-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.device-control-card:active {
    transform: translateY(0);
}

.control-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #722ed1, #9254de);
    flex-shrink: 0;
}

.control-icon i {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 控制面板图标 - 白色 */
.icon-control-panel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}

.control-info {
    flex: 1;
}

.control-name {
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.control-desc {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}