/* ===== 主布局容器：铺满屏幕 ===== */
.main-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0 0 36px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

/* ===== 主搜索区卡片最大宽度并水平居中 ===== */
.search-section {
    width: 100%;
    max-width: 1280px;        /* 统一下方区域宽度 */
    margin: 40px auto 28px auto;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* 搜索卡片本体，最大宽度拉满 */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 8px 32px #1b5e2010;
    padding: 32px 18px 28px 18px;  /* 极限缩小左右内边距 */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* 搜索行撑满整个卡片 */
.search-bar-row {
    width: 100%;
    display: flex;
    gap: 12px;
    margin: 26px 0 0 0;
    box-sizing: border-box;
}

/* 选择框和输入按钮自适应 */
.search-bar-row select,
.search-bar-row button {
    height: 50px;
    min-width: 128px;
    max-width: 240px;
    font-size: 1.11em;
}

.search-bar-row select {
    background: #f1faef;
    border-radius: 12px;
    border: none;
    padding: 0 18px;
    font-weight: 600;
    color: #256428;
}

.search-bar-row input[type="text"] {
    flex: 1 1 auto;
    height: 50px;
    border: none;
    border-radius: 12px;
    background: #f6f8f4;
    font-size: 1.13em;
    padding: 0 22px;
    margin: 0;
    min-width: 200px;
}

.search-bar-row button {
    background: #357a38;
    color: #fff;
    border-radius: 22px;
    border: none;
    font-size: 1.16em;
    font-weight: bold;
    padding: 0 28px;
    box-shadow: 0 1px 6px #357a3813;
    transition: background 0.2s;
    margin-left: 0;
}

.search-bar-row button:hover {
    background: #245827;
}

/* ===== 下方并排区块，统一宽度并左右极限对齐 ===== */
.bottom-row {
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;           /* 两区之间适度间距 */
    align-items: stretch;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 8px;
}

/* 公告区、地图区极限拉伸 */
.notice-board, .map-block {
    flex: 1 1 0;
    min-width: 0;
    max-width: 630px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    /* 让两块高度都相近 */
    min-height: 260px;
}

/* 公告系统样式 */
.notice-board {
    background: #f8fdf8;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(53, 122, 56, 0.18);
    border-left: 4px solid #357a38;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.notice-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, #357a38 0%, #468653 100%);
    color: white;
    display: flex;
    align-items: center;
}
.notice-title { margin: 0; font-size: 16px; font-weight: 500; display: flex; align-items: center; text-shadow: 0 1px 1px rgba(0,0,0,0.12);}
.notice-title i { margin-right: 10px; font-size: 18px;}
.notice-count { background: rgba(255,255,255,0.25); padding: 3px 9px; border-radius: 12px; font-size: 12px; margin-left: 10px;}
.notice-list { max-height: 60vh; overflow-y: auto;}
.notice-item { padding: 16px 18px; border-bottom: 1px solid #e6f3e5; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);}
.notice-item:hover { background: #f0f9ef;}
.notice-item:last-child { border-bottom: none;}
.notice-item-date { font-size: 11px; color: #6b8e6d; letter-spacing: 0.5px; margin-bottom: 6px;}
.notice-item-title { font-weight: 600; color: #245827; display: flex; justify-content: space-between; align-items: center;}
.notice-item-title::after { content: "›"; color: #4a934d; font-size: 20px; transition: all 0.3s;}
.notice-item.expanded .notice-item-title::after { transform: rotate(90deg);}
.notice-item-content { display: none; padding-top: 12px; color: #3a5c3b; font-size: 14px; line-height: 1.7; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;}
.notice-item-content p { margin: 10px 0;}
.notice-item.expanded .notice-item-content { display: block; animation: fadeIn 0.35s ease-out; max-height: 400px;}
.notice-empty { padding: 25px; text-align: center; color: #8fa98f; font-style: italic;}
.notice-empty i { font-size: 24px; display: block; margin-bottom: 10px; color: #c1d6c0;}
.notice-error { color: #c53030; background: #fff0f0; border-left: 3px solid #c53030; padding: 12px 15px; margin: 8px 0; border-radius: 0 4px 4px 0; font-size: 13px;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: translateY(0);}}
.notice-item-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;}
.notice-item.high-priority { border-left: 3px solid #ff6b6b; background: rgba(255,107,107,0.05);}

.map-block {
    max-width: 720px;
    margin: 30px auto 0 auto;
    background: #e9f1fb;
    border-radius: 12px;
    min-height: 220px;
    padding: 28px 20px 18px 20px;
    box-shadow: 0 1px 10px #357a3810;
    color: #357a38;
    font-size: 1.18em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    position: relative;
    /* 不要用display:flex，否则标题会错位！ */
}





/* 响应式：小屏幕堆叠 */
@media (max-width: 1100px) {
    .search-section, .container, .bottom-row {
        max-width: 99vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .bottom-row {
        flex-direction: column;
        gap: 18px;
    }
    .notice-board, .map-block {
        max-width: 99vw;
        min-width: 0;
    }
    .container { padding: 18px 2vw; }
    .search-bar-row { flex-direction: column; gap: 10px; }
    .search-bar-row select,
    .search-bar-row input[type="text"],
    .search-bar-row button { width: 100%; max-width: 100%; min-width: 0; }
}
.container {
    max-width: 1200px;      /* 你想多宽都行，也可以1100/980 */
    width: 100%;
    margin: 0 auto;
    background: #fff;       /* 纯白背景 */
    border-radius: 28px;    /* 大圆角，更现代 */
    box-shadow: 0 8px 32px #1b5e2014;  /* 柔和阴影 */
    padding: 48px 38px 38px 38px;      /* 上下左右留足空间 */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s;
}

/* 小屏下也要自适应 */
@media (max-width: 900px) {
    .container {
        max-width: 99vw;
        padding: 20px 2vw;
        border-radius: 18px;
    }
}
.container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    background: #f5f8fb;      /* 柔和淡蓝灰色，清新科技感 */
    border-radius: 28px;
    box-shadow: 0 8px 32px #357a380c;
    padding: 42px 42px 36px 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.balance-calc-block {
    background: #f6fbf4;
    border-radius: 18px;
    max-width: 700px;
    margin: 44px auto 36px;
    box-shadow: 0 4px 18px #dbe7dc85;
    padding: 30px 38px 22px 38px;
    font-family: "微软雅黑", "Noto Sans SC", Arial, sans-serif;
}
.balance-calc-title {
    font-size: 1.35em;
    font-weight: 700;
    color: #357a38;
    background: #e2ede3;
    border-radius: 8px;
    padding: 14px 0;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.04em;
}
.file-row, .btn-row, .check-row, .preview-row, .result-preview, .log-row, .copyright-row {
    margin-bottom: 14px;
}
input[type="file"] { margin-left: 8px; }
.calc-btn, .export-btn, .template-btn {
    background: #43a047;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 1em;
    margin-right: 10px;
    cursor: pointer;
}
.calc-btn { background: #43a047; }
.export-btn { background: #357a38; }
.template-btn { background: #889f8c; }
textarea {
    width: 100%; min-height: 100px; font-size: 1em; border-radius: 6px; padding: 6px;
    border: 1px solid #b8d6bc; background: #f7fff8; resize: vertical;
}
.result-title { font-weight: 600; margin-bottom: 5px; color: #357a38; }
.copyright-row { color: #888; font-size: 0.95em; text-align: right; }
a { color: #357a38; text-decoration: underline; }

/* 植物检索表模块样式 */
.identification-block {
    background: #f0f8ff;
    border-radius: 18px;
    max-width: 700px;
    margin: 44px auto 36px;
    box-shadow: 0 4px 18px #dbe7dc85;
    padding: 30px 38px 22px 38px;
    font-family: "微软雅黑", "Noto Sans SC", Arial, sans-serif;
}

.identification-title {
    font-size: 1.35em;
    font-weight: 700;
    color: #2c5aa0;
    background: #e3f2fd;
    border-radius: 8px;
    padding: 14px 0;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.04em;
}

.identification-description {
    color: #555;
    font-size: 1.05em;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}

.identification-actions {
    text-align: center;
    margin-bottom: 24px;
}

.identification-btn, .help-btn {
    background: #2196f3;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.1em;
    margin: 0 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-weight: 600;
}

.identification-btn:hover {
    background: #1976d2;
}

.help-btn {
    background: #4caf50;
}

.help-btn:hover {
    background: #388e3c;
}

.identification-features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}

.identification-features .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 100px;
}

.feature-icon {
    font-size: 2em;
    margin-bottom: 8px;
}

.feature-text {
    font-size: 0.95em;
    color: #2c5aa0;
    font-weight: 500;
}

.result-table-scroll {
    width: 100%;
    max-width: 1280px;
    /* height: 340px;  删除这个 */
    max-height: 340px;           /* 只用max-height，不要height */
    overflow-x: auto;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    padding: 0;
    font-size: 15px;
    margin-bottom: 6px;
    scrollbar-gutter: stable both-edges;
}

.result-table {
    border-collapse: collapse;
    min-width: 1200px;         /* 根据你最大表头决定 */
    width: 100%;               /* 或 max-content，二选一。更推荐 100% */
}

.result-table th, .result-table td {
    border: 1px solid #b0bec5;
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}
.result-table th {
    background: #f0f4c3;
    position: sticky;
    top: 0;
    z-index: 1;
}
/* 彻底消除外层多余滚动条，只留表格内部的 */
.preview-row,
.result-preview,
#preview-area {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box;
}

/* ===== 公告详情正文美化，专用于 notice_detail.html ===== */
.notice-detail {
    background: #f7f8fa;  /* 更高端、柔和、冷色系背景 */
    border-radius: 18px;
    border: 1.5px solid #dde5e3;
    box-shadow: 0 4px 24px #23443814;
    padding: 44px 44px 38px 44px;
    margin: 42px auto 36px auto;
    max-width: 880px;
    font-size: 1.15em;
    line-height: 1.85;
    color: #24453a;
    transition: box-shadow 0.2s;
}
.notice-detail:hover {
    box-shadow: 0 8px 36px #46847917;
}

.notice-detail-title {
    font-size: 1.64em;
    font-weight: 800;
    color: #24453a;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.notice-detail-date {
    color: #6a8b7b;
    font-size: 1.07em;
    margin-bottom: 18px;
}

.notice-detail-main-title {
    font-size: 1.44em;
    font-weight: 700;
    color: #285c37;
    margin-bottom: 24px;
    margin-top: 3px;
    letter-spacing: 0.04em;
}

/* ===== 物种主卡片（外层） ===== */
.species-main-card {
    border: 2.5px solid #c4d0cb;
    border-radius: 22px;
    background: #f9fbfa;
    box-shadow: 0 4px 22px #20483810;
    margin: 48px auto 36px auto;
    max-width: 880px;
    padding: 30px 32px 20px 32px;
    transition: box-shadow 0.2s;
    position: relative;
}

.species-main-card:hover {
    box-shadow: 0 8px 40px #20483818;
}

/* 主标题区 */
.species-header {
    background: linear-gradient(90deg,#e8edea 0%,#f7f8fa 100%);
    color: #24453a;
    font-size: 1.36em;
    font-weight: 600;
    border-radius: 12px;
    padding: 10px 20px;
    margin-bottom: 18px;
    border-left: 6px solid #b9cbc3;
    border-right: none;
    letter-spacing: 0.03em;
    text-align: left;
    box-shadow: 0 1px 6px #aac5bb11;
}

/* 内层描述卡片 */
.species-desc-card {
    background: #f3f6f6;
    border: 2px solid #b9cbc3;
    border-radius: 15px;
    padding: 18px 26px 20px 26px;
    margin: 0 0 18px 0;
    font-size: 1.13em;
    color: #3c5651;
    line-height: 1.9;
    box-shadow: 0 2px 10px #b9cbc312;
    position: relative;
    word-break: break-all;
}

/* 图片排列 */
.species-image-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    justify-content: flex-start;
}
.species-image-row img {
    border-radius: 13px;
    box-shadow: 0 2px 12px #b7cfd514;
    background: #f9fbfa;
    border: 1.4px solid #c1d7ce;
    /* 图片自适应宽高，不限最大 */
    display: block;
    margin: 0 auto;
}

/* 适配移动端 */
@media (max-width: 900px) {
    .notice-detail {
        padding: 6vw 2vw 8vw 2vw;
        border-radius: 13px;
    }
    .species-main-card {
        padding: 3vw;
        border-radius: 14px;
    }
    .species-header {
        font-size: 1.05em;
        border-radius: 8px;
        padding: 7px 12px;
    }
    .species-desc-card {
        font-size: 1.02em;
        border-radius: 9px;
        padding: 12px 6vw;
    }
    .species-image-row img {
        max-width: 90vw;
        max-height: 60vw;
    }
}

/* 其它常用正文样式补充（如需） */
.notice-detail h1, .notice-detail h2 {
    color: #24453a;
    font-weight: 800;
    margin-top: 28px;
    margin-bottom: 14px;
    letter-spacing: 0.03em;
    border-left: 5px solid #b9cbc3;
    padding-left: 12px;
    background: #eef2f1;
    border-radius: 5px;
}

.notice-detail p,
.notice-detail li {
    margin: 12px 0 7px 0;
}
.notice-detail strong, .notice-detail b {
    color: #2d5a4e;
    font-weight: 700;
    background: #e6f1ec;
    padding: 2px 6px;
    border-radius: 4px;
}
.notice-detail em, .notice-detail i {
    color: #5d776c;
    font-style: italic;
    background: #e8edeb;
    border-radius: 3px;
    padding: 1px 5px;
}
.notice-detail img {
    max-width: 97%;
    border-radius: 13px;
    box-shadow: 0 2px 13px #b9cbc31b;
    margin: 28px auto 18px auto;
    display: block;
    background: #fff;
    padding: 2px;
}
.notice-detail code {
    background: #eef8f0;
    color: #23714c;
    font-family: 'JetBrains Mono', 'Fira Mono', monospace;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 0.97em;
}