/* ============================================================
   SDBDesigner 全新现代 UI —— 统一设计令牌与共享组件
   作用域：所有选择器均以 .sdbd-* 前缀或限定在 .sdbd-app 根容器内，
           不使用裸元素选择器，避免污染共享站其他应用样式。
   ============================================================ */

:root {
    /* 浅色科学配色（白底 + 蓝色高亮） */
    --sdbd-bg: #ffffff;
    --sdbd-bg-2: #f5f7fa;
    --sdbd-panel: #ffffff;
    --sdbd-panel-2: #eef2f7;
    --sdbd-border: #dfe5ec;
    --sdbd-border-soft: #eaeef3;
    --sdbd-primary: #2563eb;      /* blue 高亮 */
    --sdbd-primary-2: #3b82f6;    /* lighter blue */
    --sdbd-accent: #1d4ed8;       /* deep blue */
    --sdbd-text: #1f2a37;
    --sdbd-text-soft: #475569;
    --sdbd-text-mute: #64748b;
    --sdbd-ok: #059669;
    --sdbd-warn: #d97706;
    --sdbd-err: #dc2626;

    --sdbd-radius: 12px;
    --sdbd-radius-sm: 8px;
    --sdbd-shadow: 0 8px 24px rgba(30, 58, 95, .12);
    --sdbd-shadow-soft: 0 2px 10px rgba(30, 58, 95, .08);
    --sdbd-glow: 0 0 0 3px rgba(37, 99, 235, .16);
    --sdbd-font: "Segoe UI", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

/* 全站共享的 base.css 将 html,body 固定为 width:1280px 居中，会把宽屏布局挤成窄栏。
   theme.css 仅在 SDBDesigner 页面加载且位于 base.css 之后，故在此解除该限制、恢复宽屏，
   且不影响其余 52 个共用 base.css 的页面。 */
html, body { width: 100%; max-width: 100%; }

/* ---------- 应用外壳 ---------- */
.sdbd-app {
    min-height: 100vh;
    box-sizing: border-box;
    font-family: var(--sdbd-font);
    color: var(--sdbd-text);
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(37, 99, 235, .06), transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, rgba(59, 130, 246, .05), transparent 55%),
        var(--sdbd-bg-2);
}

.sdbd-app *, .sdbd-app *::before, .sdbd-app *::after { box-sizing: border-box; }

.sdbd-container {
    max-width: none;
    margin: 0 auto;
    padding: 20px 32px 40px;
}

/* ---------- 顶部导航 ---------- */
.sdbd-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sdbd-border);
    box-shadow: 0 1px 8px rgba(30, 58, 95, .05);
}
.sdbd-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sdbd-brand__logo { height: 32px; width: auto; display: block; border-radius: 5px; }
.sdbd-brand__title {
    font-size: 18px; font-weight: 700; letter-spacing: .3px;
    color: var(--sdbd-text); white-space: nowrap;
}
.sdbd-brand__title b { color: var(--sdbd-primary); }

.sdbd-nav { display: flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.sdbd-nav__link {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--sdbd-text-soft);
    border: 1px solid transparent;
    transition: all .18s ease;
}
.sdbd-nav__link:hover { color: var(--sdbd-text); background: var(--sdbd-panel-2); }
.sdbd-nav__link.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sdbd-primary), var(--sdbd-primary-2));
    box-shadow: 0 4px 14px rgba(37, 99, 235, .30);
}

.sdbd-topbar__spacer { flex: 1 1 auto; }
.sdbd-topbar__links { display: flex; gap: 14px; align-items: center; }
.sdbd-doclink {
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--sdbd-primary); white-space: nowrap;
}
.sdbd-doclink:hover { text-decoration: underline; }

/* ---------- 页面标题条 ---------- */
.sdbd-pagehead { margin: 22px 0 18px; }
.sdbd-pagehead__title { margin: 0; font-size: 22px; font-weight: 700; }
.sdbd-pagehead__sub { margin: 6px 0 0; font-size: 13px; color: var(--sdbd-text-mute); }

/* ---------- 布局栅格 ---------- */
.sdbd-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .sdbd-grid { grid-template-columns: 1fr; } }

/* ---------- 卡片 / 面板 ---------- */
.sdbd-card {
    background: linear-gradient(180deg, var(--sdbd-panel), var(--sdbd-bg-2));
    border: 1px solid var(--sdbd-border);
    border-radius: var(--sdbd-radius);
    box-shadow: var(--sdbd-shadow-soft);
    padding: 16px 18px 18px;
    margin-bottom: 18px;
}
.sdbd-card__title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; font-size: 14px; font-weight: 700;
    color: var(--sdbd-primary); letter-spacing: .4px; text-transform: uppercase;
}
.sdbd-card__title::before {
    content: ""; width: 4px; height: 15px; border-radius: 2px;
    background: linear-gradient(var(--sdbd-primary), var(--sdbd-accent));
}

/* ---------- 表单行 ---------- */
.sdbd-field { margin-bottom: 12px; }
.sdbd-field__label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--sdbd-text-soft); }
.sdbd-field__row { display: flex; align-items: center; gap: 8px; }

.sdbd-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13.5px;
    color: var(--sdbd-text);
    background: var(--sdbd-bg);
    border: 1px solid var(--sdbd-border);
    border-radius: var(--sdbd-radius-sm);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sdbd-input:focus { border-color: var(--sdbd-primary); box-shadow: var(--sdbd-glow); }
.sdbd-input[readonly], .sdbd-input:disabled { color: var(--sdbd-text-soft); background: var(--sdbd-panel); cursor: default; }
.sdbd-input.is-invalid { border-color: var(--sdbd-err); box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }

/* 两列表单（右侧 plasma / results 用） */
.sdbd-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 560px) { .sdbd-form2 { grid-template-columns: 1fr; } }

/* ---------- 单选（Sine/Pulse 等） ---------- */
.sdbd-radios { display: flex; gap: 8px; }
.sdbd-radio {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 10px; font-size: 13px; color: var(--sdbd-text-soft);
    background: var(--sdbd-bg); border: 1px solid var(--sdbd-border);
    border-radius: var(--sdbd-radius-sm); cursor: pointer; user-select: none;
    transition: all .15s ease;
}
.sdbd-radio input { accent-color: var(--sdbd-primary); }
.sdbd-radio.is-active { border-color: var(--sdbd-primary); color: var(--sdbd-text); background: var(--sdbd-panel-2); }

/* ---------- 按钮 ---------- */
.sdbd-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sdbd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; font-size: 13.5px; font-weight: 600;
    color: var(--sdbd-text); background: var(--sdbd-panel-2);
    border: 1px solid var(--sdbd-border); border-radius: var(--sdbd-radius-sm);
    cursor: pointer; user-select: none; transition: all .15s ease;
}
.sdbd-btn:hover { border-color: var(--sdbd-primary); color: var(--sdbd-primary); transform: translateY(-1px); }
.sdbd-btn:active { transform: translateY(0); }
.sdbd-btn--primary {
    color: #ffffff; border-color: transparent;
    background: linear-gradient(135deg, var(--sdbd-primary), var(--sdbd-primary-2));
    box-shadow: 0 4px 14px rgba(37, 99, 235, .28);
}
.sdbd-btn--primary:hover { color: #ffffff; filter: brightness(1.06); }
.sdbd-btn--ghost { background: transparent; }

/* ---------- 结果只读格 ---------- */
.sdbd-result { display: flex; flex-direction: column; gap: 4px; }
.sdbd-result__k { font-size: 12px; color: var(--sdbd-text-mute); }
.sdbd-result__v {
    font-size: 14px; font-weight: 600; color: var(--sdbd-text);
    padding: 8px 10px; background: var(--sdbd-bg);
    border: 1px solid var(--sdbd-border-soft); border-radius: var(--sdbd-radius-sm);
    font-variant-numeric: tabular-nums; word-break: break-all;
}

/* ---------- 徽章 ---------- */
.sdbd-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.sdbd-badge--ok { color: var(--sdbd-ok); background: rgba(52, 211, 153, .12); }
.sdbd-badge--warn { color: var(--sdbd-warn); background: rgba(251, 191, 36, .12); }
.sdbd-badge--err { color: var(--sdbd-err); background: rgba(248, 113, 113, .12); }

/* ---------- 图表容器 ---------- */
.sdbd-chart { width: 100%; height: 340px; }

/* ---------- 页脚 ---------- */
.sdbd-footer {
    margin-top: 30px; padding: 22px 24px;
    border-top: 1px solid var(--sdbd-border);
    color: var(--sdbd-text-mute); font-size: 12.5px; line-height: 1.7;
    text-align: center;
}
.sdbd-footer a { color: var(--sdbd-primary); text-decoration: none; }

/* ---------- 提示条 ---------- */
.sdbd-hint { font-size: 12.5px; color: var(--sdbd-text-mute); margin: 8px 0 0; }

/* ---------- 加载指示 ---------- */
.sdbd-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, .22); border-top-color: var(--sdbd-primary);
    animation: sdbd-spin .7s linear infinite; display: inline-block; vertical-align: -3px;
}
@keyframes sdbd-spin { to { transform: rotate(360deg); } }

/* ---------- 卡片标题里的小按钮 + 状态指示（多页共用） ---------- */
.sdbd-app .sdbd-card__title { align-items: center; }
.sdbd-app .sdbd-title-btn {
    margin-left: auto;
    padding: 5px 12px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sdbd-text-soft);
}
.sdbd-app .sdbd-status { margin-left: auto; font-size: 12px; font-weight: 600; }
.sdbd-app .sdbd-status.is-error { color: var(--sdbd-err); text-transform: none; letter-spacing: 0; }
.sdbd-app .sdbd-status.is-ok { color: var(--sdbd-ok); }

/* ============================================================
   三栏 Flanking 布局：左信息栏 / 中功能区 / 右释义栏（全站统一）
   ============================================================ */
/* 中间计算区优先占据宽度（1fr），左右信息/释义栏为固定宽度、填补两侧空白区域。
   计算区随屏幕增大而变宽，直至 layout3 max-width 上限，从而"充分利用页面空白"。 */
.sdbd-app .sdbd-layout3 {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 400px;
    gap: 26px;
    align-items: start;
    max-width: 2100px;
    margin: 0 auto;
}
.sdbd-app .sdbd-rail-left,
.sdbd-app .sdbd-rail-right { min-width: 0; }
@media (max-width: 1300px) {
    .sdbd-app .sdbd-layout3 { grid-template-columns: 1fr; max-width: 760px; }
    .sdbd-app .sdbd-glossary { position: static; max-height: none; }
}
.sdbd-app .sdbd-main { min-width: 0; }

/* ---------- 左信息栏：介绍文字 / 解释图片 / 引用文献 ---------- */
.sdbd-app .sdbd-info { display: flex; flex-direction: column; gap: 14px; }
.sdbd-app .sdbd-info__intro {
    font-size: 13.5px; line-height: 1.7; color: var(--sdbd-text-soft);
    text-align: justify;
}
.sdbd-app .sdbd-info__intro b { color: var(--sdbd-text); font-size: inherit; }
.sdbd-app .sdbd-info__intro--zh {
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--sdbd-border-soft);
}
.sdbd-app .sdbd-info__figs { display: flex; flex-direction: column; gap: 12px; }
.sdbd-app .sdbd-info__fig {
    width: 100%; border-radius: var(--sdbd-radius-sm);
    border: 1px solid var(--sdbd-border-soft); background: #fff; display: block;
}
.sdbd-app .sdbd-info__refs {
    font-size: 13.5px; line-height: 1.7; color: var(--sdbd-text-mute);
    border-top: 1px solid var(--sdbd-border-soft); padding-top: 10px;
    text-align: justify;
}
.sdbd-app .sdbd-info__refs p { margin: 0 0 6px; font-size: 13.5px; }

/* ---------- 右释义栏：带纵向滚动条 ---------- */
.sdbd-app .sdbd-glossary {
    position: sticky; top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}
.sdbd-app .sdbd-glossary::-webkit-scrollbar { width: 8px; }
.sdbd-app .sdbd-glossary::-webkit-scrollbar-thumb {
    background: var(--sdbd-border); border-radius: 8px;
}
.sdbd-app .sdbd-gloss-group {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--sdbd-primary); margin: 14px 0 6px;
}
.sdbd-app .sdbd-gloss-group:first-child { margin-top: 0; }
.sdbd-app .sdbd-gloss-item {
    font-size: 12px; line-height: 1.55; color: var(--sdbd-text-soft);
    margin: 0 0 8px; padding-left: 10px; border-left: 2px solid var(--sdbd-border);
    text-align: justify;
}
.sdbd-app .sdbd-gloss-item b { color: var(--sdbd-text); font-weight: 600; }

/* ---------- 小号帮助释义（Fast/Precise 等） ---------- */
.sdbd-app .sdbd-help {
    font-size: 11.5px; line-height: 1.5; color: var(--sdbd-text-mute); margin: 6px 0 0;
}

/* ============================================================
   中和线上共享 base.css 的全局兜底规则（仅在 .sdbd-app 作用域内生效）
   base.css: * { font-family:"微软雅黑"; font-size:14px } 会把所有文字改成微软雅黑；
             input { width:100%; height:38px; outline:...; border-radius:3px } 会把
             复选框/单选框拉成占满整行的蓝色大方框、文本框强制 38px 定高。
   本机预览不加载 base.css，故这些控件原本是浏览器原生小尺寸 + 主题字体。
   下列规则以更高优先级复原该外观，使线上与本机一致；不改 base.css，不影响其余页面。
   ============================================================ */
.sdbd-app * { font-family: var(--sdbd-font); }

.sdbd-app input[type="checkbox"],
.sdbd-app input[type="radio"] {
    width: auto;
    height: auto;
    outline: none;
    border-radius: 0;
    padding: 0;
    accent-color: var(--sdbd-primary);
}

.sdbd-app .sdbd-input { height: auto; }

/* ============================================================
   历史参数组合（Recent parameters）
   注意：生产 base.css 有 `* { font-size:14px }` 全局兜底，会直接命中
   后代元素，故字号必须落在真正承载文本的元素上（含 button 自身）。
   ============================================================ */
.sdbd-app .sdbd-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.sdbd-app .sdbd-history__label {
    font-size: 11.5px;
    color: var(--sdbd-text-mute);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.sdbd-app .sdbd-history__item {
    font-size: 11.5px;
    padding: 3px 8px;
    height: auto;
    line-height: 1.5;
    border-radius: var(--sdbd-radius-sm);
    white-space: nowrap;
}

.sdbd-app .sdbd-history__save {
    font-size: 11.5px;
    padding: 3px 8px;
    height: auto;
    line-height: 1.5;
    margin-left: 8px;
    font-weight: 400;
}

.sdbd-app .sdbd-history__clear {
    font-size: 11px;
    color: var(--sdbd-text-mute);
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    text-decoration: underline;
}

.sdbd-app .sdbd-history__clear:hover { color: var(--sdbd-err); }

/* ---------- 派生字段（sine 模式下频率/上升沿二者之一为只读） ---------- */
/* 字号一律落在承载文字的元素上，避免被 base.css 的 * { font-size:14px } 抢走 */

.sdbd-app .sdbd-input.is-derived {
    background: var(--sdbd-bg-mute, #f1f3f5);
    color: var(--sdbd-text-mute);
    cursor: not-allowed;
    font-style: italic;
}

.sdbd-app .sdbd-range.is-derived { opacity: .45; cursor: not-allowed; }

/* 锁标记 + 公式徽标，紧贴在字段标签右侧 */
.sdbd-app .sdbd-derived-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10.5px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--sdbd-accent, #1c7ed6);
    background: rgba(28, 126, 214, .10);
    border: 1px solid rgba(28, 126, 214, .28);
    border-radius: 9px;
    vertical-align: middle;
    white-space: nowrap;
}

/* 随模式变化的字段说明，压在输入框下方 */
.sdbd-app .sdbd-field-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--sdbd-text-mute);
}

.sdbd-app .sdbd-field-hint b { font-size: 11px; font-weight: 600; }