/* 康年体检 报告查询 — 现代化主题  2026-10-04
   仅做视觉美化：不改任何表单字段名、元素 id、表格结构或 PDF 导出逻辑。
   配色取自 logo（红盾 + 青绿），主色青绿、强调红、底色浅灰。 */

:root {
    --kn-primary: #13b5a6;
    --kn-primary-dark: #0e9589;
    --kn-primary-soft: #e6f8f5;
    --kn-accent: #e2231a;
    --kn-ink: #1f2a37;
    --kn-ink-soft: #55606e;
    --kn-muted: #8a95a3;
    --kn-line: #e8ecf1;
    --kn-bg: #f4f6fa;
    --kn-card: #ffffff;
    --kn-radius: 14px;
    --kn-shadow: 0 10px 30px rgba(16, 24, 40, .08);
    --kn-shadow-sm: 0 2px 10px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body.kn-auth,
body.kn-report {
    margin: 0;
    color: var(--kn-ink);
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ============================ 品牌标识 ============================
   原站 logo / 印章图片是克隆来源「嘉仁体检 / 北京嘉仁门诊部」的，不是康年的，
   这里用纯 CSS 文字标识代替，等康年提供自己的 logo 后再换成图片。 */
.kn-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--kn-ink); }
.kn-brand-mark {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #1cc4b4 0%, var(--kn-primary-dark) 100%);
    box-shadow: 0 6px 14px rgba(14, 149, 137, .3);
}
.kn-brand-mark::before,
.kn-brand-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}
.kn-brand-mark::before { width: 20px; height: 6px; }
.kn-brand-mark::after { width: 6px; height: 20px; }
.kn-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.kn-brand-text b { font-size: 19px; font-weight: 800; letter-spacing: 2px; color: var(--kn-ink); }
.kn-brand-text small { font-size: 9.5px; letter-spacing: 1.6px; color: var(--kn-muted); margin-top: 3px; }

.kn-brand-lg { flex-direction: column; gap: 12px; }
.kn-brand-lg .kn-brand-mark { width: 60px; height: 60px; border-radius: 17px; }
.kn-brand-lg .kn-brand-mark::before { width: 30px; height: 9px; }
.kn-brand-lg .kn-brand-mark::after { width: 9px; height: 30px; }

/* ============================ 登录页 ============================ */
body.kn-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: radial-gradient(1100px 520px at 12% -8%, #d7f7f0 0%, rgba(215, 247, 240, 0) 60%),
                radial-gradient(900px 500px at 108% 112%, #e4ecff 0%, rgba(228, 236, 255, 0) 55%),
                linear-gradient(135deg, #eefcf8 0%, #f3f7ff 60%, #f7fffb 100%);
}

.kn-auth-wrap { width: 100%; max-width: 430px; }

.kn-card {
    background: var(--kn-card);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow);
    border: 1px solid rgba(255, 255, 255, .7);
}

.kn-login { padding: 34px 30px 30px; }

.kn-login-head { text-align: center; margin-bottom: 22px; }
.kn-logo { height: 54px; width: auto; margin-bottom: 14px; }
.kn-login-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: .5px; color: var(--kn-ink); }
.kn-login-sub { margin: 6px 0 0; color: var(--kn-muted); font-size: 13px; letter-spacing: 3px; }

/* 分段式切换 */
.kn-tabs {
    display: flex;
    gap: 4px;
    background: #eef1f5;
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 22px;
}
.kn-tab {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--kn-ink-soft);
    font-size: 15px;
    font-weight: 600;
    padding: 9px 0;
    border-radius: 9px;
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
}
.kn-tab.active {
    background: #fff;
    color: var(--kn-primary-dark);
    box-shadow: var(--kn-shadow-sm);
}

.kn-form { display: flex; flex-direction: column; gap: 15px; }

.kn-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f6f8fb;
    border: 1.5px solid var(--kn-line);
    border-radius: 11px;
    padding: 0 14px;
    height: 50px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.kn-field:focus-within {
    border-color: var(--kn-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(19, 181, 166, .14);
}
.kn-field .kn-ico { flex: none; width: 20px; height: 20px; color: var(--kn-muted); }
.kn-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: var(--kn-ink);
    font-family: inherit;
    height: 100%;
}
.kn-field input::placeholder { color: #aab2bd; }
/* 去掉数字框上下箭头 */
.kn-field input[type=number]::-webkit-outer-spin-button,
.kn-field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kn-field input[type=number] { -moz-appearance: textfield; }

.kn-field-code { position: relative; padding-right: 6px; }
.kn-code-btn {
    flex: none;
    border: 0;
    background: var(--kn-primary-soft);
    color: var(--kn-primary-dark);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background .18s ease, color .18s ease;
}
.kn-code-btn:hover:not(:disabled) { background: #d4f2ee; }
.kn-code-btn:disabled { color: var(--kn-muted); background: #eef1f5; cursor: not-allowed; }

.kn-btn {
    margin-top: 4px;
    border: 0;
    border-radius: 11px;
    height: 50px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    background: linear-gradient(135deg, var(--kn-primary) 0%, var(--kn-primary-dark) 100%);
    box-shadow: 0 8px 18px rgba(14, 149, 137, .28);
    transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}
.kn-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(14, 149, 137, .34); }
.kn-btn:active:not(:disabled) { transform: translateY(0); }
.kn-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.kn-msg {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff4f3;
    border: 1px solid #f7d4d2;
    text-align: center;
    color: var(--kn-accent);
    font-size: 14px;
    font-weight: 600;
}
.kn-msg:empty { display: none; }
.kn-hint { margin: 18px 0 0; text-align: center; color: var(--kn-muted); font-size: 12.5px; }
.kn-footer { margin-top: 20px; text-align: center; color: var(--kn-muted); font-size: 12px; }

/* ============================ 报告页 ============================ */
body.kn-report { background: var(--kn-bg); }

.kn-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--kn-line);
    box-shadow: var(--kn-shadow-sm);
}
.kn-topbar-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.kn-topbar .kn-logo { height: 38px; margin: 0; }
.kn-topbar-info { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.kn-phone { color: var(--kn-ink-soft); font-size: 13px; }
.kn-phone b { color: var(--kn-accent); }
.kn-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--kn-ink-soft);
    border: 1.5px solid var(--kn-line);
    background: #fff;
    border-radius: 9px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    transition: all .18s ease;
}
.kn-logout:hover { color: var(--kn-accent); border-color: #f3c6c4; background: #fff6f5; }

.kn-wrap { max-width: 960px; margin: 0 auto; padding: 22px 18px 60px; }

.kn-hero { text-align: center; margin: 8px 0 22px; }
.page-header-title.kn-hero-title,
.kn-hero .page-header-title {
    display: inline-block;
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--kn-primary-dark);
}
.kn-hero .page-header-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--kn-primary), var(--kn-primary-dark));
}

/* 操作按钮条 */
.kn-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.kn-actions .am-btn,
.kn-actions a {
    text-decoration: none;
    border: 0;
    border-radius: 11px;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .18s ease;
}
#generatePdf {
    color: #fff;
    background: linear-gradient(135deg, var(--kn-primary) 0%, var(--kn-primary-dark) 100%) !important;
    box-shadow: 0 8px 18px rgba(14, 149, 137, .28);
}
#downloadPdf {
    color: var(--kn-primary-dark) !important;
    background: var(--kn-primary-soft) !important;
}
.kn-actions a:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(14, 149, 137, .26); }

/* 折叠分区卡片 */
.kn-report .am-accordion,
.kn-report section[data-am-widget="accordion"] {
    margin: 0 0 16px;
    background: var(--kn-card);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow-sm);
    overflow: hidden;
    border: 1px solid var(--kn-line);
}
.kn-report .am-accordion-item,
.kn-report .am-accordion-gapped .am-accordion-item,
.kn-report .am-accordion-gapped .am-accordion-item.am-active { border: 0; margin: 0; }
.kn-report .am-accordion-item + .am-accordion-item { border-top: 1px solid var(--kn-line); }
.kn-report .am-accordion-gapped .am-accordion-title { border-bottom: 1px solid var(--kn-line); }
.kn-report .am-accordion-gapped .am-active .am-accordion-title { background: #fbfdfd; color: var(--kn-ink); }

/* 折叠箭头：用纯 CSS 画，不依赖 FontAwesome 字体文件 */
.kn-report .am-accordion-gapped .am-accordion-title:after {
    content: "";
    font: 0/0 a;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--kn-muted);
    border-bottom: 2px solid var(--kn-muted);
    position: absolute;
    right: 22px;
    top: 50%;
    margin-top: -6px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    transition: transform .2s ease;
}
/* kn-open 由页面底部脚本按内容区是否展开（am-in）同步 */
.kn-report .am-accordion-gapped .am-accordion-title.kn-open:after {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* 往期报告：去掉内层面板的双边框，日期按钮横向排列 */
.kn-report .am-panel,
.kn-report .am-panel-default { border: 0; box-shadow: none; background: transparent; margin: 0; }
.kn-report .am-panel-bd { padding: 6px 2px 2px; }
.kn-report .am-panel-bd p { margin: 0 0 10px; color: var(--kn-ink-soft); font-size: 14px; }
.kn-report .am-panel-bd br { display: none; }
.kn-report .am-panel-bd a { margin: 0 8px 8px 0 !important; }

.kn-report .am-accordion-title,
.kn-report .am-accordion-title1 {
    background: #fff;
    color: var(--kn-ink);
    font-size: 16px;
    font-weight: 700;
    padding: 15px 44px 15px 20px;
    border-left: 4px solid var(--kn-primary);
    position: relative;
    cursor: pointer;
}
.kn-report .am-accordion-title1 {
    background: linear-gradient(135deg, var(--kn-primary) 0%, var(--kn-primary-dark) 100%);
    color: #fff;
    margin: 24px 0 0;
    border-radius: 12px 12px 0 0;
    border-left: 0;
    cursor: default;
}
.kn-report .am-accordion-title span { color: var(--kn-ink-soft); font-weight: 600; font-size: 14px; }
.kn-report .am-accordion-title:after {
    color: var(--kn-muted);
    right: 18px;
}
.kn-report .am-accordion-content { padding: 6px 16px 18px; overflow-x: auto; }

/* 往期报告按钮 */
.kn-report .am-accordion-content .am-btn-primary {
    background: var(--kn-primary-soft);
    color: var(--kn-primary-dark);
    border: 1px solid #cdeee9;
    border-radius: 9px;
    padding: 7px 16px;
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
}
.kn-report .am-accordion-content .am-btn-default {
    border-radius: 9px;
    border: 1px solid var(--kn-line);
    text-decoration: none;
    color: var(--kn-ink-soft);
    padding: 7px 12px;
    display: inline-block;
}

/* 表格 */
.kn-report .am-table {
    width: 100%;
    margin: 6px 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    color: var(--kn-ink);
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--kn-line);
}
.kn-report .am-table th,
.kn-report .am-table td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--kn-line);
    text-align: left;
    vertical-align: middle;
}
.kn-report .am-table thead th,
.kn-report .am-table tr.am-success th {
    background: var(--kn-primary-soft);
    color: var(--kn-primary-dark);
    font-weight: 700;
    white-space: nowrap;
}
.kn-report .am-table td.am-success {
    background: #f7faf9;
    color: var(--kn-ink-soft);
    font-weight: 600;
    white-space: nowrap;
    width: 30%;
}
.kn-report .am-table tbody tr:last-child td { border-bottom: 0; }
.kn-report .am-table-striped tbody tr:nth-child(odd) td { background: #fbfcfe; }
.kn-report .am-table-striped tbody tr:nth-child(odd) td.am-success { background: #f3f7f6; }
.kn-report .am-table tbody tr:hover td { background: #f0faf8; }
.kn-report .red-text,
.kn-report .am-table span[style*="color:red"] { color: var(--kn-accent) !important; font-weight: 700; }

/* 用户信息表首行（空占位行，PDF 逻辑会 slice 掉）隐藏不显示 */
#userInfoTable tbody tr:first-child { display: none; }

/* 「前次结果」列在模板里恒为空，屏幕上隐藏；PDF 导出本来就会 splice 掉这一列 */
#abnormalItemsTable th:nth-child(3), #abnormalItemsTable td:nth-child(3),
[id^="departmentResultsTable"] th:nth-child(3), [id^="departmentResultsTable"] td:nth-child(3) { display: none; }

/* 参考值、单位不在连字符或斜杠处折行（如 18.5-23.9） */
#abnormalItemsTable td:nth-child(6), #abnormalItemsTable td:nth-child(7),
[id^="departmentResultsTable"] td:nth-child(6), [id^="departmentResultsTable"] td:nth-child(7) { white-space: nowrap; }

/* 异常解读：模板 colgroup 是 20/60/20，「建议」列太窄被挤成长条；屏幕上改成均衡比例（PDF 有自己的列宽，不受影响） */
#abnormalInterpretationTable col:nth-child(1) { width: 18% !important; }
#abnormalInterpretationTable col:nth-child(2) { width: 44% !important; }
#abnormalInterpretationTable col:nth-child(3) { width: 38% !important; }

/* 科室小结行：覆盖模板内联的灰底，检查医生靠右且不折行 */
.kn-report [id^="departmentInfoTable"] { margin-top: 10px; }
.kn-report [id^="departmentInfoTable"] td { background-color: #f7faf9 !important; color: var(--kn-ink-soft); font-size: 13px; }
.kn-report [id^="departmentInfoTable"] td:last-child { white-space: nowrap; text-align: right; }

/* 影像图片 */
.kn-report #imageReportTable img { border-radius: 10px; box-shadow: var(--kn-shadow-sm); }
.kn-report #imageReportTable td { text-align: center; }

/* 页脚 */
.kn-report-footer {
    text-align: center;
    color: var(--kn-muted);
    font-size: 12px;
    padding: 26px 16px 36px;
}

.kn-logout { white-space: nowrap; }

@media (max-width: 640px) {
    .kn-login { padding: 28px 20px 24px; }
    .kn-wrap { padding: 16px 12px 48px; }
    .kn-topbar-inner { padding: 9px 12px; gap: 10px; }
    .kn-topbar .kn-brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .kn-topbar .kn-brand-mark::before { width: 17px; height: 5px; }
    .kn-topbar .kn-brand-mark::after { width: 5px; height: 17px; }
    .kn-topbar .kn-brand-text b { font-size: 16px; letter-spacing: 1px; white-space: nowrap; }
    .kn-topbar .kn-brand-text small { display: none; }
    .kn-logout { padding: 6px 10px; }
    .kn-phone { display: none; }
    .kn-hero .page-header-title { font-size: 22px; }
    .kn-report .am-accordion-content { padding: 4px 10px 14px; }
    .kn-report .am-table th,
    .kn-report .am-table td { padding: 8px 6px; font-size: 13px; }
    .kn-report .am-table td.am-success { width: 38%; }
    #abnormalItemsTable th:nth-child(1), #abnormalItemsTable td:nth-child(1),
    [id^="departmentResultsTable"] th:nth-child(1), [id^="departmentResultsTable"] td:nth-child(1) { display: none; }
    #abnormalInterpretationTable col:nth-child(1) { width: 22% !important; }
    #abnormalInterpretationTable col:nth-child(2) { width: 39% !important; }
    #abnormalInterpretationTable col:nth-child(3) { width: 39% !important; }
}

/* 360px 一类的小屏安卓机：再收紧一点，表格不出现横向滚动 */
@media (max-width: 380px) {
    .kn-wrap { padding-left: 8px; padding-right: 8px; }
    .kn-report .am-accordion-content { padding: 4px 6px 12px; }
    .kn-report .am-table th,
    .kn-report .am-table td { padding: 7px 5px; font-size: 12.5px; }
}