/* 本工具仅定义 common.css 未提供的样式，公共类（卡片/按钮/空状态/搜索等）复用 common.css */

/* 卡片头部右侧计数 */
.header-count {
    font-size: 12px;
    color: #6b7280;
    line-height: 1;
}

/* 步数文字与重置按钮垂直居中 */
.card-header-right {
    align-items: center;
}

/* 分段选择器（计算类型 / 性别 / 称呼方式） */
.seg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seg-item {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.seg-item:hover {
    border-color: #8b5cf6;
    color: #6d28d9;
}

.seg-item.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #fff;
}

/* 单块布局：上方选择、下方结果 */
.select-area { margin-bottom: 4px; }
.result-area { margin-top: 4px; }

/* 关系链展示 */
.chain-display {
    min-height: 42px;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 14px;
    color: #1f2937;
    word-break: break-all;
}

.chain-display.empty {
    color: #9ca3af;
}

/* 关系按钮网格：默认一行 10 个 */
.relation-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
}

/* 窄屏自动折行 */
@media (max-width: 640px) {
    .relation-grid { grid-template-columns: repeat(5, 1fr); }
}

/* 一键示例 chips */
.example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.example-chip {
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.example-chip:hover {
    background: #f5f3ff;
    border-color: #8b5cf6;
    color: #6d28d9;
}

.relation-btn {
    padding: 9px 0;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.relation-btn:hover {
    background: #f5f3ff;
    border-color: #8b5cf6;
    color: #6d28d9;
}

/* 操作按钮行 */
.action-row {
    display: flex;
    gap: 8px;
}

.action-row .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 计算结果 */
.result-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.result-mode {
    font-size: 13px;
    color: #6b7280;
}

.result-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
    background: linear-gradient(135deg, #f5f3ff, #eef2ff);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
}

.result-title {
    font-size: 32px;
    font-weight: 700;
    color: #6d28d9;
    line-height: 1.2;
}

.copy-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: all 0.15s;
}

.copy-btn:hover {
    background: #f5f3ff;
    border-color: #8b5cf6;
}

.result-chain {
    font-size: 13px;
    color: #6b7280;
}

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

body.dark .seg-item {
    background: #212529;
    border-color: #495057;
    color: #cfcfcf;
}

body.dark .seg-item:hover {
    border-color: #8b5cf6;
    color: #c4b5fd;
}

body.dark .seg-item.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #fff;
}

body.dark .chain-display {
    background: #1a1d20;
    border-color: #495057;
    color: #e0e0e0;
}

body.dark .chain-display.empty { color: #8a9098; }

body.dark .relation-btn {
    background: #212529;
    border-color: #495057;
    color: #cfcfcf;
}

body.dark .relation-btn:hover {
    background: #2d2d3a;
    border-color: #8b5cf6;
    color: #c4b5fd;
}

body.dark .result-mode,
body.dark .result-chain { color: #9aa0a6; }

body.dark .result-main {
    background: #2d2d3a;
    border-color: #495057;
}

body.dark .result-title { color: #c4b5fd; }

body.dark .copy-btn {
    background: #212529;
    border-color: #495057;
    color: #cfcfcf;
}

body.dark .copy-btn:hover {
    background: #2d2d3a;
    border-color: #8b5cf6;
}

body.dark .example-chip {
    background: #212529;
    border-color: #495057;
    color: #cfcfcf;
}

body.dark .example-chip:hover {
    background: #2d2d3a;
    border-color: #8b5cf6;
    color: #c4b5fd;
}