/* ==========================================================================
   水产知识库 — 学术期刊风格（参照《水产学报》china-fishery.cn）
   主色蓝 #0092E5 / 辅助橙 #F28611 / 白底 / 微软雅黑15px
   ========================================================================== */

:root {
    --brand: #0092E5;
    --brand-dark: #0076BF;
    --brand-light: #4DB8F5;
    --brand-2: #F28611;
    --brand-soft: #E6F4FE;
    --brand-line: #B3DDF9;
    --green: #059669;
    --green-soft: #ECFDF5;
    --red: #EF4444;
    --red-soft: #FEF2F2;
    --amber: #F59E0B;
    --text: #333333;
    --text-2: #4B5563;
    --muted: #666666;
    --muted-2: #888888;
    --line: #E5E5E5;
    --line-soft: #F5F5F5;
    --bg: #FAFAFA;
    --radius: 8px;
    --radius-sm: 6px;
/*    --maxw: 1200px;*/
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.08);
    --shadow-blue: 0 8px 24px rgba(0,146,229,.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Microsoft YaHei", Arial, "Helvetica Neue", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-dark); }
img { max-width: 100%; }

/* ---------- 顶部导航（Dribbble 式简洁导航） ---------- */
.topbar {
    background: #fff; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 100;
}
.topbar .inner {
    max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
    min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none;
}
.brand-mark {
    width: 36px; height: 36px; background: var(--brand); color: #fff;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.brand-name { line-height: 1.2; }
.brand-name small { font-size: 11px; color: var(--muted-2); font-weight: 400; display: block; }
.topbar nav { display: flex; gap: 2px; align-items: center; }
.topbar nav a {
    color: var(--text-2); font-size: 14px; padding: 8px 14px;
    font-weight: 500; border-radius: 6px; transition: all .15s; text-decoration: none;
}
.topbar nav a:hover { color: var(--text); background: var(--line-soft); }
.topbar nav a.on { color: var(--brand); font-weight: 700; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.nav-search {
    font-size: 13px; color: var(--text-2); padding: 7px 14px;
    border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
    transition: all .15s;
}
.nav-search:hover { border-color: var(--brand); color: var(--brand); }
.nav-login {
    font-size: 13px; color: #fff; background: var(--brand);
    padding: 7px 16px; border-radius: 6px; text-decoration: none; font-weight: 500;
    transition: all .15s;
}
.nav-login:hover { background: var(--brand-dark); color: #fff; }

/* ---------- Hero区（Dribbble 式：大留白 + 大标题 + 右侧视觉卡） ---------- */
header.hero {
    position: relative; overflow: hidden;
    background: #0A2540 url('/static/img/hero-bg.jpg') no-repeat center/cover;
    padding: 64px 20px 56px;
}
@media (max-width: 900px) {
    header.hero {
        background-image: image-set(
            url('/static/img/hero-bg-800.webp') type('image/webp'),
            url('/static/img/hero-bg.jpg') type('image/jpeg')
        );
    }
}
@media (min-width: 901px) {
    header.hero {
        background-image: image-set(
            url('/static/img/hero-bg-1600.webp') type('image/webp'),
            url('/static/img/hero-bg.jpg') type('image/jpeg')
        );
    }
}
header.hero::before {
    content: ""; position: absolute; width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(0,146,229,.06) 0%, transparent 70%);
    top: -160px; right: -160px; border-radius: 50%;
}
header.hero h1 {
    font-size: clamp(30px, 5vw, 46px); font-weight: 800; color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    letter-spacing: -1px; margin-bottom: 14px; position: relative; line-height: 1.15;
}
header.hero p { color: #D7E3F4; }

header.hero p { font-size: 17px; color: var(--muted); max-width: 620px; margin: 0; position: relative; }
.stats { display: flex; gap: 40px; margin-top: 32px; flex-wrap: wrap; position: relative; }
.stats .item { text-align: left; }
.stats .num { font-size: 30px; font-weight: 800; color: #FFFFFF; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.stats .num em { font-style: normal; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.stats .label { font-size: 15px; color: #C3D8EF; margin-top: 6px; }


/* ---------- Dribbble 1:1 首页结构 ---------- */
header.hero { padding:20px; }
.hero-inner {
    max-width: var(--maxw); margin: 0 auto;
    display: flex; align-items: center; gap: 56px;
}
.hero-left { flex: 1; min-width: 0; position: relative; z-index: 2;
    padding: 18px 22px; margin-left: -8px; border-radius: 16px;
    background: linear-gradient(90deg, rgba(7,27,50,.88) 0%, rgba(7,27,50,.62) 42%, rgba(7,27,50,.28) 72%, rgba(7,27,50,0) 100%);
}
.hero-kicker {
    display: inline-block; font-size: 12px; font-weight: 700;
    color: #7CC4F7; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.5);
    margin-bottom: 18px;
}
header.hero h1 {
    font-size: clamp(34px, 5.5vw, 54px); font-weight: 800;
    color: #FFFFFF; letter-spacing: -2px; line-height: 1.12;
    margin-bottom: 20px;
    text-shadow: 0 2px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}
header.hero h1 .hl { color: var(--brand); display: inline-block; margin-left: 1em; }
.hero-points { list-style: none; margin: 0 0 28px; padding: 0; }
.hero-points li {
    position: relative; padding-left: 26px; margin-bottom: 10px;
    font-size: 16px; color: #E8F1FC; line-height: 1.65; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.hero-points li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: #4DB8F5; font-weight: 800;
}
.hero-cta { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; }
.hero-cta button {
    background: var(--brand); color: #fff; border: none;
    padding: 15px 38px; border-radius: 8px; font-size: 16px; font-weight: 700;
    cursor: pointer; box-shadow: 0 10px 30px rgba(0,146,229,.28);
    transition: all .2s; font-family: inherit;
}
.hero-cta button:hover { background: var(--brand-dark); transform: translateY(-1px); }
.hero-link { font-size: 15px; font-weight: 600; color: #E8F1FC; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.hero-link:hover { color: #4DB8F5; }
.hero-right { position: relative; width: 560px; flex-shrink: 0; }
.hero-right #chinaMap { width: 100%; height: 420px; background: transparent; border: none; box-shadow: none; }
.map-bar {
    display: block; margin-top: 8px;
    font-size: 12px; color: #B9CFE8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;
}
.map-bar button {
    font-size: 11px; color: var(--brand); background: var(--brand-soft);
    border: 1px solid var(--brand-line); border-radius: 6px; padding: 4px 12px; cursor: pointer;
}
.map-hint { font-size: 11px; color: #8FA8C4; text-align: center; margin-top: 4px; }

/* Popular 式标签行 */
.explore-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.explore-label { font-size: 13px; font-weight: 700; color: var(--text); margin-right: 4px; }
.pchip {
    display: inline-block; padding: 7px 16px; border-radius: 999px;
    background: var(--line-soft); color: var(--text-2);
    font-size: 13px; font-weight: 500; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; transition: all .15s;
}
.pchip:hover { background: #fff; border-color: var(--line); color: var(--text); }
.pchip.active { background: var(--brand); color: #fff; }
.pchip b { font-weight: 600; opacity: .7; margin-left: 3px; font-size: 12px; }
.pchip.active b { opacity: .85; }
.pchip-div { margin-left: 8px; }
.explore-search { margin-left: auto; display: flex; gap: 0; }
.explore-search input {
    padding: 8px 14px; border: 1px solid var(--line); border-right: none;
    border-radius: 999px 0 0 999px; font-size: 13px; width: 200px; font-family: inherit;
}
.explore-search input:focus { outline: none; border-color: var(--brand); }
.explore-search button {
    background: var(--brand); color: #fff; border: none;
    padding: 8px 18px; border-radius: 0 999px 999px 0; cursor: pointer; font-size: 13px;
}
.explore-search button:hover { background: var(--brand-dark); }

/* Dribbble 作品卡（shot 卡） */
.shots-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 28px 22px;
}
.shot-card {
    display: block; text-decoration: none; color: inherit;
    background: transparent; border: none;
}
.shot-img {
    width: 100%; aspect-ratio: 4/3; background: var(--line-soft);
    border-radius: 14px; overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center; color: #c9ced3; font-size: 46px;
}
.shot-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
}
.shot-body { padding: 12px 4px 0; }
.shot-title { font-size: 15px; font-weight: 700; color: var(--text); }
.shot-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px; font-size: 12px; color: var(--muted);
}
.shot-stats { color: var(--brand); font-weight: 600; font-size: 12px; }

/* 列表视图：主图 + 多角度实拍缩略图 */
.shot-row .row-avatar {
    width: 46px; height: 46px; object-fit: cover; border-radius: 8px;
    background: var(--line-soft); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #c9ced3;
}
.shot-row .row-avatar i { font-size: 18px; }
.shot-row .row-gallery { display: flex; gap: 3px; flex-shrink: 0; }
.shot-row .rg-thumb {
    width: 34px; height: 34px; object-fit: cover; border-radius: 5px;
    background: var(--line-soft);
}
@media (max-width: 720px) {
    .shot-row .rg-thumb { width: 30px; height: 30px; }
    .shot-row .row-gallery { max-width: 52vw; overflow-x: auto; }
}

/* ---------- 主体 ---------- */
main { max-width: var(--maxw); margin: 28px auto; padding: 0 20px; }

/* ---------- 筛选工具条 ---------- */
.toolbar {
    background: transparent; border: none; padding: 0;
    margin-bottom: 24px;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.toolbar input[type=text] {
    flex: 1; min-width: 200px; padding: 9px 14px;
    border: 1px solid var(--line); border-radius: 4px;
    font-size: 14px; color: var(--text); font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.toolbar input[type=text]:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(0,146,229,.12);
}
.toolbar button {
    background: var(--brand); color: #fff; border: none;
    padding: 9px 24px; border-radius: 4px;
    cursor: pointer; font-size: 14px; font-weight: 500; font-family: inherit;
    transition: all .15s;
}
.toolbar button:hover { background: var(--brand-dark); }
.toolbar .chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
    display: inline-block; padding: 6px 14px; border-radius: 4px;
    background: var(--line-soft); color: var(--text-2); border: 1px solid var(--line);
    font-size: 13px; cursor: pointer; text-decoration: none; transition: all .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.active:hover { background: var(--brand-dark); color: #fff; }

/* ---------- 卡片 ---------- */
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.card h2 {
    font-size: 17px; color: var(--text); font-weight: 700;
    padding-left: 10px; border-left: 4px solid var(--brand);
    padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.card h3 {
    font-size: 15px; color: var(--brand); margin: 14px 0 8px;
    padding-left: 8px; border-left: 3px solid var(--brand-2);
}
.detail-main h2, .detail-main h3 { padding-left: 0; border-left: none; }
.detail-main h2 {
    font-size: 25.6px; padding-bottom: 10px; border-bottom: 2px solid var(--brand);
    margin-bottom: 12px; padding-left: 0;
}
.detail-main h3 {
    font-size: 22px; color: var(--brand); border-left: none; padding-left: 0;
    margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}

/* ---------- 物种作品墙（Dribbble 式：无边框大图卡 + hover 放大浮层） ---------- */
.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.species-card {
    background: transparent; border: none; border-radius: 14px;
    overflow: hidden; text-decoration: none; color: inherit;
    display: block; transition: transform .18s ease;
}
.species-card:hover { transform: translateY(-3px); }
.species-card .img {
    width: 100%; aspect-ratio: 4/3; background: var(--line-soft);
    display: flex; align-items: center; justify-content: center; color: #c9ced3; font-size: 48px;
    border-radius: 14px; overflow: hidden; position: relative;
}
.species-card .img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .25s ease;
}
.species-card:hover .img img { transform: scale(1.05); }
/* hover 信息浮层 */
.species-card .img .overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
    opacity: 0; transition: opacity .2s ease; border-radius: 14px;
}
.species-card:hover .img .overlay { opacity: 1; }
.species-card .img .overlay span {
    color: #fff; font-size: 13px; font-weight: 600; background: rgba(0,146,229,.85);
    padding: 7px 16px; border-radius: 999px; margin-top: auto; margin-bottom: 12px;
}
.species-card .name { padding: 12px 4px 2px; font-weight: 700; font-size: 15px; color: var(--text); }
.species-card .meta {
    padding: 4px; font-size: 12px; color: var(--muted);
    display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap;
}
.species-card .meta .cnt { font-size: 12px; color: var(--brand); font-weight: 600; }

/* ---------- 标签 ---------- */
.tag { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; margin-right: 6px; white-space: nowrap; font-weight: 500; }
.tag.water-sea { background: #E0F2FE; color: #0369A1; }
.tag.water-fresh { background: var(--green-soft); color: #059669; }
.tag.water-brackish { background: #FEF3C7; color: #B45309; }
.tag.water-land { background: #EDE9FE; color: #6D28D9; }
.tag.cat { background: var(--brand-soft); color: var(--brand); }

/* 物种属性标签（多值，来源见 title 提示） */
.tag.sp-tag-econ { background: #FEF3C7; color: #B45309; }
.tag.sp-tag-farm { background: #DCFCE7; color: #15803D; }
.tag.sp-tag-orn  { background: #FCE7F3; color: #BE185D; }
.tag.sp-tag-inv  { background: #FEE2E2; color: #B91C1C; }
a.tag { text-decoration: none; }
/* 外来入侵型：卡片右上角角标（纯色，不用渐变/阴影） */
.inv-badge {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    padding: 3px 9px; border-radius: 999px;
    background: #DC2626; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1.4;
    letter-spacing: .5px; white-space: nowrap;
}

/* ---------- 鱼病条目 ---------- */
.disease-item {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 14px; margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    transition: all .15s; background: #fff;
}
.disease-item:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.disease-item .dname { font-weight: 600; color: var(--text); }
.disease-item .dmeta { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.disease-item .d-rel {
    display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px;
    font-size: 11px; font-weight: 500; vertical-align: middle;
    background: #eef4fb; color: #4a7fbf; border: 1px solid #d6e4f5;
}
.sp-h2-note { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-block; background: var(--brand); color: #fff;
    padding: 8px 18px; border-radius: 4px;
    text-decoration: none; font-size: 13px; border: none; cursor: pointer;
    font-family: inherit; transition: all .15s; font-weight: 500;
}
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn.gray { background: #6B7280; }
.btn.gray:hover { background: #4B5563; }
.btn.danger { background: var(--red); }
.btn.danger:hover { background: #DC2626; }
.btn.plain { background: #fff; color: var(--text-2); border: 1px solid var(--line); }
.btn.plain:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* ---------- 详情页布局 ---------- */
.detail-grid { display: grid; grid-template-columns: 26% 1fr; gap: 18px; align-items: start; }
.detail-grid > * { min-width: 0; }
.detail-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.detail-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.detail-side img { border-radius: var(--radius-sm); max-width: 100%; height: auto; }

/* ---------- 多角度实拍图库 ---------- */
.gallery-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 4px 0 18px; } /* 与病鱼实拍图 imglist 同尺寸 */
.gallery-item {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    overflow: hidden; background: #fff; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    z-index: 1;
}
.gallery-item:hover {
    box-shadow: 0 10px 22px rgba(0, 146, 229, .28);
    border-color: var(--brand); z-index: 20;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px;
    padding: 2px 4px; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

.kv { margin-bottom: 12px; }
.kv .k { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.kv .v { font-size: 15px; color: var(--text-2); word-break: break-word; overflow-wrap: anywhere; }

.imglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.imglist img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* ---------- 提示 / 空态 ---------- */
.empty { text-align: center; color: var(--muted); padding: 40px 0; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.card.empty { border-style: dashed; }
.notice {
    background: var(--brand-soft); border: 1px solid var(--brand-line);
    border-left: 3px solid var(--brand); color: var(--brand-dark);
    padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.8;
}

/* ---------- 富文本 ---------- */
.rich { font-size: 16px; line-height: 1.9; color: var(--text-2); overflow-wrap: break-word; }
.rich p { margin: 10px 0; }
.rich img { max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.rich h1, .rich h2, .rich h3, .rich h4 { color: var(--text); margin: 18px 0 8px; }
.rich h1 { font-size: 25.6px; }
.rich h2 { font-size: 22px; }
.rich h3 { font-size: 19px; }
.rich h4 { font-size: 17px; }
.rich ul, .rich ol { margin: 10px 0 10px 22px; }
.rich li { margin: 4px 0; }
.rich table { margin: 12px 0; }
.rich blockquote {
    border-left: 3px solid var(--brand); background: var(--brand-soft);
    padding: 8px 14px; margin: 12px 0; color: var(--muted-2);
}
.rich a { text-decoration: underline; }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 14px; text-align: left; }
th { background: var(--line-soft); color: var(--text-2); font-weight: 600; }
tr:last-child td { border-bottom: none; }

/* ---------- 页脚 ---------- */
footer {
    margin-top: 40px; padding: 24px 20px 28px;
    background: #fff; border-top: 2px solid var(--line);
    text-align: center; color: var(--muted); font-size: 12px; line-height: 1.9;
}
footer a { color: var(--brand); }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .topbar .inner { min-height: auto; padding: 12px 16px; gap: 8px; flex-wrap: wrap; }
    .brand { font-size: 17px; }
    .brand-mark { width: 34px; height: 34px; font-size: 16px; border-radius: 7px; }
    .topbar nav { order: 3; width: 100%; flex-wrap: wrap; }
    .topbar nav a { padding: 6px 12px; font-size: 14px; }
    .top-actions { margin-left: auto; }
    header.hero { padding: 36px 16px 32px; }
    header.hero h1 { font-size: 25px; line-height: 1.32;margin-bottom:16px;}
    .stats { gap: 24px; margin-top: 24px; }
    .stats .num { font-size: 22px; }
    .detail-grid { grid-template-columns: 1fr; }
    .species-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .detail-main { padding: 16px 14px; }
    .card { padding: 14px; }
    th, td { padding: 8px 10px; font-size: 13px; }
}


/* 图片加载失败占位：父容器 ::after 显示鱼图标 */
.shot-img.img-fallback::after,
.img.img-fallback::after {
    content: "\e4f2";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: #c9ced3; font-size: 40px;
}
.fa-fallback-i {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #c9ced3;
}
.fa-fallback-i i { font-size: 40px; }

.map-reset {
    position: absolute; top: 10px; right: 10px; z-index: 10;
    font-size: 11px; color: var(--brand); background: rgba(255,255,255,.92);
    border: 1px solid var(--brand-line); border-radius: 6px; padding: 4px 12px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,146,229,.15);
}
.map-reset:hover { background: var(--brand-soft); }


/* ③ 地图先加载，完成后内容淡入 */
.hero-inner { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
body.map-ready .hero-inner { opacity: 1; transform: none; }
body.map-ready .shot-img { animation: none; }
#chinaMap { min-height: 420px; }

.diag-fish-card.img-fallback::before{content:"\e4f2";font-family:"Font Awesome 6 Free";font-weight:900;font-size:34px;color:#c9ced3;display:block;width:64px;height:64px;margin:0 auto;line-height:64px;text-align:center;}


/* ---------- hero-inner 加载旋转动画 ---------- */
header.hero::before {
    content: ''; position: absolute; left: 50%; top: 44%; width: 52px; height: 52px;
    margin: -26px 0 0 -26px;
    border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%;
    animation: heroSpin 1s linear infinite; z-index: 5;
    transition: opacity .3s ease, visibility .3s ease;
}
body.map-ready header.hero::before { opacity: 0; visibility: hidden; }
@keyframes heroSpin { to { transform: rotate(360deg); } }
/* ---------- 8015 同款 Toast 提示 ---------- */
.app-toast{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.9);
  background:rgba(17,24,39,.9);
  color:#fff;
  padding:16px 32px;
  border-radius:12px;
  font-size:16px;
  font-weight:500;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:all .25s;
}
.app-toast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* ---------- 养殖技术页（内联样式类化 20261004） ---------- */
.ct-main{max-width:1200px;margin:0 auto;padding:20px;}
.ct-page-title{margin-bottom:16px;}
.ct-layout{display:flex;gap:20px;align-items:flex-start;}
.ct-side{width:240px;flex-shrink:0;max-height:85vh;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:var(--shadow-sm);overflow:hidden;}
.ct-search-box{padding:12px;border-bottom:1px solid var(--line-soft);background:#fff;position:sticky;top:0;z-index:10;}
.ct-search-input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:4px;font-size:13px;box-sizing:border-box;outline:none;}
.ct-water-row{display:flex;gap:6px;margin-top:10px;}
.ct-water-btn{flex:1;text-align:center;padding:5px 0;border-radius:999px;font-size:12px;text-decoration:none;border:none;cursor:pointer;background:var(--line-soft);color:var(--text-2);}
.ct-water-btn.on{background:var(--brand);color:#fff;}
.ct-acc-list{overflow-y:auto;flex:1;}
.ct-empty-tip{padding:24px;text-align:center;color:#9CA3AF;font-size:13px;}
.ct-empty-lg{padding:40px;text-align:center;color:#9CA3AF;}
.ct-empty-lg.gray{color:#6B7280;}
.ct-panel{flex:1;min-width:0;}
.ct-plan-card{background:#fff;border-radius:8px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:16px;}
.ct-plan-empty{background:#fff;border-radius:8px;padding:40px;text-align:center;color:#9CA3AF;}
.ct-acc-head{padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-soft);}
.ct-acc-arrow{transition:transform .2s;}
.ct-acc-body{padding:4px 0;}
.ct-sp-link{display:flex;align-items:center;gap:8px;padding:7px 14px;text-decoration:none;font-size:13px;color:var(--text-2);}
.ct-sp-link.on{background:var(--brand-soft);color:var(--brand);font-weight:600;}
.ct-sp-ico{font-size:14px;color:var(--brand);}
.ct-sp-name{margin:0 0 4px;}
.ct-sp-detail{font-size:13px;color:var(--brand);margin-left:8px;}
.ct-plan-title{margin:0 0 12px;color:var(--brand);font-size:16px;}
.ct-kv-row{margin-bottom:10px;}
.ct-kv-label{color:var(--muted);font-size:13px;}
.ct-kv-label-gray{color:#6B7280;font-size:13px;}
.ct-kv-value{font-size:14px;line-height:1.8;margin-top:4px;}
.ct-kv-inline{font-size:14px;}
.ct-img-wrap{margin:8px 0;}
.ct-img{max-width:100%;border-radius:8px;}
.ct-src{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:#666;overflow-wrap:anywhere;word-break:break-word;}

/* ---------- 物种详情页（内联样式类化 20261004） ---------- */
.sp-back-btn{margin-bottom:16px;}
.sp-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.sp-nav .sp-back-btn{margin-bottom:0;}
.sp-next-ico{margin-left:4px;}
.sp-back-ico{margin-right:4px;}
.sp-avatar-wrap{text-align:center;margin-bottom:12px;}
.sp-avatar {   width: 100%;  /* height: 160px; */  border-radius: 12px;   object-fit: cover; }
.sp-avatar-ph{width:160px;height:160px;border-radius:12px;background:#eef1f0;display:flex;align-items:center;justify-content:center;color:#c9ced3;}
.sp-avatar-ph i{font-size:52px;}
.sp-title{text-align:center;margin-bottom:10px;font-size:28px;}
.sp-badge-wrap{text-align:center;margin-bottom:10px;}
.sp-badge{display:inline-block;background:#e8f1fb;color:#1a5fb4;font-size:13px;padding:3px 14px;border-radius:999px;font-weight:600;}
.sp-tags{text-align:center;margin-bottom:14px;}
.sp-tip{margin:10px 0;padding:10px 12px;background:#fff4e5;border:1px solid #fcd9a8;border-radius:8px;font-size:13px;color:#b26a00;}
.sp-group-link{color:var(--brand);text-decoration:underline;}
.sp-h2{margin-top:0;}
.sp-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
.sp-member{display:flex;align-items:center;gap:10px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--text-2);text-decoration:none;transition:border-color .2s,box-shadow .2s;}
.sp-member:hover{border-color:var(--brand);box-shadow:0 3px 10px rgba(0,0,0,.08);}
.sp-member img{width:56px;height:56px;border-radius:10px;object-fit:contain;background:#f5f8fb;flex-shrink:0;}
.sp-member-info{display:flex;flex-direction:column;min-width:0;}
.sp-member-name{font-size:14px;font-weight:600;color:var(--text-1);line-height:1.3;}
.sp-member-water{font-size:12px;color:var(--muted);margin-top:2px;}
@media(max-width:768px){.sp-members{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}}


.sp-intro-box{background:var(--brand-soft);border-radius:8px;padding:16px;margin-bottom:20px;line-height:2.1;font-size:16px;color:#374151;}
.sp-intro-src{margin-top:12px;padding-top:8px;border-top:1px dashed var(--brand-line);font-size:12px;color:#6B7280;word-break:break-all;overflow-wrap:anywhere;}
.sp-credit{margin-top:8px;font-size:12px;}
.sp-credit-badge{display:inline-block;padding:2px 10px;border-radius:999px;}
.sp-credit-badge.ok{background:#e6f4ea;color:#1e7e34;}
.sp-credit-badge.warn{background:#fff4e5;color:#b26a00;}
.sp-plan-h2{margin-top:30px;}
.sp-plan-card{background:var(--brand-soft);border-radius:8px;padding:16px;margin-bottom:16px;}
.sp-plan-h4{margin:0 0 12px;color:var(--brand);font-size:19px;}
.sp-plan-img-wrap{margin:8px 0;}
.sp-plan-img{max-width:100%;border-radius:8px;}
.sp-plan-src{margin-top:10px;padding-top:8px;border-top:1px dashed var(--brand-line);font-size:12px;color:#666;word-break:break-all;overflow-wrap:anywhere;}
.sp-lib-wrap{text-align:center;margin:10px 0 20px;}
.sp-lib-link{color:var(--brand);font-size:13px;}
.sp-arrow{font-size:11px;}

/* ---------- 多角度实拍 Lightbox（内嵌样式移入 20261004） ---------- */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:9999;}
.lb-box{position:relative;max-width:92vw;max-height:90vh;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lb-img{display:block;max-width:92vw;max-height:80vh;object-fit:contain;}
.lb-cap{padding:10px 16px;font-size:14px;color:#333;text-align:center;background:#fff;border-top:1px solid #eee;}
.lb-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:18px;line-height:1;cursor:pointer;z-index:2;}
.lb-close:hover{background:rgba(0,0,0,.8);}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;font-size:24px;cursor:pointer;z-index:2;line-height:1;}
.lb-nav:hover{background:rgba(0,0,0,.78);}
.lb-nav.prev{left:12px;}
.lb-nav.next{right:12px;}
.lb-count{position:absolute;top:12px;left:14px;color:#fff;background:rgba(0,0,0,.45);font-size:12px;padding:4px 10px;border-radius:999px;z-index:2;}

/* ---------- 首页（内联样式类化 20261004） ---------- */
.hero-kicker i{font-size:13px;margin-right:6px;}
.hero-cta .fa-stethoscope{margin-right:6px;}
.hero-cta .fa-arrow-right{margin-left:4px;font-size:13px;}
.map-reset .fa-rotate-left{margin-right:4px;}
.explore-search .fa-magnifying-glass{font-size:13px;}
.loading-box.compact{padding:36px 20px;}
#gridEmpty{display:none;}
#diagOverlay{display:none;position:fixed;inset:0;background:rgba(17,24,39,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;align-items:center;justify-content:center;padding:20px;}
.diag-modal{width:100%;max-width:calc(100vw - 40px);max-height:88vh;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.35);display:flex;flex-direction:column;}
.diag-head{padding:20px 26px 14px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #EEF2F6;}
.diag-title{font-size:20px;font-weight:700;color:#111827;}
.diag-step{font-size:14px;color:#6B7280;margin-top:5px;}
.diag-head-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.diag-badge{display:inline-block;background:rgba(242,134,17,.95);color:#fff;font-size:13px;font-weight:600;padding:3px 12px;border-radius:999px;white-space:nowrap;}
.diag-badge i{margin-right:5px;}
.diag-close-btn{background:#F3F4F6;color:#374151;border:none;width:38px;height:38px;border-radius:50%;font-size:18px;cursor:pointer;flex-shrink:0;}
.diag-body{padding:24px 26px;flex:1;overflow-y:auto;}
.diag-loading{text-align:center;padding:40px;color:#6B7280;}
.map-err{padding:40px;text-align:center;color:#999;font-size:13px;}
.diag-fish-empty{grid-column:1/-1;text-align:center;padding:30px;color:#9CA3AF;}
.diag-sym-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.diag-sym-title{font-size:15px;}
.diag-back-ico{margin-right:4px;}
.diag-count{margin-right:auto;align-self:center;font-size:13px;color:#6B7280;}
.diag-btn-arrow{margin-left:4px;}
.diag-result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.diag-result-title{font-size:16px;}
.diag-no-result{text-align:center;padding:40px;color:#9CA3AF;}
.diag-img-wrap{margin-bottom:16px;}
.diag-img{max-width:100%;max-height:300px;border-radius:12px;}
.diag-field{margin-bottom:14px;}
.diag-field-label{font-size:13px;color:#6B7280;margin-bottom:4px;}
.diag-field-val{font-size:14px;line-height:1.8;}
.diag-link-wrap{margin-top:20px;}
.diag-link{color:var(--brand);font-size:14px;}
.diag-link .fa-arrow-right{font-size:12px;}

/* ---------- 首页弹窗/地图/网格（内嵌样式移入 20261004） ---------- */
/* 诊断弹窗内鱼种卡片 */
.diag-fish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.diag-fish-card{background:#fff;border:2px solid #E5E7EB;border-radius:14px;padding:16px;text-align:center;cursor:pointer;transition:all .15s;}
.diag-fish-card:hover{border-color:var(--brand);box-shadow:0 4px 12px rgba(0,146,229,.15);}
.diag-fish-card.on{border-color:var(--brand);background:var(--brand-soft);}
.diag-fish-card img{width:88px;height:88px;object-fit:contain;border-radius:10px;}
.diag-fish-card .nm{font-size:18px;font-weight:600;margin-top:8px;color:#111827;}
.diag-fish-card .info{font-size:14px;color:#6B7280;}
.diag-search{width:100%;padding:12px 20px;border:1px solid #E5E7EB;border-radius:999px;font-size:16px;margin-bottom:18px;box-sizing:border-box;}
.diag-search:focus{outline:none;border-color:var(--brand);}
.diag-filter{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.diag-filter button{padding:8px 20px;border-radius:999px;border:1px solid #E5E7EB;background:#fff;cursor:pointer;font-size:15px;}
.diag-filter button.on{background:var(--brand);color:#fff;border-color:var(--brand);}
/* 症状选择 */
.sym-check{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #E5E7EB;border-radius:10px;margin-bottom:10px;cursor:pointer;font-size:16px;}
.sym-check.checked{background:var(--brand-soft);border-color:var(--brand);}
.sym-check .box{width:22px;height:22px;border:2px solid #D1D5DB;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--brand);flex-shrink:0;}
.sym-check.checked .box{background:var(--brand);color:#fff;border-color:var(--brand);}
.part-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.part-tab{padding:8px 18px;border-radius:999px;background:#F3F4F6;cursor:pointer;font-size:15px;}
.part-tab.on{background:var(--brand);color:#fff;}
/* 结果卡片 */
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.result-card{background:#F9FAFB;border:1px solid #E5E7EB;border-radius:14px;padding:18px 16px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;gap:8px;margin-bottom:0;}
.result-card:hover{border-color:var(--brand);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.result-card .rn{font-size:19px;font-weight:700;color:#111827;}
.result-card .rp{margin-top:8px;font-size:15px;color:#6B7280;}
.result-card .rp b{color:var(--brand);font-size:22px;}
.diag-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end;}
.btn-blue{background:var(--brand);color:#fff;border:none;padding:12px 28px;border-radius:999px;cursor:pointer;font-size:16px;font-weight:500;}
.btn-gray{background:#fff;color:#374151;border:1px solid #E5E7EB;padding:12px 28px;border-radius:999px;cursor:pointer;font-size:16px;}
.loading-spinner{display:inline-block;width:52px;height:52px;border:5px solid var(--brand-line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#chinaMap{position:relative;}
#chinaMap::before{content:"";position:absolute;inset:0;z-index:9;background:rgba(10,37,64,.42);border-radius:14px;}
#chinaMap::after{content:"";position:absolute;z-index:10;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:4px solid rgba(255,255,255,.28);border-top-color:#FFFFFF;border-radius:50%;animation:spin .8s linear infinite;}
body.map-ready #chinaMap::before,body.map-ready #chinaMap::after{display:none;}

.loading-box{text-align:center;padding:60px 20px;color:#6B7280;font-size:16px;}
.loading-box .loading-spinner{margin-bottom:16px;}
/* 诊断中加载动画（至少 3 秒） */
.diag-analyzing{padding:52px 20px 46px;}
.diag-analyzing .diag-analyzing-title{font-size:17px;font-weight:600;color:#111827;margin-bottom:8px;}
.diag-analyzing .diag-analyzing-sub{font-size:13px;color:#9CA3AF;margin-bottom:22px;}
.diag-analyzing .diag-analyzing-bar{width:min(320px,72%);height:6px;margin:0 auto;background:#EEF2F6;border-radius:999px;overflow:hidden;}
.diag-analyzing .diag-analyzing-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:999px;animation:diagFill 3s linear forwards;}
@keyframes diagFill{to{width:100%;}}
/* 物种网格视图切换（有图/无图） */
.grid-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px;}
.view-toggle{display:inline-flex;background:#fff;border:1px solid #E5E7EB;border-radius:999px;padding:3px;gap:2px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.vt-btn{border:none;background:transparent;padding:7px 16px;border-radius:999px;cursor:pointer;font-size:14px;color:#6B7280;display:inline-flex;align-items:center;gap:6px;transition:all .15s;text-decoration:none;}
.grid-count{font-size:13px;color:var(--muted);margin-right:auto;}
.grid-toolbar{justify-content:space-between;}
/* 分页（服务端渲染的真实链接，爬虫可跟） */
.pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:26px 0 8px;}
.pager a,.pager span{display:inline-block;min-width:36px;padding:7px 12px;text-align:center;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--text-2);text-decoration:none;background:#fff;}
.pager a:hover{border-color:var(--brand);color:var(--brand);}
.pager .on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}
.pager .gap{border:none;background:transparent;color:var(--muted);min-width:18px;}
.pager .pinfo{border:none;background:transparent;color:var(--muted);}
.vt-btn.on{background:var(--brand);color:#fff;}
.shots-grid.list-mode{grid-template-columns:1fr;gap:8px;}
.shot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;text-decoration:none;transition:border-color .15s,box-shadow .15s;}
.shot-row:hover{border-color:var(--brand);box-shadow:0 3px 10px rgba(0,0,0,.06);}
.shot-row .row-main{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.shot-row .row-name{font-size:16px;font-weight:600;color:#111827;}
.shot-row .row-stats{font-size:14px;color:#6B7280;white-space:nowrap;}
.shot-row .row-stats i{margin-right:4px;color:var(--brand);}

.shot-stats .fa-virus{margin-right:4px;}

/* ---------- 鱼病详情页（内联样式类化 20261004） ---------- */
.ds-back-btn{margin-bottom:16px;}
.ds-back-ico{margin-right:4px;}
.ds-main{max-width:1000px;margin:0 auto;}
.ds-meta{color:#888;font-size:13px;margin:6px 0 16px;}
.ds-chip{margin:0 6px 6px 0;}
.ds-chip2{margin-bottom:6px;}
.ds-notice{margin-top:20px;}

/* ---------- 鱼病百科页（内联样式类化 20261004） ---------- */
.bk-loading{font-size:14px;color:#9CA3AF;}
.log-card.hl{border-color:#0092E5;}
#bkEmpty{display:none;}
#bkMore{display:none;}

/* ---------- 综合搜索页（内联样式类化 20261004） ---------- */
#srchLoading{display:none;}
#srchResult{display:none;}
#srchSpEmpty{display:none;}
#srchDiEmpty{display:none;}

/* ---------- 导航（内联样式类化 20261004） ---------- */


/* ---------- 鱼病详情页 dsection/来源区（内嵌移入 20261004） ---------- */
/* 内容板块：虚线下边框 + 点击查看来源 */
.dsection {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--line);
    cursor: pointer;
    position: relative;
    transition: background .15s;
}
.dsection:hover { background: var(--brand-soft); }
.dsection:hover::after {
    content: "▾ 查看来源";
    position: absolute;
    right: 0;
    bottom: -2px;
    font-size: 12px;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 1px 8px;
    border-radius: 2px 2px 0 0;
}
.dsection.no-source { cursor: default; }
.dsection.no-source:hover { background: transparent; }
.dsection.no-source:hover::after { content: none; }

/* 资料来源区 */
.sources-section {
    margin-top: 24px;
    padding: 18px 20px;
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-bottom: none;
}
.sources-section h3 { border-left: 3px solid var(--muted); padding-left: 10px; }
.source-date { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.source-list { list-style: none; padding: 0; margin: 0; }
.source-item {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.8;
    transition: all .2s;
}
.source-item.highlight {
    background: var(--brand-soft);
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(241,118,0,.15);
}
.source-label { font-weight: 600; color: var(--text-2); }
.source-text { color: var(--muted-2); word-break: break-all; }
.source-text a { color: var(--brand); }

/* ========== 返回顶部（全站 _footer 公共） ========== */
.back-top{position:fixed;right:24px;bottom:28px;width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;border:none;box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s;z-index:9999;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-top:hover{background:#d9790a;box-shadow:0 6px 18px rgba(0,0,0,.25);}
.back-top:active{transform:translateY(0) scale(.95);}
@media (max-width:768px){.back-top{right:14px;bottom:16px;width:42px;height:42px;font-size:16px;}}

/* 拍照识鱼弹窗 */
.idfy-upload{text-align:center;}
.idfy-drop{display:block;border:2px dashed rgba(0,146,229,.45);border-radius:14px;padding:34px 20px;cursor:pointer;transition:all .25s;background:rgba(0,146,229,.04);}
.idfy-drop:hover,.idfy-drop.over{border-color:#0092E5;background:rgba(0,146,229,.09);}
.idfy-drop i{font-size:40px;color:#0092E5;margin-bottom:10px;display:block;}
.idfy-drop div{color:#33475b;font-size:15px;}
.idfy-tip{color:#8aa0b0;font-size:13px;margin-top:6px;}
.idfy-preview{display:none;max-width:100%;max-height:260px;margin:10px auto;border-radius:10px;box-shadow:0 4px 14px rgba(10,40,80,.18);}
.idfy-actions{margin-top:14px;display:flex;gap:10px;justify-content:center;}
.idfy-sp-img{width:64px;height:64px;object-fit:contain;border-radius:8px;margin:0 auto 6px;display:block;background:rgba(0,146,229,.05);}
.idfy-note{margin-top:12px;font-size:12px;color:#8aa0b0;text-align:center;}
.hero-btn2{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);}
.hero-btn2:hover{background:rgba(255,255,255,.26);}

/* 拍照识鱼弹窗定位（与诊断弹窗同款） */
#identifyOverlay{display:none;position:fixed;inset:0;background:rgba(17,24,39,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;align-items:center;justify-content:center;padding:20px;}

/* 20261005 防长URL撑破页面 */
.source-item{word-break:break-all;overflow-wrap:anywhere;} .sp-plan-src a{word-break:break-all;overflow-wrap:anywhere;} .sp-intro-src a{word-break:break-all;overflow-wrap:anywhere;}

/* 食用图鉴 */
.sp-xphy-box{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;margin-bottom:20px;line-height:1.8;font-size:15px;color:#374151;}
.xphy-stars{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:1em 0 0;}
.xphy-star{display:block;border:1px solid #EFEFEF;font-size:12px;border-radius:8px;padding:1px .3em 4px;margin:0 0 10px;}
.xphy-star .zk{display:block;height:1.8em;background-color:#ececec;line-height:2em;color:#000000;border-top-right-radius:8px;border-top-left-radius:8px;margin:0 -0.3em .3em;text-indent:.3em;font-weight:normal;}
.xphy-star .stars{display:block;vertical-align:top;line-height:1.3em;margin:0;font-size:1.3em;letter-spacing:1px;text-indent:.1em;}
.xphy-star .d{display:block;color:#000;padding:.15em .1em 0;line-height:1.4em;}
.xphy-star.star1 .stars{color:#f59e0b;}
.xphy-star.star2 .stars{color:#f59e0b;}
.xphy-star.star3 .stars{color:#f59e0b;}
.xphy-star.star4 .stars{color:#f59e0b;}
@media (max-width:900px){.xphy-stars{grid-template-columns:repeat(1,1fr);}}
@media (max-width:765px){.xphy-stars{grid-template-columns:repeat(4,1fr);}}
@media (max-width:590px){.xphy-stars{grid-template-columns:repeat(2,1fr);}}
.xphy-block{margin:10px 0;}
.xphy-block h4{font-size:15px;color:#111827;margin:10px 0 4px;font-weight:600;}
.xphy-text{color:#4b5563;}
.xphy-acc{margin:12px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.xphy-acc-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-weight:600;font-size:13px;}
.acc-ok{background:#d1fae5;color:#047857;}
.acc-no{background:#fee2e2;color:#b91c1c;}
.acc-unk{background:#fef3c7;color:#b45309;}
.xphy-acc-basis{font-size:13px;color:#6b7280;}
.sp-xphy-box a{color:#2563eb;}
/* ============================================
   20261011 物种悬浮预览框 - 黑酷风格（移植自 diagnose.php /assets/style-gp.css）
   ============================================ */
.sp-hover{
  display:none; /* 显示由 .show 切换 display，同 modal 机制，渲染最可靠 */
  position:fixed;
  z-index:1200;
  align-items:stretch;
  background:linear-gradient(150deg,#14161c 0%,#0d0f14 48%,#08090d 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:22px 24px 22px 26px;
  box-shadow:
    0 34px 90px -18px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 70px -20px rgba(110,130,255,.28);
  color:#e9edf6;
  font-family:'Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  pointer-events:none;
  overflow:visible;
  cursor:default;
}
.sp-hover.show{
  display:flex;
}
/* 顶部渐变高光线 */
.sp-hover::before{
  content:'';
  position:absolute;
  top:0;left:18px;right:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,170,255,.7),rgba(255,255,255,.25),transparent);
  pointer-events:none;
}
/* 角落装饰光点 */
.sp-hover::after{
  content:'';
  position:absolute;
  top:-1px;right:-1px;
  width:16px;height:16px;
  border-top:2px solid rgba(140,160,255,.55);
  border-right:2px solid rgba(140,160,255,.55);
  border-radius:0 20px 0 0;
  pointer-events:none;
}
/* 指向卡片的箭头 */
.sp-hover-arrow{
  position:absolute;
  bottom:-8px;
  width:16px;height:16px;
  background:#0d0f14;
  border-right:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  transform:rotate(45deg);
  pointer-events:none;
}
.sp-hover-arrow[data-below="1"]{
  top:-8px;bottom:auto;
  transform:rotate(225deg);
}
/* 左侧：物种信息 */
.sp-hover-left{
  flex:1 1 0;
  min-width:0;
  padding-right:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sp-hover-kicker{
  font-size:10px;
  letter-spacing:3px;
  color:rgba(150,170,255,.85);
  text-transform:uppercase;
  margin-bottom:8px;
  font-weight:600;
}
.sp-hover-name{
  font-size:30px;
  font-weight:800;
  color:#ffffff;
  margin:0 0 6px;
  line-height:1.2;
  letter-spacing:1px;
  text-shadow:0 0 24px rgba(140,160,255,.35);
}
.sp-hover-latin{
  font-size:13px;
  font-style:italic;
  color:rgba(170,180,205,.75);
  margin-bottom:12px;
  line-height:1.4;
}
.sp-hover-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.sh-tag{
  font-size:12px;
  color:#cdd6ff;
  background:rgba(120,140,255,.12);
  border:1px solid rgba(130,150,255,.32);
  border-radius:999px;
  padding:3px 12px;
  letter-spacing:.5px;
}
.sp-hover-taxonomy{
  font-size:12px;
  color:rgba(160,170,195,.6);
  margin-bottom:10px;
  line-height:1.5;
}
.sp-hover-intro{
  font-size:13.5px;
  line-height:1.7;
  color:rgba(210,216,230,.82);
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sp-hover-loading{
  display:none;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:rgba(170,180,205,.7);
  margin-top:10px;
}
.sp-hover-loading.on{display:flex}
.sp-hover-spinner{
  width:14px;height:14px;
  border:2px solid rgba(150,170,255,.25);
  border-top-color:rgba(150,170,255,.9);
  border-radius:50%;
  animation:sh-spin .7s linear infinite;
}
@keyframes sh-spin{
  to{transform:rotate(360deg)}
}
/* 右侧：物种大图 */
.sp-hover-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sp-hover-imgbox{
  position:relative;
  width:230px;
  height:230px;
  border-radius:16px;
  background:
    radial-gradient(120% 120% at 50% 30%,rgba(120,140,255,.16),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 6px),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 46px -16px rgba(0,0,0,.8), 0 0 42px -12px rgba(110,130,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sp-hover-imgbox img{
  max-width:88%;
  max-height:88%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.65));
}
.sp-hover-glow{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.28));
  pointer-events:none;
}
/* 小屏：悬浮框上下堆叠，宽度撑满 */
@media (max-width:900px){
  .sp-hover{
    flex-direction:column;
    padding:20px;
  }
  .sp-hover-left{padding-right:0;padding-bottom:14px}
  .sp-hover-right{justify-content:center}
  .sp-hover-imgbox{width:180px;height:180px}
  .sp-hover-name{font-size:24px}
}

/* ==========================================================================
   中老年友好 · 全站统一字号覆盖层（20261014）
   目标：面向中老年用户放大并统一全站字号。本层置于文件末尾，仅调整字号
   与为容纳字号所需的必要间距，不改变页面结构 / 配色 / 功能。
   统一字号体系（全站一致）：
     页面主标题 h1      = 25px（首页 hero 大标题属横幅元素，保持原大）
     二级标题 h2        = 21px
     三级标题 h3        = 18px（已有 ≥18px 者保持原样）
     四级标题 h4        = 17px（已有 ≥17px 者保持原样）
     正文 / 段落         ≥ 17px，行高 1.8
     卡片标题 / 小节标题  ≥ 17px
     辅助说明 / meta / 脚注 ≥ 14px
     标签 / 徽章 / pchip  ≥ 13px
     表格 th / td        ≥ 15px
     顶部导航链接         ≥ 15px；搜索 / 登录按钮 ≥ 14px
   ========================================================================== */

/* ---- 全局基底：正文 17px，行高 1.8 ---- */
body { font-size: 17px; line-height: 1.8; }

/* ---- 标题统一（主标题 25 / 二级 21 / 三级 18 / 四级 17） ---- */
h1 { font-size: 25px; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
h4 { font-size: 17px; }
/* 首页 hero 大标题（横幅元素，保持原大） */
header.hero h1 { font-size: clamp(34px, 5.5vw, 54px); }
/* 富文本 / 详情区 / 卡片标题类 */
.rich h1 { font-size: 25px; }
.rich h2 { font-size: 21px; }
.detail-main h2 { font-size: 21px; }
.card h2 { font-size: 21px; }
.card h3 { font-size: 18px; }
.sp-title { font-size: 25px; }          /* 物种详情页主标题 */
.ct-page-title { font-size: 25px; }     /* 养殖技术页主标题 */
.sp-h2 { font-size: 21px; }
.xphy-block h4 { font-size: 17px; }
.ct-plan-title { font-size: 17px; }

/* ---- 顶部导航 ---- */
.topbar nav a { font-size: 15px; }
.brand-name small { font-size: 14px; }
.nav-search { font-size: 14px; }
.nav-login { font-size: 14px; }

/* ---- Hero 区说明文字 ---- */
.hero-kicker { font-size: 14px; }
.hero-points li { font-size: 17px; }
.stats .label { font-size: 14px; }
.map-bar { font-size: 14px; }
.map-bar button { font-size: 13px; }
.map-hint { font-size: 14px; }
.map-reset { font-size: 13px; }
.explore-label { font-size: 14px; }
.explore-search input { font-size: 14px; }
.explore-search button { font-size: 14px; }

/* ---- 卡片标题 ≥17px ---- */
.shot-title { font-size: 17px; }
.species-card .name { font-size: 17px; }
.disease-item .dname { font-size: 17px; }
.shot-row .row-name { font-size: 17px; }
.sp-member-name { font-size: 17px; }
.diag-fish-card .nm { font-size: 18px; }
.diag-sym-title { font-size: 17px; }
.diag-result-title { font-size: 17px; }

/* ---- 卡片 meta / 辅助说明 / 脚注 ≥14px ---- */
.shot-meta { font-size: 14px; }
.shot-stats { font-size: 14px; }
.species-card .meta { font-size: 14px; }
.species-card .meta .cnt { font-size: 14px; }
.disease-item .dmeta { font-size: 14px; }
.kv .k { font-size: 14px; }
.kv .v { font-size: 17px; }
.notice { font-size: 14px; }
footer { font-size: 14px; }
.grid-count { font-size: 14px; }
.pager a, .pager span { font-size: 14px; }
.ds-meta { font-size: 14px; }
.source-date { font-size: 14px; }
.source-item { font-size: 14px; }
.sp-tip { font-size: 14px; }
.sp-intro-src { font-size: 14px; }
.sp-credit { font-size: 14px; }
.sp-plan-src { font-size: 14px; }
.sp-lib-link { font-size: 14px; }
.sp-member-water { font-size: 14px; }
.ct-sp-link { font-size: 14px; }
.ct-sp-detail { font-size: 14px; }
.ct-acc-head { font-size: 14px; }
.ct-search-input { font-size: 14px; }
.ct-kv-label, .ct-kv-label-gray { font-size: 14px; }
.ct-kv-value, .ct-kv-inline { font-size: 17px; }
.ct-src { font-size: 14px; }
.ct-empty-tip { font-size: 14px; }
.idfy-tip { font-size: 14px; }
.idfy-note { font-size: 14px; }
.idfy-drop div { font-size: 16px; }
.xphy-acc-basis { font-size: 14px; }
.diag-count { font-size: 14px; }
.diag-field-label { font-size: 14px; }
.diag-fish-card .info { font-size: 14px; }
.map-err { font-size: 14px; }
.shot-row .row-stats { font-size: 14px; }

/* ---- 标签 / 徽章 / pchip ≥13px ---- */
.tag { font-size: 13px; }
.pchip b { font-size: 13px; }
.sh-tag { font-size: 13px; }
.xphy-star { font-size: 13px; }
.ct-water-btn { font-size: 13px; }
.diag-badge { font-size: 13px; }
.dsection:hover::after { font-size: 13px; }
.gallery-cap { font-size: 13px; }
.lb-count { font-size: 13px; }

/* ---- 表格 ≥15px ---- */
th, td { font-size: 15px; }

/* ---- 按钮 / 正文富文本 ---- */
.btn { font-size: 14px; }
.rich { font-size: 17px; }
.sp-intro-box { font-size: 17px; }

/* ---- 物种悬浮预览框（适度抬档） ---- */
.sp-hover-kicker { font-size: 12px; }
.sp-hover-latin { font-size: 14px; }
.sp-hover-taxonomy { font-size: 13px; }
.sp-hover-intro { font-size: 14px; }
.sp-hover-loading { font-size: 13px; }
/* ---- 鱼病自助诊断弹窗：手机端头部重排（20261020） ---- */
@media (max-width: 600px) {
    #diagOverlay { padding: 10px; }
    #diagOverlay .diag-modal {
        max-width: calc(100vw - 20px);
        max-height: 92vh;
        border-radius: 16px;
    }
    #diagOverlay .diag-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title close"
            "step step"
            "badge badge";
        gap: 2px 8px;
        padding: 14px 16px 12px;
    }
    #diagOverlay .diag-head > div:first-child,
    #diagOverlay .diag-head-right { display: contents; }
    #diagOverlay .diag-title {
        grid-area: title;
        min-width: 0;
        font-size: 20px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #diagOverlay .diag-step {
        grid-area: step;
        min-width: 0;
        margin-top: 1px;
        font-size: 13px;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #diagOverlay .diag-close-btn {
        grid-area: close;
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    #diagOverlay .diag-badge {
        grid-area: badge;
        justify-self: start;
        max-width: 100%;
        margin-top: 4px;
        padding: 2px 9px;
        font-size: 11px;
        line-height: 1.6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #diagOverlay .diag-body { padding: 14px 16px 18px; }
}

@media (max-width: 600px) {
    #diagOverlay .diag-sym-head,
    #diagOverlay .diag-result-head { gap: 8px; }
    #diagOverlay .diag-sym-title,
    #diagOverlay .diag-result-title { min-width: 0; }
    #diagOverlay .diag-sym-head .btn-gray,
    #diagOverlay .diag-result-head .btn-gray { white-space: nowrap; flex-shrink: 0; }
    #diagOverlay .diag-actions { flex-wrap: wrap; }
}