* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 750px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

/* 分类卡片 */
.categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
    background: #fafafa;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.category-item:active {
    transform: scale(0.95);
    background: #f5f5f5;
}

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.category-icon.bluetooth {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
}

.category-icon.ap {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}

.category-icon.download {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

/* 可扩展的图标样式（取消注释即可使用）
.category-icon.network {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.category-icon.device {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
}

.category-icon.alarm {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.category-icon.function {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.category-icon.other {
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
}
*/

.category-icon::before {
    content: '';
    display: block;
}

.category-icon.bluetooth::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23039be5'%3E%3Cpath d='M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.category-icon.ap::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238e24aa'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.category-icon.download::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2343a047'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 可扩展的图标（取消注释即可使用）
.category-icon.network::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f57c00'%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-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.category-icon.device::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e91e63'%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") center/contain no-repeat;
}

.category-icon.alarm::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f44336'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.category-icon.function::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232196f3'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.category-icon.other::before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23689f38'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
*/

.category-name {
    font-size: 13px;
    color: #333;
    text-align: center;
}

/* 热门问题 */
.hot-section {
    padding: 16px;
}

.hot-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #000;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
}

.faq-item {
    background: #fff;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.faq-item:active {
    background: #f5f5f5;
}

.faq-q {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    margin-bottom: 8px;
    padding-right: 20px;
    position: relative;
}

.faq-q::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1.5px solid #999;
    border-left: none;
    border-top: none;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.25s;
}

.faq-item.active .faq-q::after {
    transform: translateY(-35%) rotate(-135deg);
}

.faq-a {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    white-space: pre-line;
    display: none;
}

.faq-item.active .faq-a {
    display: block;
}

.faq-item.active .faq-q {
    color: #007aff;
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #eee;
}

@media (min-width: 768px) {
    .page-title {
        font-size: 20px;
        padding: 20px;
    }

    .categories {
        padding: 20px;
        gap: 16px;
    }

    .category-item {
        padding: 20px 12px;
    }

    .category-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .category-name {
        font-size: 14px;
    }

    .hot-section {
        padding: 20px;
    }

    .hot-title {
        font-size: 17px;
    }

    .faq-item {
        padding: 16px 18px;
    }

    .faq-q {
        font-size: 16px;
        padding-right: 24px;
    }

    .faq-q::after {
        width: 9px;
        height: 9px;
        right: 4px;
    }

    .faq-a {
        font-size: 15px;
    }
}