* { box-sizing: border-box; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    margin: 0; padding: 14px;
    background: linear-gradient(160deg, #e8f0fe 0%, #f3f6fb 60%, #eef7f2 100%);
    min-height: 100vh; color: #222;
}
.container {
    background-color: #fff;
    padding: 18px 16px 24px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(30, 60, 120, .10);
    max-width: 640px; margin: 0 auto;
}

/* ===== 页头 ===== */
.page-head { text-align: center; margin: 6px 0 14px; }
.page-head .ph-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(135deg, #2f6fd6, #1f4e9c);
    font-size: 26px; color: #fff; margin-bottom: 8px;
    box-shadow: 0 4px 10px rgba(31, 78, 156, .35);
}
.page-head h3 { margin: 0; font-size: 19px; color: #1a3a6b; letter-spacing: 1px; }
.page-head p { margin: 4px 0 0; font-size: 12.5px; color: #8a97ad; }

/* ===== 输入区 ===== */
.selector-container { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.selector-container label { font-size: 13.5px; color: #567; white-space: nowrap; }
#queryInput {
    padding: 11px 12px; font-size: 15px;
    border-radius: 10px; border: 1.5px solid #c9d6ec;
    margin-right: 0; width: 100%; max-width: 300px;
    outline: none; transition: border-color .2s, box-shadow .2s;
    background: #f8fafd;
}
#queryInput:focus { border-color: #2f6fd6; box-shadow: 0 0 0 3px rgba(47,111,214,.15); background: #fff; }
select {
    padding: 10px; font-size: 14px; margin-bottom: 0;
    border-radius: 10px; border: 1.5px solid #c9d6ec; background: #f8fafd;
    outline: none; color: #334;
}
#extraSelector { width: 170px; }
#extraSelector:focus { border-color: #2f6fd6; }

.btn-container { display: flex; gap: 10px; margin-left: auto; }
.btn1 {
    padding: 10px 22px; border-radius: 22px; border: none; color: #fff;
    cursor: pointer; transition: transform .1s, opacity .2s; font-size: 14px; font-weight: 600;
}
.btn1:active { transform: scale(.96); }
.btn-clear { background: linear-gradient(135deg, #ef7d7d, #d64545); }
.btn-submit { background: linear-gradient(135deg, #2f6fd6, #1f4e9c); }

/* ===== 结果区 ===== */
.display-box {
    background: #f7f9fc; border: 1.5px solid #dde6f3;
    padding: 12px; border-radius: 12px;
    user-select: none; min-height: 300px; max-height: 55vh;
    overflow-y: auto; margin-top: 12px;
}
.display-box .placeholder {
    text-align: center; color: #a5b2c7; padding: 90px 10px; font-size: 14px;
}
.display-box .placeholder .pi { font-size: 44px; display: block; margin-bottom: 10px; }
.loading-tip {
    text-align: center; color: #2f6fd6; font-size: 14px; padding: 40px 0;
}
.loading-tip .dot { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

.result-card {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #e2eaf6; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(30,60,120,.06);
}
.result-icon {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: #e8f0fe;
}
.result-icon.money { background: #fdf3df; }
.result-info { flex: 1; min-width: 0; }
.result-name { font-size: 14.5px; font-weight: 700; color: #1a3a6b; }
.result-count { font-size: 12.5px; color: #8a97ad; margin-top: 2px; }
.result-count b { color: #e37400; }
.empty-tip { text-align: center; color: #8a97ad; padding: 60px 10px; font-size: 14px; }
.empty-tip .ei { font-size: 40px; display: block; margin-bottom: 8px; }
.error-tip {
    background: #fdecec; border: 1px solid #f5c2c2; color: #c0392b;
    border-radius: 10px; padding: 12px; text-align: center; font-size: 13.5px;
}

.view-button {
    border: none;
    background: linear-gradient(135deg, #2f8fd6, #1668b3);
    color: white; padding: 8px 18px; cursor: pointer; border-radius: 20px;
    transition: opacity .2s; font-size: 13.5px; font-weight: 600; flex: none;
    box-shadow: 0 2px 6px rgba(22, 104, 179, .3);
}
.view-button:hover { opacity: .88; }

/* ===== 详情弹窗 ===== */
.qmodal {
    display: none; position: fixed; z-index: 99; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: rgba(15, 30, 60, .45);
    font-family: inherit;
}
.qmodal-content {
    position: relative; background-color: #fff;
    margin: 12% auto; padding: 0; width: 90%; max-width: 520px;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    max-height: 72vh; display: flex; flex-direction: column;
    animation-name: animatetop; animation-duration: .25s;
}
@keyframes animatetop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.qmodal-head {
    background: linear-gradient(135deg, #2f6fd6, #1f4e9c);
    color: #fff; padding: 12px 16px; font-size: 16px; font-weight: 700;
}
.qclose {
    position: absolute; top: 8px; right: 14px; color: rgba(255,255,255,.85);
    font-size: 26px; font-weight: bold; cursor: pointer; background: none; border: none; outline: none;
    line-height: 1;
}
.qclose:hover, .qclose:focus { color: #fff; }
#modalDetails { font-size: 14.5px; margin: 0; padding: 16px; overflow-y: auto; color: #333; line-height: 1.9; }

.copy-btn {
    border: 1px solid #c9d6ec; background: #f0f5fc; color: #1f4e9c;
    border-radius: 12px; padding: 1px 10px; font-size: 12px; cursor: pointer; margin-left: 6px;
}

@media (max-width: 600px) {
    .selector-container { flex-direction: column; align-items: stretch; }
    #queryInput, #extraSelector { width: 100%; max-width: none; }
    .btn-container { justify-content: center; margin-left: 0; }
    .qmodal-content { margin-top: 20%; }
}
/* ===== 聊天式历史记录 ===== */
.chat-user { display: flex; justify-content: flex-end; margin: 12px 0 4px; }
.chat-user .chat-bubble {
    background: linear-gradient(135deg, #2f6fd6, #1f4e9c); color: #fff;
    padding: 9px 14px; border-radius: 16px 16px 4px 16px;
    font-size: 14px; max-width: 80%; word-break: break-all;
    box-shadow: 0 2px 6px rgba(31, 78, 156, .25);
}
.chat-user .chat-tag {
    display: inline-block; margin-left: 8px; font-size: 11px;
    background: rgba(255, 255, 255, .22); border-radius: 8px; padding: 1px 8px;
}
.chat-group {
    text-align: center; font-size: 12px; color: #8a97ad;
    margin: 10px 0 6px; padding: 4px 0;
    border-top: 1px dashed #d6e0f0; border-bottom: 1px dashed #d6e0f0;
}
.chat-group b { color: #e37400; }
.chat-loading { text-align: center; }

/* ===== 详情弹窗：卡片式内容 ===== */
#modalDetails { padding: 14px; }
#modalDetails .dcard {
    background: #fff; border: 1.5px solid #d4e0f2; border-left: 5px solid #2f6fd6;
    border-radius: 14px;
    margin: 0 0 22px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(30, 60, 120, .12);
}
#modalDetails .dcard.money { border-left-color: #e8963a; }
#modalDetails .dcard:last-child { margin-bottom: 4px; }
#modalDetails .dcard-head {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #2f6fd6, #1f4e9c);
    color: #fff; padding: 13px 16px; font-size: 16px;
}
#modalDetails .dcard.money .dcard-head {
    background: linear-gradient(135deg, #e8963a, #c96f10);
}
#modalDetails .dcard-icon {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    background: rgba(255, 255, 255, .22);
}
#modalDetails .dcard-title { font-size: 15.5px; font-weight: 700; flex: 1; min-width: 0; word-break: break-all; }
#modalDetails .dcard-sub {
    font-size: 11px; background: rgba(255, 255, 255, .22);
    border-radius: 10px; padding: 2px 10px; flex: none;
}
#modalDetails .dcard-body { padding: 8px 14px 12px; }
#modalDetails .drow {
    display: flex; align-items: baseline; gap: 8px;
    padding: 7px 0; border-bottom: 1px dashed #e4ebf5;
    font-size: 14px; line-height: 1.7;
}
#modalDetails .drow:last-child { border-bottom: none; }
#modalDetails .dlbl {
    flex: none; width: 118px; color: #7a89a3; font-size: 12.5px;
}
#modalDetails .dval {
    flex: 1; min-width: 0; color: #233; word-break: break-all; font-weight: 600;
}
#modalDetails .dval:empty::after { content: '—'; color: #b8c2d4; font-weight: 400; }
#modalDetails .copy-btn {
    flex: none; border: 1px solid #c9d6ec; background: #eef4fc; color: #1f4e9c;
    border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer;
}
#modalDetails .copy-btn:hover { background: #dfeaf9; }
#modalDetails .call-btn {
    flex: none; border: none; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #35b56a, #1f9148);
    border-radius: 12px; padding: 2px 10px; font-size: 12px;
}

/* ===== 新增：边补2025分户成员 / 全员人口 / 残疾人样式 ===== */
#modalDetails .dcard.disabled { border-left-color: #d97a2b; }
#modalDetails .dcard.disabled .dcard-head {
    background: linear-gradient(135deg, #f09a3e, #d97a2b);
}
#modalDetails .dtag {
    display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600;
    background: rgba(255, 255, 255, .28); border-radius: 8px; padding: 1px 8px;
}
#modalDetails .hh-members {
    margin-top: 8px; padding: 8px 10px;
    background: #fdf6ee; border: 1px dashed #f0d9b5; border-radius: 10px;
}
#modalDetails .hh-member {
    font-size: 13px; line-height: 1.9; color: #4a3b28;
    padding: 3px 0; border-bottom: 1px dashed #f0e4d0;
}
#modalDetails .hh-member:last-child { border-bottom: none; }
#modalDetails .hh-member b { color: #b26a00; }
#modalDetails .dcard-limit-tip {
    margin: 4px 0 8px; padding: 10px 14px; font-size: 13px; color: #a05e00;
    background: #fff7e6; border: 1px solid #ffe0a3; border-radius: 10px;
}
.result-icon.disabled {
    background: linear-gradient(135deg, #f09a3e, #d97a2b);
    box-shadow: 0 2px 6px rgba(217, 122, 43, .25);
}

/* ===== 历年边民补助整合：年份chips ===== */
#modalDetails .ychips { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
#modalDetails .ychip {
    display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4;
    color: #8a5a00; background: #fdeccd; border: 1px solid #f3d391;
    border-radius: 8px; padding: 1px 7px; white-space: nowrap;
}

/* ===== 历年发放统计表 ===== */
#modalDetails .dcard.stats { border-left-color: #8a6d1f; }
#modalDetails .dcard.stats .dcard-head {
    background: linear-gradient(135deg, #d9b23e, #b28a2b);
}
#modalDetails .stat-table {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
}
#modalDetails .stat-table th {
    color: #8a5a00; font-weight: 600; text-align: left;
    padding: 5px 8px; border-bottom: 2px solid #f0d9a8; white-space: nowrap;
}
#modalDetails .stat-table td {
    padding: 6px 8px; border-bottom: 1px dashed #f3e6c4;
    color: #5a4a28; line-height: 1.5;
}
#modalDetails .stat-table td.ycol { font-weight: 700; color: #b26a00; white-space: nowrap; }
#modalDetails .stat-table td.acccol {
    font-family: Consolas, monospace; font-size: 12px; word-break: break-all; max-width: 170px;
}
#modalDetails .stat-total {
    margin-top: 8px; font-size: 13px; font-weight: 700; color: #b26a00;
    text-align: right;
}