/* ========== 子比用户信息UA插件 - 样式 ========== */

/* 侧边栏容器 */
.zui-ua-sidebar {
    background: var(--main-bg-color, #fff);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    font-size: 14px;
}

/* 头部标题 */
.zui-ua-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color, #333);
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    display: flex;
    align-items: center;
    gap: 8px;
}

.zui-ua-header i {
    color: var(--main-color, #3b7ddd);
    font-size: 16px;
}

/* 信息列表 */
.zui-ua-list {
    padding: 8px 0;
}

/* 单个信息项 */
.zui-ua-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color-light, #f8f8f8);
    transition: background 0.2s;
}

.zui-ua-item:last-child {
    border-bottom: none;
}

.zui-ua-item:hover {
    background: var(--hover-bg, #fafafa);
}

/* 标签 */
.zui-ua-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color-light, #888);
    font-size: 13px;
    flex-shrink: 0;
    min-width: 80px;
}

/* 图标 */
.zui-ua-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

/* 浏览器图标 */
.zui-ua-icon-browser::before {
    content: "\f109";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #3b7ddd;
    font-size: 13px;
}

/* 版本号图标 */
.zui-ua-icon-version::before {
    content: "\f1da";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #28a745;
    font-size: 13px;
}

/* 浏览器型号图标 */
.zui-ua-icon-model::before {
    content: "\f1c9";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #17a2b8;
    font-size: 13px;
}

/* 操作系统图标 */
.zui-ua-icon-os::before {
    content: "\f233";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #6f42c1;
    font-size: 13px;
}

/* 设备图标 */
.zui-ua-icon-device::before {
    content: "\f10b";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #e83e8c;
    font-size: 13px;
}

/* IPv4 图标 */
.zui-ua-icon-ipv4::before {
    content: "\f1c0";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #3b7ddd;
    font-size: 13px;
}

/* IPv6 图标 */
.zui-ua-icon-ipv6::before {
    content: "\f1c0";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #e83e8c;
    font-size: 13px;
}

/* 地理位置图标 */
.zui-ua-icon-location::before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #dc3545;
    font-size: 13px;
}

/* ISP 运营商图标 */
.zui-ua-icon-isp::before {
    content: "\f1eb";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #6c757d;
    font-size: 13px;
}

/* UA原始值图标 */
.zui-ua-icon-raw::before {
    content: "\f013";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    color: #fd7e14;
    font-size: 13px;
}

/* 值 */
.zui-ua-value {
    color: var(--text-color, #333);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    word-break: break-all;
    flex: 1;
    margin-left: 12px;
}

/* 版本号 */
.zui-ua-version {
    font-family: "SF Mono", "Consolas", "Monaco", "Courier New", monospace;
    font-size: 12px;
    color: #28a745;
}

/* IP 地址等宽字体 */
.zui-ua-mono {
    font-family: "SF Mono", "Consolas", "Monaco", "Courier New", monospace;
    font-size: 12px;
}

/* 原始 UA 字符串 */
.zui-ua-raw {
    font-family: "SF Mono", "Consolas", "Monaco", "Courier New", monospace;
    font-size: 11px;
    color: #888;
    line-height: 1.5;
    max-height: 60px;
    overflow-y: auto;
    text-align: left;
}

/* 原始 UA 项 */
.zui-ua-raw-item {
    align-items: flex-start;
}

.zui-ua-raw-item .zui-ua-label {
    padding-top: 2px;
}

/* 加载中动画 */
.zui-ua-loading {
    color: #bbb;
    animation: zui-ua-pulse 1.5s ease-in-out infinite;
}

@keyframes zui-ua-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* ========== 暗色模式适配 ========== */

.dark-theme .zui-ua-sidebar,
body.dark .zui-ua-sidebar,
[data-theme="dark"] .zui-ua-sidebar {
    background: #1e1e2e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-theme .zui-ua-header,
body.dark .zui-ua-header,
[data-theme="dark"] .zui-ua-header {
    color: #e0e0e0;
    border-bottom-color: #2a2a3a;
}

.dark-theme .zui-ua-item,
body.dark .zui-ua-item,
[data-theme="dark"] .zui-ua-item {
    border-bottom-color: #2a2a3a;
}

.dark-theme .zui-ua-item:hover,
body.dark .zui-ua-item:hover,
[data-theme="dark"] .zui-ua-item:hover {
    background: #252535;
}

.dark-theme .zui-ua-value,
body.dark .zui-ua-value,
[data-theme="dark"] .zui-ua-value {
    color: #e0e0e0;
}

.dark-theme .zui-ua-raw,
body.dark .zui-ua-raw,
[data-theme="dark"] .zui-ua-raw {
    color: #999;
}

.dark-theme .zui-ua-loading,
body.dark .zui-ua-loading,
[data-theme="dark"] .zui-ua-loading {
    color: #666;
}

/* ========== 响应式 ========== */

@media (max-width: 768px) {
    .zui-ua-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .zui-ua-value {
        text-align: left;
        margin-left: 0;
    }

    .zui-ua-label {
        min-width: auto;
    }
}