/* 急救救命卡 first-aid */
.fa-alert {
    margin: 18px 0 8px;
    padding: 14px 18px;
    background: #fff1f0;
    border: 1px solid #ffccc7;
    border-left: 4px solid #ff4d4f;
    border-radius: 12px;
    color: #7a1f1a;
    font-size: 15px;
    line-height: 1.75;
}
.fa-alert b { color: #cf1322; }

.fa-intro { padding: 6px 2px 0; }
.fa-group-title {
    margin: 26px 0 12px;
    font-size: 18px;
    color: #1f2937;
    border-left: 4px solid #ff4d4f;
    padding-left: 10px;
}

.fa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
}
.fa-card {
    background: #fff;
    border: 1px solid #ffe0e0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 77, 79, .06);
    transition: box-shadow .2s, transform .2s;
}
.fa-card[open] { box-shadow: 0 6px 18px rgba(255, 77, 79, .14); }
.fa-card summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #b91c1c;
    user-select: none;
}
.fa-card summary::-webkit-details-marker { display: none; }
.fa-card summary::after {
    content: "▸";
    margin-left: auto;
    color: #ff7875;
    transition: transform .2s;
}
.fa-card[open] summary::after { transform: rotate(90deg); }
.fa-card-icon { font-size: 22px; }
.fa-card summary small {
    font-weight: 400;
    color: #9ca3af;
    font-size: 12px;
    margin-left: 2px;
}
.fa-card-body { padding: 4px 16px 16px; }
.fa-when {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6b7280;
    background: #fafafa;
    padding: 8px 10px;
    border-radius: 8px;
}
.fa-sub {
    margin: 12px 0 4px;
    font-weight: 700;
    color: #374151;
    font-size: 14px;
}
.fa-steps, .fa-dont { margin: 6px 0 10px; padding-left: 22px; }
.fa-steps li, .fa-dont li { margin: 5px 0; line-height: 1.7; font-size: 14px; color: #374151; }
.fa-steps li b, .fa-dont li b { color: #cf1322; }
.fa-dont {
    list-style: none;
    padding-left: 4px;
    border-left: 3px solid #ffa39e;
    background: #fff7f6;
    padding: 8px 10px;
}
.fa-call {
    margin: 6px 0 0;
    padding: 9px 12px;
    background: #fff1f0;
    border-radius: 8px;
    color: #cf1322;
    font-size: 13.5px;
    font-weight: 600;
}

/* 节拍器 */
.fa-metro {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0 4px;
    padding: 10px 12px;
    background: #fff7f6;
    border-radius: 10px;
}
.fa-metro-btn {
    border: none;
    background: #ff4d4f;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}
.fa-metro-btn:hover { background: #cf1322; }
.fa-metro-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #ffccc7;
    transition: transform .08s ease, background .08s ease;
}
.fa-metro-dot.is-beat {
    transform: scale(1.5);
    background: #ff4d4f;
}
.fa-metro-rate { font-size: 13px; color: #6b7280; }
.fa-metro-rate select { margin-left: 4px; }

/* AI 急救助手 */
.fa-ai {
    margin: 30px 0 10px;
    padding: 20px;
    background: linear-gradient(135deg, #fff5f5, #fff);
    border: 1px solid #ffd6d6;
    border-radius: 16px;
}
.fa-ai-title { margin: 0 0 6px; font-size: 20px; color: #b91c1c; }
.fa-ai-desc { margin: 0 0 12px; font-size: 14px; color: #4b5563; line-height: 1.7; }
.fa-ai-desc b { color: #cf1322; }
.fa-ai-scene {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6b7280;
    background: #fff;
    border: 1px dashed #ffb3b0;
    border-radius: 8px;
    padding: 7px 10px;
}
.fa-ai-scene b { color: #cf1322; }
.fa-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ffccc7;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
    font-family: inherit;
}
.fa-input:focus { outline: none; border-color: #ff4d4f; box-shadow: 0 0 0 3px rgba(255,77,79,.12); }
.fa-tip { margin: 6px 0 12px; font-size: 12.5px; color: #9ca3af; }
.fa-ask {
    border: none;
    background: #ff4d4f;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 10px;
    cursor: pointer;
}
.fa-ask:hover { background: #cf1322; }
.fa-ask:disabled { opacity: .6; cursor: default; }
.fa-status { margin: 10px 0 0; font-size: 13.5px; color: #6b7280; }
.fa-status.is-loading { color: #cf1322; }
.fa-answer {
    margin-top: 14px;
    border: 1px solid #ffd6d6;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.fa-answer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff1f0;
    border-bottom: 1px solid #ffe0e0;
}
.fa-answer-badge { font-weight: 700; color: #cf1322; font-size: 14px; }
.fa-copy {
    border: 1px solid #ffb3b0;
    background: #fff;
    color: #cf1322;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}
.fa-copy.is-done { background: #f6ffed; border-color: #b7eb8f; color: #389e0d; }
.fa-answer-text {
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.85;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
}
.fa-answer-note {
    margin: 0;
    padding: 10px 14px;
    font-size: 12.5px;
    color: #b91c1c;
    background: #fff7f6;
    border-top: 1px solid #ffe0e0;
}

@media (prefers-color-scheme: dark) {
    .fa-alert { background: #2a1414; border-color: #5c2222; color: #ffb3b0; }
    .fa-alert b { color: #ff7875; }
    .fa-group-title { color: #f3f4f6; }
    .fa-card { background: #1f1f25; border-color: #4a2b2b; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
    .fa-card summary { color: #ff9c9c; }
    .fa-card summary::after { color: #ff7875; }
    .fa-when { background: #2a2a32; color: #a1a1aa; }
    .fa-steps li, .fa-dont li { color: #d4d4d8; }
    .fa-dont { background: #2a1a1a; border-color: #5c2222; }
    .fa-call { background: #2a1414; color: #ff7875; }
    .fa-metro { background: #2a1a1a; }
    .fa-metro-dot { background: #5c2222; }
    .fa-ai { background: linear-gradient(135deg, #2a1414, #1f1f25); border-color: #5c2222; }
    .fa-ai-desc, .fa-ai-scene { color: #c4b5b5; }
    .fa-ai-scene { background: #1f1f25; border-color: #5c2222; }
    .fa-input { background: #1a1a20; border-color: #5c2222; color: #e5e7eb; }
    .fa-answer { background: #1f1f25; border-color: #5c2222; }
    .fa-answer-head { background: #2a1414; border-color: #4a2b2b; }
    .fa-answer-text { color: #e5e7eb; }
    .fa-answer-note { background: #2a1a1a; border-color: #4a2b2b; color: #ff9c9c; }
    .fa-copy { background: #1f1f25; }
}