/* ==========================================================================
   1. 变量定义与全局重置
   ========================================================================== */
:root {
    --primary-color: #3b82f6;        /* 现代科技蓝 */
    --calc-success-color: #10b981;  /* 方式二 / 成功操作默认绿 */
    --calc-success-hover: #059669;
    --bg-gray: #f1f3f5;             /* 画布底色 */
    --card-bg: #ffffff;             /* 卡片背景 */
    --card-radius: 20px;            /* 统一圆角 */
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 统一浮动阴影 */
    --navbar-height: 70px;
    --margin-gap: 20px;             /* 统一间距 */
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 严禁全身滚动 */
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. 顶部导航栏 (还原并修正定位)
   ========================================================================== */
.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--navbar-height);
    z-index: 1001;
    background: transparent;
}

.navbar-custom video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* ==========================================================================
   3. 主布局与控制台 (Operator Console)
   ========================================================================== */
#main-layout {
    display: flex;
    padding-top: var(--navbar-height);
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    background-color: var(--bg-gray);
}

/* 左侧控制台外层 */
/* 1. 给面板加上丝滑的宽度过渡动画 */
.control-panel {
    width: 480px !important; /* 核心控制台宽度 */
    flex-shrink: 0;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    transition: width 0.3s ease-in-out; /* 新增：丝滑动画 */
}

/* 2. 🌟 核心黑科技：当检测到 HTML 是英文环境时，自动加宽面板！ */
html[lang="en"] .control-panel {
    width: 540px !important; /* 英文环境下，为那些长单词提供充足的施展空间，根据原480适度增加 */
}

/* 核心白色操作卡片 */
.console-card {
    background-color: var(--card-bg);
    margin: var(--margin-gap);
    padding: 28px !important;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    /* 高度精确计算：总高 - 顶栏 - 上下边距 */
    height: calc(100vh - var(--navbar-height) - (var(--margin-gap) * 2));
    width: calc(100% - (var(--margin-gap) * 2));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden; /* 内部由滑动容器控制滚动 */
}

/* 顺便处理一下可能因为变宽而拉伸的内部容器 */
html[lang="en"] .console-card {
    width: calc(100% - (var(--margin-gap) * 2)); /* 保持响应式 */
}

/* 年份选择器容器 */
.year-selector-container {
    padding: 10px 5px;
}

/* 现代滑动条美化 */
.modern-range {
    height: 6px;
    -webkit-appearance: none;
    background: #edf2f7;
    border-radius: 5px;
    outline: none;
    transition: all 0.3s;
}

/* 滑块圆点样式 */
.modern-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    transition: transform 0.2s ease;
}

.modern-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* 刻度文字样式 */
.range-tick {
    font-size: 11px;
    color: #98a6ad;
    font-weight: 500;
}

/* 状态标签样式 */
.badge-primary-lighten {
    background-color: rgba(59, 130, 246, 0.1);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 6px;
}

/* ==========================================================================
   4. 分页滑动容器样式 (向导模式)
   ========================================================================== */
/* 视口：窗口大小固定 */
.steps-viewport {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* 容器：宽度由 JS 动态设置为 (count * 100%) */
.steps-container {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    will-change: transform; /* 提升动画性能 */
}

/* 子页面：确保每一页在任何时候都精准占满视口 */
.step-page {
    flex-shrink: 0; 
    width: 100%; /* 这里的 100% 是相对于父级容器 steps-viewport 的宽度 */
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 5px;
}

/* 隐藏步页面内的细长滚动条 */
.step-page::-webkit-scrollbar { width: 4px; }
.step-page::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }

/* 第 2 步：固定标题/筛选，仅指标列表滚动 */
#step-config.step-page {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#step-config .calc-indicator-step-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    margin-bottom: 0;
}

#step-config .calc-indicator-step-head,
#step-config .calc-indicator-step-toolbar {
    flex-shrink: 0;
}

#step-config .calc-indicator-step-head {
    margin-bottom: 12px;
}

#step-config .calc-indicator-step-toolbar {
    padding-bottom: 2px;
}

#step-config .calc-indicator-step-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    padding-right: 4px;
}

#step-config .calc-indicator-step-scroll::-webkit-scrollbar {
    width: 4px;
}

#step-config .calc-indicator-step-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

/* 第 6 步：评估结果整页适配控制台高度，去除右侧滚动条 */
#step-results.step-page {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#step-results .console-section {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
}

#step-results .calc-results-briefing-head,
#step-results .calc-results-overall-score,
#step-results > .console-section > .mt-4 {
    flex-shrink: 0;
}

#step-results .calc-results-overall-score {
    margin-bottom: 12px !important;
}

#step-results > .console-section > .mt-4 {
    margin-top: 12px !important;
}

#step-results .section-label::after {
    content: none;
}

#step-results #results-dashboard {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

#step-results #results-dashboard::-webkit-scrollbar {
    width: 4px;
}

#step-results #results-dashboard::-webkit-scrollbar-track {
    background: transparent;
}

#step-results #results-dashboard::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

#step-results #results-dashboard::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

#step-results .calc-results-briefing-head {
    position: static;
}

/* ==========================================================================
   5. 右侧地图展示区 (Symmetric Map View)
   ========================================================================== */
.map-display-area {
    flex-grow: 1;
    height: 100%;
    background-color: var(--bg-gray);
    position: relative;
    overflow: hidden;
}

/* 地图圆角卡片 */
.map-card {
    background-color: var(--card-bg);
    /* 保持对称：上, 右, 下边距20px，左边距0(由控制台右边距提供) */
    margin: var(--margin-gap) var(--margin-gap) var(--margin-gap) 0;
    border-radius: var(--card-radius);
    height: calc(100vh - var(--navbar-height) - (var(--margin-gap) * 2));
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.02);
    z-index: 1;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05), var(--console-shadow);
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
}

.map-corner-legend {
    position: absolute;
    left: 12px;
    top: 12px;
    bottom: auto;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(300px, calc(100% - 88px));
    pointer-events: none;
}

.map-corner-legend[hidden] {
    display: none !important;
}

.map-scope-legend {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    max-width: none;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    font-size: 0.72rem;
    line-height: 1.3;
    color: #334155;
    pointer-events: none;
}

.map-scope-legend[hidden] {
    display: none !important;
}

.map-gis-legend {
    padding: 0.55rem 0.65rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    color: #334155;
    pointer-events: none;
}

.map-gis-legend[hidden] {
    display: none !important;
}

.map-gis-legend__header {
    margin-bottom: 0.45rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e2e8f0;
}

.map-gis-legend__layer {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1e293b;
    word-break: break-word;
}

.map-gis-legend__meta {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: #64748b;
}

.map-gis-legend__body.gis-overall-score-legend {
    font-size: 11px;
}

.map-gis-legend__body .gis-raster-legend {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.map-gis-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    justify-content: flex-start;
    text-align: left;
}

.map-scope-legend-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.map-scope-legend-item__main {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
}

.map-scope-visibility-btn {
    pointer-events: auto;
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    font-size: 0.85rem;
}

.map-scope-visibility-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
}

.map-scope-visibility-btn.is-hidden {
    color: #94a3b8;
}

.map-scope-visibility-btn.is-hidden:hover {
    color: #64748b;
}

.map-scope-legend-swatch {
    display: block;
    width: 1rem;
    height: 0.72rem;
    flex-shrink: 0;
    border-radius: 2px;
    box-sizing: border-box;
}

.map-scope-legend-swatch--basin {
    background: rgba(66, 133, 244, 0.14);
    border: 1px dashed #1a73e8;
}

.map-scope-legend-swatch--region {
    background: rgba(234, 67, 53, 0.14);
    border: 1.5px solid #d93025;
}

.map-scope-legend-label {
    font-weight: 600;
}

.calc-region-map-note {
    line-height: 1.55;
}

.calc-region-map-note-em {
    font-weight: 700;
    color: #1a7a9c;
}

/* ==========================================================================
   6. 业务组件样式 (Header, Status, Sections)
   ========================================================================== */
.console-header { margin-bottom: 20px; flex-shrink: 0; }

.engine-status {
    font-size: 11px;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    float: right;
    font-weight: 600;
}

.console-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.console-section {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 14px;
}

.section-label {
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 12px;
    display: block;
    font-size: 0.95rem;
}

/* ==========================================================================
   7. 地图菜单与弹出层 (Map Controls)
   ========================================================================== */
.menu-wrapper {
    display: none;
    position: absolute; /* 相对于 .map-card */
    z-index: 120;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.menu-wrapper > * { pointer-events: auto; }

.pop-menu {
    position: absolute;
    color: #272e37;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 32px 0 rgba(137, 137, 137, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    z-index: 150;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#map-menu {
    top: 20px; /* 卡片内部定位 */
    right: 20px;
    width: 160px;
    animation: mapIn .3s ease-out;
}

@keyframes mapIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 隐藏时的状态：向上滑动并淡出 */
#map-menu.pop-hide {
    opacity: 0;
    transform: translateY(-10px);
    animation: mapOut .3s ease-in forwards; /* forwards 确保动画结束后停在最后一帧 */
    pointer-events: none; /* 隐藏过程中禁止点击，防止误触 */
}

@keyframes mapOut {
    from { 
        opacity: 1; 
        transform: translateY(0); 
    }
    to { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
}

/* ==========================================================================
   8. Mui 列表样式还原 (保持一致性)
   ========================================================================== */
.MuiList-root { margin: 0; padding: 8px 0; list-style: none; }
.MuiButtonBase-root {
    color: inherit; border: 0; cursor: pointer; display: inline-flex;
    outline: 0; align-items: center; user-select: none; width: 100%;
    background-color: transparent; transition: background 0.2s;
}
.MuiListItem-root {
    display: flex; padding: 10px 16px; align-items: center;
}
.MuiListItem-root:hover { background-color: rgba(0,0,0,0.04); }
.MuiListItem-root.Mui-selected {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.MuiAvatar-root {
    width: 36px; height: 36px; border-radius: 6px; margin-right: 12px;
    object-fit: cover;
}
.MuiTypography-root { font-size: 0.875rem; font-weight: 500; }

/* 隐藏内置图标 */
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib { display: none !important; }

/* 一级目标卡片头部 - 加强视觉 */
.custom-accordion .card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #eef2f7 !important;
    padding: 12px 15px !important; /* 增加内边距 */
}

.indicator-title-text {
    font-size: 16px; /* 标题字号加大 */
    font-weight: 800; /* 加粗 */
    vertical-align: middle;
}

.indicator-icon {
    font-size: 20px; /* 图标加大 */
    margin-right: 12px;
    vertical-align: middle;
}

/* 调整折叠箭头大小 */
.header-arrow {
    font-size: 18px;
    color: #adb5bd;
}

/* 鼠标悬停效果增强 */
.custom-accordion .card-header:hover {
    background-color: #f1f3f5 !important;
}

/* 确认页面滚动区 */
.confirmation-scroll-area {
    background: #ffffff;
    border-radius: 12px;
    padding: 5px;
    min-height: 200px; /* 确保有最小高度 */
    max-height: 450px; /* 配合控制面板高度 */
    overflow-y: auto;  /* 必须允许纵向滚动 */
    padding-right: 5px;
}

/* 分类标题（遗留五维等无 SDG 图标时兜底） */
.confirm-category-title {
    font-weight: 800;
    color: #1a202c;
    font-size: 14px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #e2e8f0;
}

.calc-confirm-dimension {
    padding-bottom: 4px;
}

.calc-confirm-dimension + .calc-confirm-dimension {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.calc-confirm-dimension-head {
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 12px;
}

.calc-confirm-dimension-head .calc-dimension-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.calc-confirm-dimension-head .calc-sdg-icon {
    width: 28px;
    height: 28px;
}

.calc-confirm-dimension-head .calc-dimension-fallback-icon {
    font-size: 0.9rem;
    width: 28px;
}

.calc-confirm-dimension-head .calc-sdg-title-block {
    gap: 8px;
}

.calc-confirm-dimension-head .calc-sdg-target-label {
    font-size: 1.05rem;
    min-width: 2.25rem;
}

.calc-confirm-dimension-head .calc-sdg-tagline {
    font-size: 0.8125rem;
    line-height: 1.3;
}

.calc-confirm-dimension-head .calc-dimension-plain-title {
    font-size: 0.8125rem;
}

.calc-confirm-indicator-list {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.calc-confirm-indicator-list .confirm-item {
    margin-bottom: 0.35rem;
}

.calc-confirm-indicator-list .confirm-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 具体指标项（第3步确认，只读展示） */
.confirm-item {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #4d4d4d;
    padding: 3px 0;
    display: flex;
    align-items: center;
    line-height: 1.35;
}

.confirm-item .fe-check-square {
    flex-shrink: 0;
    color: #3283f6;
    font-size: 0.875rem;
    line-height: 1;
}

/* 隐藏滚动条 */
.confirmation-scroll-area::-webkit-scrollbar { width: 4px; }
.confirmation-scroll-area::-webkit-scrollbar-thumb { background: #edf2f7; border-radius: 10px; }


/* 必填项标签后的红星 */
.section-label::after {
    content: " *";
    color: #ea4335; /* 使用你喜欢的谷歌红 */
    font-weight: bold;
}

/* 按钮禁用时的提示动画（可选） */
#btn-next:disabled {
    pointer-events: none; /* 确保彻底无法点击 */
}

/* 优化上一步按钮的交互视觉 */
#btn-prev {
    transition: all 0.3s ease; /* 平滑过渡效果 */
    border: 1px solid transparent; /* 预留边框空间，防止抖动 */
    border-radius: 10px; /* 匹配整体圆角风格 */
    padding: 6px 15px;
}

/* 鼠标悬停时的样式：变为与下一步按钮相同的蓝色 */
#btn-prev:hover {
    background-color: #3b82f6 !important; /* 匹配 btn-primary 的颜色 */
    color: #ffffff !important; /* 文字变为白色 */
    text-decoration: none; /* 移除可能的下划线 */
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2); /* 增加轻微阴影提升立体感 */
}

/* 当按钮被禁用或不可见时，强制取消悬停效果 */
#btn-prev[style*="visibility: hidden"]:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 模拟计算日志样式 */
.calc-log-area::-webkit-scrollbar { width: 4px; }
.calc-log-area::-webkit-scrollbar-thumb { background: #4a5568; }

.log-item {
    margin-bottom: 4px;
    opacity: 0.8;
}

/* 结果页面的颜色背景 */
.bg-primary-lighten { background: rgba(59, 130, 246, 0.1); }
.bg-success-lighten { background: rgba(46, 204, 113, 0.1); }

.result-item:hover {
    background-color: #f8fafc;
}

/* =========================================
   参数联动锁定遮罩层样式
   ========================================= */

/* 玻璃态遮罩背景 */
.water-lock-overlay {
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px); /* 兼容 Safari */
    z-index: 10;
    border-radius: 0.25rem;
    display: none; /* 默认隐藏，由 JS 的 .style.display 动态覆盖 */
}

/* 顶部悬浮的提示徽章 */
.water-lock-badge {
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(23, 162, 184, 0.95); /* Bootstrap 的 info 蓝绿色 */
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(23, 162, 184, 0.3);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ==========================================================================
   全新双端滑块 (Dual Slider) 样式
   ========================================================================== */
.dual-slider-container {
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 10px;
}

.dual-slider-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: #edf2f7;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.dual-slider-fill {
    position: absolute;
    height: 6px;
    background: var(--primary-color);
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* 隐藏原生轨道，只保留拖动小球 */
.dual-range {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none; /* 让事件穿透到底层 */
    z-index: 3;
    margin: 0;
}

.dual-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all; /* 只允许小球接收鼠标/触摸事件 */
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
    position: relative;
    z-index: 4;
    transition: transform 0.1s ease;
}

.dual-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.dual-range::-webkit-slider-thumb:active {
    cursor: grabbing;
}

/* ==========================================================================
   Excel 风格数据表格样式
   ========================================================================== */
.custom-excel-table {
    border: 1px solid #edf2f7;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
}

.custom-excel-table th, .custom-excel-table td {
    border: 1px solid #edf2f7 !important;
}

.custom-excel-table th {
    font-weight: 700;
    font-size: 13px;
    border-bottom-width: 2px !important;
}

.custom-excel-table td {
    padding: 0.4rem !important;
}

.custom-excel-table .form-control {
    border: 1px solid transparent;
    background-color: #f8fafc;
    border-radius: 4px;
    transition: all 0.2s;
}

.custom-excel-table .form-control:hover {
    background-color: #edf2f7;
}

.custom-excel-table .form-control:focus {
    background-color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ==========================================================================
   全屏模态框内表格的特定强化
   ========================================================================== */
#table-enlarge-body .custom-excel-table th, 
#table-enlarge-body .custom-excel-table td {
    padding: 0.75rem !important; /* 让宽屏里的格子更大，点击区域更充裕 */
}

#table-enlarge-body .calc-lake-breakdown-table th,
#table-enlarge-body .calc-lake-breakdown-table td {
    padding: 0.75rem !important;
    font-size: 0.88rem;
    white-space: nowrap;
    vertical-align: middle;
}

#table-enlarge-body .form-control {
    height: calc(1.5em + 0.75rem + 2px);
    font-size: 13px;
    font-weight: 500;
}

/* ==========================================================================
   表格容器滚动条美化 (匹配向导细长风格)
   ========================================================================== */
.table-responsive::-webkit-scrollbar {
    height: 6px; /* 控制横向滚动条的粗细 */
    width: 6px;  /* 控制纵向滚动条的粗细（若有） */
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent; /* 轨道透明，更清爽 */
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e0; /* 与向导页完全一致的淡灰蓝滑块 */
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a0aec0; /* 鼠标悬停时稍微加深，提升拖拽手感 */
}

/* ==========================================================================
   9. 结果面板展示区样式
   ========================================================================== */
#results-dashboard {
    overflow-x: hidden;
}

.calc-results-briefing-head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-top: 2px;
    padding-bottom: 2px;
}

.calc-results-overall-score-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.12);
}

.calc-results-overall-score-label {
    display: block;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3b82f6;
    letter-spacing: 0.01em;
}

.calc-results-overall-score-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
}

.calc-results-overall-score-value {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #2563eb;
    font-variant-numeric: tabular-nums;
}

.calc-results-overall-score-unit {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

.calc-map-overall-score-marker {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    pointer-events: none;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
}

.calc-map-overall-score-marker .calc-results-overall-score-value {
    font-size: 1.75rem;
    color: #1d4ed8;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.98);
    paint-order: stroke fill;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 1),
        0 0 14px rgba(255, 255, 255, 0.85),
        0 0 22px rgba(255, 255, 255, 0.55),
        -1px -1px 0 rgba(255, 255, 255, 0.95),
        1px -1px 0 rgba(255, 255, 255, 0.95),
        -1px 1px 0 rgba(255, 255, 255, 0.95),
        1px 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 5px rgba(15, 23, 42, 0.55),
        0 5px 16px rgba(15, 23, 42, 0.42);
}

.calc-map-overall-score-marker .calc-results-overall-score-unit {
    font-size: 0.8rem;
    color: #1e293b;
    -webkit-text-stroke: 1.25px rgba(255, 255, 255, 0.95);
    paint-order: stroke fill;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.95),
        0 0 12px rgba(255, 255, 255, 0.7),
        -1px -1px 0 rgba(255, 255, 255, 0.9),
        1px -1px 0 rgba(255, 255, 255, 0.9),
        -1px 1px 0 rgba(255, 255, 255, 0.9),
        1px 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 4px rgba(15, 23, 42, 0.5),
        0 4px 10px rgba(15, 23, 42, 0.35);
}

.calc-lake-breakdown-heading {
    padding-left: 0;
    line-height: 1.45;
}

.calc-result-subsection-title-wrap {
    min-width: 0;
}

.calc-result-subsection-title {
    line-height: 1.45;
}

.calc-result-subsection-title-icon {
    vertical-align: -0.12em;
}

.calc-result-subsection-title-text {
    word-break: break-word;
    white-space: normal;
}

.calc-result-subsection-toolbar {
    gap: 0.5rem;
}

.calc-result-subsection-actions {
    margin-top: 0;
    align-self: flex-start;
}

.calc-result-subsection-actions .calc-trend-scope-select-ui {
    width: 10.5rem;
    max-width: 42vw;
}

.calc-lake-breakdown-wide-btn {
    white-space: nowrap;
}

.calc-lake-breakdown-help-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
}

.calc-lake-breakdown-help-btn {
    margin-top: 0;
}

.calc-lake-breakdown-help-popover {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.55rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.35rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    transform: translateX(-50%);
}

.calc-lake-breakdown-help-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    transform: translateX(-50%) rotate(45deg);
}

.calc-lake-breakdown-metric-label,
.calc-lake-breakdown-metric-tag {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.02em;
}

.calc-lake-breakdown-metric-tag {
    display: inline-block;
    margin-left: 0.2rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.2rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
}

.calc-lake-breakdown-year-col .calc-lake-breakdown-metric-label {
    margin-top: 0.15rem;
}

.calc-lake-breakdown-table {
    font-size: 0.78rem;
}

.calc-lake-breakdown-table th,
.calc-lake-breakdown-table td {
    vertical-align: middle;
}

.calc-lake-breakdown-table thead th {
    font-weight: 600;
    white-space: nowrap;
}

.calc-lake-breakdown-foot td {
    background: rgba(248, 250, 252, 0.95);
    border-top: 2px solid #e2e8f0;
}

.calc-lake-breakdown .badge {
    font-size: 0.68rem;
    font-weight: 600;
}

/* ==========================================================================
   GIS 空间面板 noUiSlider 样式完美复刻 (对齐首页原生 dual-slider)
   ========================================================================== */
/* 1. 轨道基础样式 (对应 .dual-slider-track) */
#gis-layer-control .noUi-target {
    background: #edf2f7;
    border: none;
    border-radius: 5px;
    box-shadow: none;
    height: 6px;
}

/* 2. 高亮填充条样式 (对应 .dual-slider-fill) */
#gis-layer-control .noUi-connect {
    background: var(--primary-color);
}

/* 3. 滑块圆球样式 (对应 .dual-range::-webkit-slider-thumb) */
#gis-layer-control .noUi-handle {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    /* 精准垂直居中：(20px球高 - 6px轨高)/2 = 7px */
    top: -7px; 
    right: -10px; 
    transition: transform 0.1s ease;
}

/* 4. 彻底干掉 noUiSlider 默认的难看的双竖线 */
#gis-layer-control .noUi-handle::before,
#gis-layer-control .noUi-handle::after {
    display: none;
}

/* 5. 悬停和拖拽交互动态 (对应 hover 和 active) */
#gis-layer-control .noUi-handle:hover {
    transform: scale(1.2);
}
#gis-layer-control .noUi-handle:active {
    cursor: grabbing;
}

/* 6. 美化底部年份刻度文字 (100% 像素级对齐首页的 .range-tick) */
#gis-layer-control .noUi-pips {
    top: 100%;             /* 紧贴滑动轨道底部 */
    padding: 0;
    height: 24px;          /* 收紧高度，避免撑大卡片 */
}

#gis-layer-control .noUi-value {
    /* 完全继承您 .range-tick 的核心属性 */
    font-size: 10px;
    color: #98a6ad;
    font-weight: 500;
    font-family: inherit;  /* 确保字体家族一致 */
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;

    /* 🌟 核心修正：干掉 noUiSlider 默认的垂直 50% 偏移，手动锁定距离 */
    top: 12px;             /* 距离轨道的绝对像素高度 */
    transform: translate(-50%, 0); /* 仅保留水平居中，垂直方向绝对锁定 */
}

#gis-layer-control .noUi-marker {
    display: none !important; /* 彻底隐藏原生丑陋的刻度竖线 */
}

/* GIS 面板：指标图层下拉（长名称悬停显示完整 title） */
.gis-indicator-select-ui {
    position: relative;
}

.gis-indicator-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gis-indicator-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding-right: 1.75rem;
}

.gis-indicator-select-trigger-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gis-indicator-select-chevron {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.gis-indicator-select-ui.is-open .gis-indicator-select-chevron {
    transform: rotate(180deg);
}

.gis-indicator-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.gis-indicator-select-tree-node {
    margin: 0;
    padding: 0;
}

.gis-indicator-select-tree-row--root {
    display: flex;
    align-items: stretch;
}

.gis-indicator-select-tree-toggle {
    flex-shrink: 0;
    width: 1.65rem;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.gis-indicator-select-tree-toggle i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.gis-indicator-select-tree-node.is-collapsed .gis-indicator-select-tree-toggle i {
    transform: rotate(-90deg);
}

.gis-indicator-select-tree-node.is-collapsed .gis-indicator-select-tree-children {
    display: none;
}

.gis-indicator-select-tree-children {
    list-style: none;
    margin: 2px 0 4px 1.65rem;
    padding: 0 0 0 0.65rem;
    border-left: 1px solid #e2e8f0;
}

.gis-indicator-select-tree-leaf {
    margin: 0;
    padding: 0;
}

.gis-indicator-select-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 0;
    background: transparent;
    color: #1e293b;
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.gis-indicator-select-tree-row--root .gis-indicator-select-option--root {
    flex: 1;
    min-width: 0;
    padding-left: 0.15rem;
}

.gis-indicator-select-tree-row--solo .gis-indicator-select-option--root {
    padding-left: 0.65rem;
}

.gis-indicator-select-option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gis-indicator-select-tree-leading {
    flex-shrink: 0;
    font-size: 0.9rem;
    color: #3b82f6;
}

.gis-indicator-select-tree-branch {
    flex-shrink: 0;
    width: 0.65rem;
    height: 1px;
    background: #cbd5e0;
}

.gis-indicator-select-option--root {
    font-weight: 700;
    color: #2563eb;
}

.gis-indicator-select-option--child {
    padding-left: 0.35rem;
    color: #334155;
}

.gis-indicator-select-option:hover,
.gis-indicator-select-option.is-selected {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
}

.gis-indicator-select-option--root.is-selected,
.gis-indicator-select-option--root:hover {
    color: #1d4ed8;
}

.gis-indicator-select-menu::-webkit-scrollbar {
    width: 4px;
}

.gis-indicator-select-menu::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

/* 7. 为滑动条底部撑开安全距离，防止文字与下方元素粘连 */
#gis-year-slider {
    margin-bottom: 35px !important; /* 24px用于容纳文字，剩下的作为纯净留白 */
}

/* GIS 面板：SDG 6 综合评分专用图例 */
.gis-overall-score-legend__title {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.gis-overall-score-legend__scale {
    position: relative;
    margin-bottom: 10px;
}

.gis-overall-score-legend__bar {
    position: relative;
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.gis-overall-score-legend__segment--low {
    flex: 60;
    background: #ef4444;
}

.gis-overall-score-legend__segment--mid {
    flex: 20;
    background: #f59e0b;
}

.gis-overall-score-legend__segment--high {
    flex: 20;
    background: #10b981;
}

.gis-overall-score-legend__marker {
    position: absolute;
    top: -3px;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    background: #1e293b;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
    pointer-events: none;
    z-index: 2;
}

.gis-overall-score-legend__ticks {
    position: relative;
    height: 14px;
    margin-top: 4px;
    font-size: 10px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.gis-overall-score-legend__tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.gis-overall-score-legend__tick.is-start {
    transform: translateX(0);
}

.gis-overall-score-legend__tick.is-end {
    transform: translateX(-100%);
}

.gis-overall-score-legend__tiers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gis-overall-score-legend__tier {
    display: grid;
    grid-template-columns: 10px 42px 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 10px;
    color: #64748b;
    transition: background 0.15s ease;
}

.gis-overall-score-legend__tier.is-active {
    background: rgba(59, 130, 246, 0.08);
    color: #1e293b;
    font-weight: 600;
}

.gis-overall-score-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gis-overall-score-legend__tier-range {
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
    white-space: nowrap;
}

.gis-overall-score-legend__tier.is-active .gis-overall-score-legend__tier-range {
    color: #64748b;
}

.gis-overall-score-legend__tier-label {
    line-height: 1.3;
}

.gis-overall-score-legend__current {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}

.gis-overall-score-legend__current-label {
    font-size: 10px;
    color: #94a3b8;
    margin-right: auto;
}

.gis-overall-score-legend__current-value {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: #2563eb;
    font-variant-numeric: tabular-nums;
}

.gis-overall-score-legend__current-unit {
    font-size: 10px;
    color: #94a3b8;
}

.gis-lake-indicator-legend__note {
    margin-top: 8px;
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.45;
}

.gis-lake-display-mode-toggle .btn {
    font-size: 11px;
    padding: 0.35rem 0.5rem;
    line-height: 1.3;
}

.gis-lake-display-mode-toggle .btn.active {
    color: #fff;
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.gis-lake-spatial-hint {
    line-height: 1.45;
}

.gis-raster-legend {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.gis-raster-legend__bar {
    height: 10px;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.gis-raster-legend__ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* Portal 动态指标框架（非固定五维） */
.calc-indicator-source-filter .custom-select {
    font-size: 13px;
    border-radius: 8px;
    border-color: #e2e8f0;
    height: calc(1.5em + 0.65rem + 2px);
}

.calc-indicator-toolbar-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.calc-indicator-source-filter {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.calc-indicator-select-all {
    flex-shrink: 0;
    margin-bottom: 0;
    padding-bottom: 0.45rem;
    white-space: nowrap;
}

.calc-indicator-select-all .custom-control-label {
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    padding-top: 0.15rem;
}

.calc-indicator-source-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.calc-indicator-type-select {
    position: relative;
}

.calc-indicator-type-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    font-size: 13px;
    line-height: 1.35;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calc-indicator-type-trigger:hover {
    border-color: #cbd5e1;
}

.calc-indicator-type-select.is-open .calc-indicator-type-trigger,
.calc-indicator-type-trigger:focus-visible {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    outline: none;
}

.calc-indicator-type-trigger-leading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.calc-indicator-type-icon,
.calc-indicator-type-option i {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
}

.calc-indicator-type-svg,
.calc-indicator-type-icon-mask {
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.calc-indicator-type-option[data-value="all"] i,
.calc-indicator-type-select[data-active-type="all"] .calc-indicator-type-trigger .calc-indicator-type-icon {
    color: var(--primary, #3283f6);
}

.calc-indicator-type-option[data-value="remote_sensing"] .calc-indicator-type-svg,
.calc-indicator-type-select[data-active-type="remote_sensing"] .calc-indicator-type-trigger .calc-indicator-type-svg {
    background-color: var(--success, #44cf9c);
}

.calc-indicator-type-option[data-value="statistical"] i,
.calc-indicator-type-select[data-active-type="statistical"] .calc-indicator-type-trigger .calc-indicator-type-icon {
    color: var(--warning, #fcc015);
}

.calc-indicator-type-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calc-indicator-type-chevron {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.calc-indicator-type-select.is-open .calc-indicator-type-chevron {
    transform: rotate(180deg);
}

.calc-indicator-type-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.calc-indicator-type-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    font-size: 13px;
    color: #334155;
    background: transparent;
    border: none;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
}

.calc-indicator-type-option:hover,
.calc-indicator-type-option.is-selected {
    background: rgba(59, 130, 246, 0.08);
}

.calc-indicator-type-option.is-selected {
    color: #1d4ed8;
    font-weight: 600;
}

.calc-selected-count {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1;
}

.calc-selected-count-control {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.calc-selected-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
}

.calc-selected-count-pill.is-active {
    background: #3283f6;
}

.calc-selected-count-num-flip {
    position: relative;
    display: inline-block;
    height: 1.4rem;
    min-width: 1.15em;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
}

.calc-selected-count-num-flip .calc-selected-count-num {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4rem;
    height: 1.4rem;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: #2563eb;
}

.calc-selected-count-pill.is-active .calc-selected-count-num-flip .calc-selected-count-num {
    color: #fff;
}

.calc-selected-count-num-flip.is-animating .calc-selected-count-num-out,
.calc-selected-count-num-flip.is-animating .calc-selected-count-num-in {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transition:
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease;
}

.calc-selected-count-num-flip.is-animating.is-up .calc-selected-count-num-in {
    transform: translateY(100%);
    opacity: 0;
}

.calc-selected-count-num-flip.is-animating.is-up.is-active .calc-selected-count-num-out {
    transform: translateY(-100%);
    opacity: 0;
}

.calc-selected-count-num-flip.is-animating.is-up.is-active .calc-selected-count-num-in {
    transform: translateY(0);
    opacity: 1;
}

.calc-selected-count-num-flip.is-animating.is-down .calc-selected-count-num-in {
    transform: translateY(-100%);
    opacity: 0;
}

.calc-selected-count-num-flip.is-animating.is-down.is-active .calc-selected-count-num-out {
    transform: translateY(100%);
    opacity: 0;
}

.calc-selected-count-num-flip.is-animating.is-down.is-active .calc-selected-count-num-in {
    transform: translateY(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .calc-selected-count-num-flip.is-animating .calc-selected-count-num-out,
    .calc-selected-count-num-flip.is-animating .calc-selected-count-num-in {
        transition: none;
    }
}

.calc-selected-count-num {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: #2563eb;
}

.calc-selected-count-pill.is-active .calc-selected-count-num {
    color: #fff;
}

.calc-selected-count-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.calc-selected-count-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e8edf3;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.calc-selected-count-clear:hover {
    background: #fee2e2;
    color: #dc2626;
}

.calc-selected-count-clear:focus-visible {
    outline: 2px solid rgba(50, 131, 246, 0.45);
    outline-offset: 2px;
}

.calc-selected-count.has-selection .calc-selected-count-control:hover .calc-selected-count-clear,
.calc-selected-count.has-selection .calc-selected-count-control:focus-within .calc-selected-count-clear {
    display: inline-flex;
}

@media (hover: none) {
    .calc-selected-count.has-selection .calc-selected-count-clear {
        display: inline-flex;
    }
}

.calc-framework-intro {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.calc-framework-intro-lead {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.55;
    color: #64748b;
}

.calc-framework-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.calc-framework-stat {
    flex: 1 1 72px;
    min-width: 72px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
}

.calc-framework-stat strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    color: #1e293b;
}

.calc-framework-stat span {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: #94a3b8;
}

.calc-framework-note {
    font-size: 11px;
    line-height: 1.5;
    color: #64748b;
    padding: 8px 10px;
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
}

.calc-indicator-dimension-scope {
    padding-left: 28px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 400;
}

.calc-sdg-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

.calc-indicator-dimension .card-header a.calc-dimension-toggle,
.calc-results-dimension .card-header .calc-dimension-toggle {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-decoration: none;
}

.calc-results-dimension .card-header .calc-dimension-head {
    max-width: none;
}

.calc-results-dimension-score {
    flex-shrink: 0;
    white-space: nowrap;
}

.calc-results-subtarget-score {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calc-results-subtarget-score strong {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.calc-results-subtarget-score-unit {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #94a3b8;
}

.calc-results-subtarget-score--na {
    font-size: 0.9rem;
    font-weight: 500;
}

.calc-result-indicator-score {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    padding-top: calc((1.5em - 1.35rem) / 2);
    font-variant-numeric: tabular-nums;
}

.calc-result-indicator-score small {
    font-family: "Barlow Semi Condensed", sans-serif;
}

#results-dashboard .calc-sdg-tagline,
#results-dashboard .calc-dimension-plain-title,
#results-dashboard .calc-un-indicator-title {
    font-size: 0.8rem;
    line-height: 1.35;
}

.calc-result-indicator-header {
    gap: 0.5rem;
}

.calc-results-dimension .calc-result-indicator-item .calc-indicator-label-text {
    font-weight: 700;
}

.calc-result-indicator-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.calc-result-indicator-score-caption {
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
}

.calc-result-indicator-latest-value {
    padding-left: calc(0.95rem + 0.45rem);
    line-height: 1.5;
}

.calc-result-indicator-trend {
    padding-left: 0;
}

.calc-result-indicator-latest-value .badge {
    font-size: 0.68rem;
    font-weight: 600;
    vertical-align: middle;
}

.calc-result-indicator-meta {
    padding-left: calc(0.95rem + 0.45rem);
}

.calc-dimension-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 1.75rem);
}

.calc-dimension-chevron {
    flex: 0 0 1.25rem;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.25s ease;
}

.calc-dimension-toggle:not(.collapsed) .calc-dimension-chevron {
    transform: rotate(180deg);
}

.calc-dimension-fallback-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    width: 40px;
    text-align: center;
}

.calc-dimension-plain-title {
    flex: 1;
    min-width: 0;
}

.calc-sdg-title-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.calc-sdg-target-label {
    flex-shrink: 0;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #1e293b;
    min-width: 2.75rem;
    text-align: center;
}

.calc-sdg-tagline {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    color: #4d4d4d;
}

.calc-indicator-subtarget:not(:last-child) {
    margin-bottom: 8px;
}

.calc-indicator-subtarget--separated {
    position: relative;
    margin-top: 20px;
    padding-top: 18px;
}

.calc-indicator-subtarget--separated::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(203, 213, 225, 0.15) 12%,
        #cbd5e1 28%,
        #cbd5e1 72%,
        rgba(203, 213, 225, 0.15) 88%,
        transparent 100%
    );
}

.calc-indicator-accordion .calc-indicator-label {
    font-family: "Barlow Semi Condensed", sans-serif;
    display: block;
    width: 100%;
}

.calc-un-indicator-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "Barlow Semi Condensed", sans-serif;
}

.calc-un-indicator-code {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #98a6ad;
}

.calc-un-indicator-title {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
    color: #98a6ad;
}

.calc-indicator-accordion .calc-indicator-label {
    font-size: 1rem;
    font-weight: 400;
}

.calc-indicator-accordion .custom-control-input.sdg-checkbox:checked + .calc-indicator-label {
    font-weight: 700;
}

.calc-indicator-accordion .custom-control-input.sdg-checkbox:disabled + .calc-indicator-label {
    font-weight: 400;
}

.mekong-calculator .calc-framework-intro {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 118, 110, 0.18);
}

.mekong-calculator .calc-framework-stat strong {
    color: #0f766e;
}

.calc-indicator-config-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 700;
}

.calc-indicator-param-section-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.calc-indicator-param-section-suffix {
    font-family: inherit;
    font-weight: 700;
}

.calc-indicator-config-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.calc-indicator-config-badge-label {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: #94a3b8;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.calc-indicator-config-badge-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: rgba(50, 131, 246, 0.12);
    color: #2563eb;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.calc-indicator-config-title-text {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 700;
    line-height: 1.25;
}

#step-title-text.calc-indicator-config-wizard-title {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 700;
}

.calc-indicator-label-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.calc-indicator-label-main {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

.calc-indicator-type-badge {
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    line-height: 1;
    /* 与首行文字垂直居中（按单行 line-height 计算，不随多行总高变化） */
    margin-top: calc((1.5em - 0.95rem) / 2);
}

.calc-indicator-type-badge--remote-sensing {
    background-color: var(--success, #44cf9c);
}

.calc-indicator-type-badge--statistical {
    font-size: 0.95rem;
    color: var(--warning, #fcc015);
}

.calc-indicator-label-text {
    flex: 1;
    min-width: 0;
    line-height: 1.5;
}

.calc-indicator-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: calc((1.5em - 1.35rem) / 2);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.calc-indicator-info-btn i {
    font-size: 1.05rem;
}

.calc-indicator-info-btn i.mdi::before {
    font-size: 1.05rem;
    line-height: 1;
}

.calc-indicator-info-btn:hover,
.calc-indicator-info-btn:focus-visible {
    color: var(--primary, #3283f6);
    background: rgba(59, 130, 246, 0.08);
    outline: none;
}

body.calc-indicator-guideline-open {
    overflow: hidden;
}

.calc-indicator-guideline-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.calc-indicator-guideline-modal[hidden] {
    display: none;
}

.calc-indicator-guideline-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.calc-indicator-guideline-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.16),
        0 8px 16px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.calc-indicator-guideline-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.15rem 1rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border-bottom: 1px solid #e8eef5;
}

.calc-indicator-guideline-head-main {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.calc-indicator-guideline-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.calc-indicator-guideline-badge-label {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: #94a3b8;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.calc-indicator-guideline-badge-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 10px;
    background: rgba(50, 131, 246, 0.12);
    color: #2563eb;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.calc-indicator-guideline-title {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: #0f172a;
}

.calc-indicator-guideline-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.calc-indicator-guideline-close:hover,
.calc-indicator-guideline-close:focus-visible {
    background: rgba(50, 131, 246, 0.12);
    color: #2563eb;
    outline: none;
}

.calc-indicator-guideline-body {
    padding: 1rem 1.15rem 1.2rem;
    overflow-y: auto;
    font-size: 0.86rem;
    line-height: 1.7;
    color: #475569;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, 1)) border-box;
}

.calc-indicator-guideline-body::-webkit-scrollbar {
    width: 6px;
}

.calc-indicator-guideline-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.calc-guideline-content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.calc-guideline-section {
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e8eef5;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.calc-guideline-section-title {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.45;
    color: #2563eb;
    letter-spacing: 0.01em;
}

.calc-guideline-section--en .calc-guideline-section-title {
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.calc-guideline-section--en:lang(zh) .calc-guideline-section-title,
.calc-guideline-content:lang(zh) .calc-guideline-section--en .calc-guideline-section-title {
    text-transform: none;
    letter-spacing: 0.01em;
}

.calc-guideline-section--method .calc-guideline-formula {
    margin: 0;
}

.calc-guideline-paragraph {
    margin: 0 0 0.55rem;
    color: #475569;
}

.calc-guideline-paragraph:last-child {
    margin-bottom: 0;
}

.calc-guideline-subitem {
    margin: 0.35rem 0 0.15rem;
    padding-left: 0.65rem;
    border-left: 2px solid rgba(50, 131, 246, 0.25);
}

.calc-guideline-method-list {
    margin: 0 0 0.65rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.calc-guideline-method-list-item {
    position: relative;
    margin: 0;
    padding: 0 0 0 0.95rem;
    color: #475569;
    line-height: 1.65;
    font-size: inherit;
}

.calc-guideline-method-list-item::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: rgba(15, 118, 110, 0.55);
}

.calc-guideline-method-list-item .calc-guideline-paragraph {
    margin-bottom: 0.45rem;
}

.calc-guideline-method-list-item .calc-guideline-paragraph:last-child {
    margin-bottom: 0;
}

.calc-guideline-method-list-item .calc-guideline-formula {
    margin-top: 0.35rem;
}

.calc-guideline-method-list-item .calc-guideline-formula + .calc-guideline-paragraph {
    margin-top: 0.45rem;
}

.calc-guideline-empty {
    margin: 0;
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: #94a3b8;
}

.calc-guideline-formula {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.35rem 0 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(50, 131, 246, 0.08) 0%, rgba(50, 131, 246, 0.03) 100%);
    border: 1px solid rgba(50, 131, 246, 0.14);
    font-family: "Barlow Semi Condensed", "Segoe UI", sans-serif;
    color: #1e293b;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.calc-guideline-formula-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.calc-guideline-formula-lhs {
    font-size: 0.95rem;
    white-space: nowrap;
}

.calc-guideline-var {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.02em;
    font-family: "Times New Roman", "Cambria Math", "Barlow Semi Condensed", serif;
    white-space: nowrap;
    vertical-align: baseline;
    margin: 0 0.04em;
}

.calc-guideline-var--main-only,
.calc-guideline-var--symbol {
    align-items: baseline;
}

.calc-guideline-var-main {
    font-style: italic;
    font-weight: 600;
    font-size: 1em;
    line-height: 1;
    color: #1e293b;
}

.calc-guideline-var-sub {
    font-size: 0.68em;
    line-height: 1;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 0.14em;
    color: #334155;
    letter-spacing: 0;
}

.calc-guideline-formula .calc-guideline-var-main {
    font-size: 1.05em;
    font-style: italic;
    font-weight: 600;
}

.calc-guideline-formula .calc-guideline-var--main-only .calc-guideline-var-main,
.calc-guideline-formula .calc-guideline-var--symbol .calc-guideline-var-main {
    font-size: 1.05em;
}

.calc-guideline-formula .calc-guideline-var-sub {
    font-size: 0.62em;
    margin-bottom: 0.18em;
}

.calc-guideline-formula-expr {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    color: #1e293b;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.calc-guideline-frac {
    display: inline-grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    min-width: 2.2rem;
    padding: 0 0.2rem;
    vertical-align: middle;
}

.calc-guideline-frac-num,
.calc-guideline-frac-den {
    display: block;
    padding: 0.08rem 0.35rem;
    font-size: 0.92rem;
    line-height: 1.2;
    text-align: center;
}

.calc-guideline-frac-num {
    border-bottom: 1.5px solid #64748b;
    padding-bottom: 0.18rem;
}

.calc-guideline-frac-den {
    padding-top: 0.18rem;
}

.calc-guideline-formula-tail {
    font-size: 0.86rem;
    line-height: 1.5;
    color: #334155;
}

.calc-guideline-formula-note {
    margin: 0;
    padding-top: 0.15rem;
    border-top: 1px dashed rgba(50, 131, 246, 0.2);
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.calc-guideline-formula-note .calc-guideline-var-main {
    font-style: italic;
    font-weight: 600;
    color: #475569;
}

.calc-guideline-citation-link {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.calc-guideline-citation-link:hover,
.calc-guideline-citation-link:focus-visible {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
    outline: none;
}

.calc-guideline-citation-link--doc {
    font-style: italic;
}

.calc-guideline-content:lang(zh) .calc-guideline-citation-link--doc {
    font-style: normal;
}