/* 身份证查询校验 - 仅保留工具专属样式，通用样式复用 common.css */

/* 身份证输入框：等宽字体 + 字距，便于逐位核对 */
.id-input {
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 1px;
}

.id-input::placeholder {
    letter-spacing: normal;
    font-size: 14px;
}

.input-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #9ca3af;
}

/* 校验状态徽标 */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-ok {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
}

/* 右侧结果区 */
.preview-body {
    padding: 15px;
    min-height: 320px;
}

.result-list {
    display: flex;
    flex-direction: column;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
}

.result-item:hover {
    background: #f9fafb;
}

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

.item-label {
    flex-shrink: 0;
    min-width: 92px;
    font-size: 14px;
    color: #6b7280;
}

.item-value {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    word-break: break-all;
}

/* 错误提示条（common.css 的 .error-msg 默认隐藏，此处自定义展示） */
.alert-error {
    margin-top: 15px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-icon {
    font-size: 15px;
}

/* 号码结构分段解析 */
.id-structure {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e5e7eb;
}

.id-seg {
    flex: 1;
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    text-align: center;
}

.id-seg-value {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.id-seg-label {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
}

/* 未输满该段时淡化 */
.id-seg-incomplete {
    opacity: 0.5;
}

/* 出错段高亮 */
.id-seg-error {
    border-color: #ef4444;
    background: #fef2f2;
}

.id-seg-error .id-seg-value {
    color: #dc2626;
}

.id-seg-error .id-seg-label {
    color: #dc2626;
}

/* 深色模式适配 */
body.dark .input-hint {
    color: #9aa0a6;
}

body.dark .status-ok {
    color: #34d399;
    background: rgba(16, 185, 129, 0.18);
}

body.dark .result-item {
    border-bottom-color: #495057;
}

body.dark .item-label {
    color: #9aa0a6;
}

body.dark .item-value {
    color: #e0e0e0;
}

body.dark .alert-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

body.dark .result-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.dark .id-structure {
    border-top-color: #495057;
}

body.dark .id-seg {
    border-color: #495057;
    background: #1e1e1e;
}

body.dark .id-seg-value {
    color: #e0e0e0;
}

body.dark .id-seg-label {
    color: #9aa0a6;
}

body.dark .id-seg-error {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.15);
}

body.dark .id-seg-error .id-seg-value,
body.dark .id-seg-error .id-seg-label {
    color: #f87171;
}