/* 由 page_*.html 的内嵌 <style> 提取，全部规则收束在 .ddt-scope 内。
   只改本文件即可，勿在模板里再加裸标签或 body 选择器。
   来源: page_drugdevtools.html */

.ddt-scope, .ddt-scope * { box-sizing: border-box; margin: 0; padding: 0; }
.ddt-scope { font-family: 'Open Sans','Segoe UI',Roboto,system-ui,sans-serif; background-color: #fff; color: #1a2332; display: flex; flex-direction: column; min-height: 720px; }
.ddt-scope .top-bar { background: #fff; border-bottom: 1px solid #e8edf5; padding: 12px 24px; display: flex; align-items: center; gap: 16px; position: -webkit-sticky; position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.ddt-scope .top-bar-title { font-size: 18px; font-weight: 700; color: #2208C9; flex-shrink: 0; }
.ddt-scope .top-bar-search { flex: 1; max-width: 600px; position: relative; }
.ddt-scope .search-input { width: 100%; padding: 10px 36px 10px 16px; border: 1.5px solid #d5e0ec; border-radius: 24px; font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; background: #f5f7fc; }
.ddt-scope .search-input:focus { border-color: #2208C9; box-shadow: 0 0 0 3px rgba(34,8,201,0.12); background: #fff; }
.ddt-scope .search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #8a9ab0; font-size: 15px; pointer-events: none; }
.ddt-scope .search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e8edf5; border-radius: 12px; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 300; display: none; }
.ddt-scope .search-dropdown.show { display: block; }
.ddt-scope .search-item { padding: 10px 16px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f3f9; color: #1a2332; transition: background 0.15s; }
.ddt-scope .search-item:last-child { border-bottom: none; }
.ddt-scope .search-item:hover, .ddt-scope .search-item.active { background: #eef4fb; color: #2208C9; }
.ddt-scope .search-item .search-cat { font-size: 11px; color: #8a9ab0; margin-top: 3px; }
.ddt-scope .search-item.active .search-cat { color: #2208C9; }
.ddt-scope .search-empty { padding: 16px; text-align: center; color: #8a9ab0; font-size: 13px; }
.ddt-scope .content-wrapper { display: flex; flex: 1; min-height: 0; }
.ddt-scope .sidebar { width: 260px; background: #fff; border-right: 1px solid #e8edf5; padding: 20px 0; flex-shrink: 0; height: calc(100vh - 57px); overflow-y: auto; position: -webkit-sticky; position: sticky; top: 57px; }
.ddt-scope .sidebar-title { font-size: 16px; font-weight: 700; color: #2208C9; padding: 0 20px 16px; border-bottom: 1px solid #e8edf5; margin-bottom: 8px; }
.ddt-scope .cat-block { margin-bottom: 4px; }
.ddt-scope .cat-header { font-size: 13px; font-weight: 600; color: #445066; padding: 8px 20px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.ddt-scope .cat-header:hover { background: #f0f3f9; }
.ddt-scope .cat-header .arrow { font-size: 10px; transition: transform 0.2s; }
.ddt-scope .cat-block.collapsed .arrow { transform: rotate(-90deg); }
.ddt-scope .cat-tools { list-style: none; overflow: hidden; transition: max-height 0.3s; }
.ddt-scope .cat-block.collapsed .cat-tools { max-height: 0 !important; }
.ddt-scope .cat-tools li { padding: 6px 20px 6px 36px; font-size: 12.5px; color: #5a6a7e; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; }
.ddt-scope .cat-tools li:hover { background: #f0f3f9; color: #2208C9; }
.ddt-scope .cat-tools li.active { background: #eef4fb; color: #2208C9; border-left-color: #2208C9; font-weight: 600; }
.ddt-scope .buffer-cat-header { font-size: 12px; font-weight: 600; color: #2208C9; padding: 6px 20px 4px; }
.ddt-scope .main { flex: 1; padding: 24px; overflow-y: auto; display: flex; justify-content: center; }
.ddt-scope .card { max-width: 920px; width: 100%; background: #fff; border-radius: 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.06); padding: 32px 36px 40px; }
.ddt-scope h1 { font-size: 26px; font-weight: 600; margin: 0 0 12px 0; color: #0b1a33; border-left: 6px solid #2208C9; padding-left: 18px; line-height: 1.3; }
.ddt-scope .desc { font-size: 0.95rem; line-height: 1.7; color: #2d3748; margin: 16px 0 22px 0; }
.ddt-scope .volume-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: #f0f3f9; padding: 14px 22px; border-radius: 60px; margin-bottom: 6px; }
.ddt-scope .volume-row .label { font-weight: 500; font-size: 1rem; }
.ddt-scope .volume-input-group { display: inline-flex; align-items: center; border: 1px solid #b8c2d4; border-radius: 40px; background: white; padding: 0 8px 0 16px; transition: border 0.15s, box-shadow 0.15s; }
.ddt-scope .volume-input-group:focus-within { border-color: #2208C9; box-shadow: 0 0 0 3px rgba(34,8,201,0.12); }
.ddt-scope .volume-input-group input { border: none; background: transparent; font-size: 1.1rem; font-weight: 600; width: 72px; padding: 10px 0; outline: none; color: #1a2a4a; text-align: center; }
.ddt-scope .volume-unit { font-weight: 700; color: #1f7b3a; font-size: 1.05rem; padding-right: 4px; }
.ddt-scope .buffer-name { font-weight: 700; color: #2208C9; font-size: 1.05rem; }
.ddt-scope .hint { font-size: 0.85rem; color: #5a6a7e; margin: 6px 0 0 8px; }
.ddt-scope .slider-section { margin: 16px 0 20px 0; border-radius: 16px; overflow: hidden; border: 1px solid #e8edf5; background: #f8faff; }
.ddt-scope .slider-section table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ddt-scope .slider-section td { padding: 14px 18px; border-bottom: 1px solid #e9eef7; vertical-align: middle; }
.ddt-scope .slider-section tr:last-child td { border-bottom: none; }
.ddt-scope .slider-label { font-weight: 600; color: #1a2a4a; font-size: 0.95rem; white-space: nowrap; }
.ddt-scope .slider-value { font-size: 1.8rem; font-weight: 600; color: #0b1a33; }
.ddt-scope .slider-wrapper { display: flex; align-items: center; gap: 16px; width: 100%; }
.ddt-scope .slider-wrapper input[type="range"] { flex: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: #d4ddee; outline: none; }
.ddt-scope .slider-wrapper input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #2208C9; cursor: pointer; border: 2px solid white; box-shadow: 0 2px 8px rgba(34,8,201,0.3); }
.ddt-scope .slider-wrapper input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #2208C9; cursor: pointer; border: 2px solid white; box-shadow: 0 2px 8px rgba(34,8,201,0.3); }
.ddt-scope .slider-wrapper input[type="range"]::-ms-thumb { width: 20px; height: 20px; border-radius: 50%; background: #2208C9; cursor: pointer; border: 2px solid white; box-shadow: 0 2px 8px rgba(34,8,201,0.3); }
.ddt-scope .slider-hint { font-size: 0.85rem; color: #5a6a7e; margin: 2px 0 0 0; }
.ddt-scope .table-title { font-size: 0.95rem; font-weight: 600; color: #1a2a4a; margin: 24px 0 -10px 4px; }
.ddt-scope .table-wrap { margin: 26px 0 20px 0; border-radius: 16px; overflow-x: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #e8edf5; }
.ddt-scope table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: white; }
.ddt-scope th { background: #f0f4fc; font-weight: 600; color: #1a2a4a; padding: 14px 18px; text-align: left; border-bottom: 2px solid #d4ddee; }
.ddt-scope td { padding: 14px 18px; border-bottom: 1px solid #e9eef7; vertical-align: middle; }
.ddt-scope tr:last-child td { border-bottom: none; }
.ddt-scope .component-name { font-weight: 500; }
.ddt-scope .component-name a { color: #1976d2; text-decoration: none; font-weight: 500; }
.ddt-scope .component-name a:hover { text-decoration: underline; }
.ddt-scope .mw { color: #445066; font-weight: 400; font-size: 0.9rem; }
.ddt-scope .value-badge { color: #1f7b3a; font-weight: 600; background: #eaf3ed; padding: 4px 16px; border-radius: 30px; display: inline-block; font-size: 0.9rem; min-width: 80px; text-align: center; }
.ddt-scope .steps { list-style: none; padding: 0; margin: 16px 0 6px 0; }
.ddt-scope .steps li { padding: 8px 0 8px 34px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%232208C9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>') left center no-repeat; background-size: 20px; line-height: 1.6; color: #1e293b; border-bottom: 1px dashed #edf2f8; }
.ddt-scope .steps li:last-child { border-bottom: none; }
.ddt-scope .steps li strong { font-weight: 600; color: #0f1c3a; }
.ddt-scope .steps .hl { background: #eef4fb; padding: 2px 14px; border-radius: 30px; font-weight: 600; color: #0b2b5e; }
.ddt-scope .welcome { text-align: center; padding: 80px 20px; color: #5a6a7e; }
.ddt-scope .welcome h2 { font-size: 24px; color: #2208C9; margin-bottom: 12px; }
.ddt-scope .welcome p { font-size: 1rem; line-height: 1.8; max-width: 500px; margin: 0 auto; }
.ddt-scope .welcome .stats { margin-top: 24px; font-size: 0.9rem; color: #8a9ab0; }
.ddt-scope .calc-formula-box { background: #f0f4fc; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; border: 1px solid #d4ddee; text-align: center; font-size: 15px; color: #1a3a5c; font-weight: 500; }
.ddt-scope .calc-formula-box .hl { color: #2208C9; font-weight: 700; }
.ddt-scope .calc-formula-box .eq { color: #6b7f96; margin: 0 6px; }
.ddt-scope .calc-input-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ddt-scope .calc-input-group { display: flex; align-items: center; gap: 10px; background: #f9fcff; border-radius: 14px; padding: 6px 14px 6px 18px; border: 1.5px solid #e2ebf5; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; flex-wrap: wrap; }
.ddt-scope .calc-input-group:focus-within { border-color: #2208C9; background: #ffffff; box-shadow: 0 0 0 4px rgba(34,8,201,0.10); }
.ddt-scope .calc-input-group .label { flex: 0 0 90px; font-size: 14px; font-weight: 500; color: #1f3a5f; }
.ddt-scope .calc-input-group input[type="number"], .ddt-scope .calc-input-group input[type="text"] { border: none; background: transparent; font-size: 1.05rem; font-weight: 600; width: 100px; padding: 8px 4px; outline: none; color: #1a2a4a; text-align: center; font-family: inherit; }
.ddt-scope .calc-input-group select { border: 1px solid #d5e0ec; border-radius: 20px; padding: 6px 10px; font-size: 0.85rem; color: #1a2a4a; background: #fff; outline: none; cursor: pointer; font-family: inherit; min-width: 40px; width: 60px; }
.ddt-scope .calc-input-group select.select-wide { flex: 1; max-width: 75%; width: auto; }
.ddt-scope .calc-input-group select.select-narrow { width: 70px; min-width: 60px; }
.ddt-scope .calc-input-group .unit-suffix { font-weight: 700; color: #1f7b3a; font-size: 0.95rem; }
.ddt-scope .calc-action-row { display: flex; gap: 12px; margin-bottom: 20px; }
.ddt-scope .calc-btn { padding: 10px 28px; border: none; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.ddt-scope .calc-btn-primary { background: #2208C9; color: #fff; }
.ddt-scope .calc-btn-primary:hover { background: #1a06a0; box-shadow: 0 4px 12px rgba(34,8,201,0.3); }
.ddt-scope .calc-btn-secondary { background: #dfe5f0; color: #445066; }
.ddt-scope .calc-btn-secondary:hover { background: #c8d2e5; }
.ddt-scope .calc-status-area { min-height: 30px; margin-bottom: 16px; }
.ddt-scope .calc-status-msg { padding: 8px 14px; border-radius: 10px; font-size: 13px; display: none; }
.ddt-scope .calc-status-msg.success { display: block; background: #eaf3ed; color: #1f7b3a; border: 1px solid #c3dbc9; }
.ddt-scope .calc-status-msg.error { display: block; background: #fdeaea; color: #c0392b; border: 1px solid #f5c6c0; }
.ddt-scope .calc-status-msg.info { display: block; background: #eef4fb; color: #2208C9; border: 1px solid #d5e0ec; }
.ddt-scope .calc-result-row { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; background: #f0f4fc; border-radius: 14px; margin-bottom: 16px; }
.ddt-scope .calc-result-row .label { font-size: 14px; font-weight: 600; color: #445066; }
.ddt-scope .calc-result-row .value { font-size: 1.8rem; font-weight: 700; color: #0b1a33; }
.ddt-scope .calc-result-row .unit { font-size: 1rem; font-weight: 600; color: #2208C9; }
.ddt-scope .calc-two-column { display: flex; gap: 24px; flex-wrap: wrap; }
.ddt-scope .calc-two-column > div { flex: 1; min-width: 300px; }
.ddt-scope .calc-module-box { background: #f9fcff; border: 1px solid #e2ebf5; border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.ddt-scope .calc-module-title { font-size: 16px; font-weight: 600; color: #0b1a33; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #2208C9; }
.ddt-scope .calc-hint-text { font-size: 13px; color: #5a6a7e; margin-top: 8px; line-height: 1.5; }
.ddt-scope .serial-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.ddt-scope .serial-left { flex: 0 0 300px; min-width: 260px; }
.ddt-scope .serial-right { flex: 1; min-width: 320px; }
.ddt-scope .serial-right .table-wrap { margin-top: 0; }
.ddt-scope .calc-element-table { margin-top: 16px; }
.ddt-scope .calc-element-table th { font-size: 12px; padding: 8px 12px; }
.ddt-scope .calc-element-table td { font-size: 13px; padding: 8px 12px; }
.ddt-scope .dil-legend { text-align: center; font-size: 13px; color: #5a6a7e; margin: -4px 0 22px; }
.ddt-scope .dil-tag { display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; margin: 0 4px; vertical-align: middle; }
.ddt-scope .dil-tag-input { background: #fff4d6; color: #8a6d1a; border: 1px solid #f0d878; }
.ddt-scope .dil-tag-output { background: #ede0ff; color: #5a3fb0; border: 1px solid #c8b0f0; }
.ddt-scope .dil-red { color: #c0392b; font-weight: 700; }
.ddt-scope .dil-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; }
.ddt-scope .dil-row-head { margin-bottom: 6px; }
.ddt-scope .dil-row-head > div { flex: 1 1 0; min-width: 56px; text-align: center; font-weight: 700; color: #1a2a4a; font-size: 14px; }
.ddt-scope .dil-field { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 120px; background: #fffdf5; border: 1.5px solid #f0d878; border-radius: 14px; padding: 4px 8px; transition: border-color .2s, box-shadow .2s, background .2s; }
.ddt-scope .dil-field.is-output { background: #f6f0ff; border-color: #c8b0f0; }
.ddt-scope .dil-field:focus-within { border-color: #2208C9; box-shadow: 0 0 0 4px rgba(34,8,201,0.10); }
.ddt-scope .dil-field input { border: none; background: transparent; font-size: 1rem; font-weight: 600; width: 100%; min-width: 0; padding: 8px 2px; outline: none; color: #1a2a4a; text-align: center; font-family: inherit; }
.ddt-scope .dil-field select { border: 1px solid #d5e0ec; border-radius: 20px; padding: 5px 6px; font-size: 0.8rem; color: #1a2a4a; background: #fff; outline: none; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.ddt-scope .dil-op { font-weight: 700; color: #c0392b; font-size: 1.15rem; padding: 0 2px; flex: 0 0 auto; }
.ddt-scope .dil-eq { font-weight: 600; color: #1a2a4a; white-space: nowrap; }
.ddt-scope .calc-input-group.dil-input { background: #fffdf5; border-color: #f0d878; }
.ddt-scope .calc-input-group.dil-output { background: #f6f0ff; border-color: #c8b0f0; }
.ddt-scope .invivo-layout { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; }
.ddt-scope .invivo-left { flex: 1; min-width: 300px; display: flex; flex-direction: column; }
.ddt-scope .invivo-left .calc-action-row { margin-top: auto; }
.ddt-scope .invivo-right { flex: 1; min-width: 300px; }
.ddt-scope .menu-toggle { display: none; width: 36px; height: 36px; border: none; background: #eef4fb; border-radius: 10px; cursor: pointer; font-size: 18px; color: #2208C9; flex-shrink: 0; align-items: center; justify-content: center; }
.ddt-scope .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 150; }
.ddt-scope .sidebar-overlay.show { display: block; }
@media (max-width: 1024px) {
    .ddt-scope .sidebar { width: 220px; }
    .ddt-scope .card { padding: 28px 28px 36px; }
    .ddt-scope .serial-left { flex: 0 0 260px; min-width: 220px; }
}
@media (max-width: 768px) {
    .ddt-scope { flex-direction: column; }
    .ddt-scope .menu-toggle { display: flex; }
    .ddt-scope .top-bar { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
    .ddt-scope .top-bar-title { font-size: 16px; }
    .ddt-scope .top-bar-search { max-width: 100%; }
    .ddt-scope .content-wrapper { flex-direction: column; }
    .ddt-scope .sidebar { position: fixed; left: 0; top: 0; width: 280px; height: 100%; z-index: 200; transform: translateX(-100%); -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; max-height: none; }
    .ddt-scope .sidebar.show { transform: translateX(0); }
    .ddt-scope .main { padding: 16px; }
    .ddt-scope .card { padding: 20px 16px; border-radius: 20px; }
    .ddt-scope h1 { font-size: 22px; padding-left: 14px; }
    .ddt-scope .slider-value { font-size: 1.2rem; }
    .ddt-scope .slider-wrapper { flex-wrap: wrap; gap: 8px; }
    .ddt-scope .calc-two-column { flex-direction: column; }
    .ddt-scope .calc-two-column > div { min-width: 0; }
    .ddt-scope .dil-row-head { display: none; }
    .ddt-scope .dil-field { min-width: calc(50% - 6px); }
    .ddt-scope .dil-op { display: none; }
    .ddt-scope .serial-layout { flex-direction: column; }
    .ddt-scope .serial-left, .ddt-scope .serial-right { min-width: 0; flex: 1; }
    .ddt-scope .invivo-layout { flex-direction: column; }
    .ddt-scope .invivo-left, .ddt-scope .invivo-right { min-width: 0; }
    .ddt-scope .calc-input-group .label { flex: 0 0 auto; }
}
@media (max-width: 480px) {
    .ddt-scope .top-bar-title { font-size: 14px; }
    .ddt-scope .search-input { font-size: 13px; padding: 8px 30px 8px 12px; }
    .ddt-scope .card { padding: 16px 12px; border-radius: 16px; }
    .ddt-scope h1 { font-size: 20px; }
    .ddt-scope .calc-result-row .value { font-size: 1.4rem; }
    .ddt-scope .calc-result-row { flex-wrap: wrap; }
    .ddt-scope table { font-size: 0.85rem; }
    .ddt-scope th, .ddt-scope td { padding: 8px 10px; }
    .ddt-scope .calc-module-box { padding: 14px; }
}

/* ============================================================
   与 canallotus 主题的边界适配（新增规则放最后，用于覆盖上面的提取内容）
   主题的 .topbar 高 40px、.navbar 固定后高 56px，两者都脱离文档流：
     · 顶部让位由 .top-content 的 margin-top:6.2rem 承担，banner 已扣掉导航高度
     · 内容区收窄到主题 .container 的 1140px，与 drugpurchase.html 左右边界对齐
     · 工具栏与侧栏的 sticky 落点改为 56px（导航栏固定后的高度）
   ============================================================ */
.main-content > .ddt-scope { flex: 1 1 auto; width: 100%; align-self: stretch; }
/* 顶部让位由主题 .top-content 的 margin-top:6.2rem 承担，这里只收窄到主题 .container 的 1140px */
.ddt-scope { max-width: 1140px; margin: 0 auto; padding: 24px 15px 0; }
.ddt-scope .top-bar { top: var(--cl-nav-h, 56px); transition: top .28s ease-out; }
.ddt-scope .sidebar { top: 56px; height: calc(100vh - 56px); }

/* ============================================================
   滚动向下时收起主题导航栏，顶部只保留搜索工具条
   · 只在本页生效，不修改 _layout.html；--cl-nav-h 由页面脚本按实际高度写入
   · 向上滚动或回到顶部时导航栏重新露出
   ============================================================ */
nav.navbar { transition: transform .28s ease-out, background-color .3s ease-out; }
html.cl-nav-hide nav.navbar { transform: translate(0, -100%) !important; }
html.cl-nav-hide .ddt-scope .top-bar { top: 0; }

/* 搜索工具条右边界与下方工具卡片对齐（.main 的 padding-right：24px，窄屏 16px） */
.ddt-scope .top-bar { margin-right: 24px; }
@media (max-width: 768px) { .ddt-scope .top-bar { margin-right: 16px; } }

/* ============================================================
   手机端修正
   · 搜索条固定两行：第一行菜单按钮+标题（超长省略），第二行整行搜索框
   · Molarity 公式框是内联 flex，手机上必须允许换行，否则横向溢出被裁切
   · 主题的右侧悬浮客服条在手机上跑到屏幕外并遮挡内容
   ============================================================ */
@media (max-width: 768px) {
    /* 两行栅格：第一行菜单按钮 + 标题，第二行整行搜索框。用 grid 避免 flex 把标题压成 0 宽 */
    .ddt-scope .top-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; row-gap: 10px; }
    .ddt-scope .top-bar-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ddt-scope .top-bar-search { grid-column: 1 / -1; max-width: 100%; }
    /* 输入行：标签独占一行，数值和单位排在下一行，避免单位被挤出可视区 */
    .ddt-scope .calc-input-group .label { flex: 0 0 100%; }
    .ddt-scope .calc-input-group input[type="number"], .ddt-scope .calc-input-group input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
    .ddt-scope .calc-formula-box { flex-wrap: wrap !important; justify-content: center !important; gap: 6px; }
    .ddt-scope .calc-formula-box > button { flex: 0 0 100%; }
    .right-pale { display: none; }
}

/* ============================================================
   页面 banner
   主题 .top-content 是固定 260px 高 + overflow:hidden，
   而图是 1701×262（宽高比 6.49），塞进 1425×260（6.49→5.48）会二选一出问题：
     · 直接 width:100% → 横向压扁 16%，字变形
     · object-fit:cover → 两侧各裁 8%，最左边的「Drug Development…」被切掉
   所以这里改成：容器高度跟着图片比例走，不裁不压。
   ≤768px 自动切 <source> 里的 750×280 手机版图。
   ============================================================ */
section.top-content.tool-banner { height: auto; }
section.top-content.tool-banner > picture { display: block; width: 100%; }
section.top-content.tool-banner > picture > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;   /* 覆盖主题 .top-content img{min-height:260px} */
}