/* ============================================================
   PlasmAbel UI —— 与 SDBDesigner / PHOTOPiC 一致的设计令牌与组件
   作用域：全部以 .pba-* 前缀或限定在 .pba-app 内，不污染其他应用样式。
   ============================================================ */

:root {
    --pba-bg: #ffffff;
    --pba-bg-2: #f5f7fa;
    --pba-panel: #ffffff;
    --pba-panel-2: #eef2f7;
    --pba-border: #dfe5ec;
    --pba-border-soft: #eaeef3;
    --pba-primary: #2563eb;
    --pba-primary-2: #3b82f6;
    --pba-accent: #1d4ed8;
    --pba-text: #1f2a37;
    --pba-text-soft: #475569;
    --pba-text-mute: #64748b;
    --pba-ok: #059669;
    --pba-warn: #d97706;
    --pba-err: #dc2626;

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

/* 共享 base.css 把 html,body 固定为 width:1280px;height:100% 居中，会把宽屏
   布局挤成窄栏并把页面裁到一屏。本文件仅在 PlasmAbel 页面加载且位于 base.css
   之后，故在此解除限制；不改 base.css，不影响其余共用该文件的页面。 */
html, body {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

.pba-app {
    min-height: 100vh;
    box-sizing: border-box;
    font-family: var(--pba-font);
    color: var(--pba-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(--pba-bg-2);
}
.pba-app *, .pba-app *::before, .pba-app *::after { box-sizing: border-box; }
.pba-app * { font-family: var(--pba-font); }

/* base.css 的 input{width:100%;height:38px;outline:...} 会把复选框拉成整行宽的
   大方框、文本框强制定高。在本作用域内复原正常外观。 */
.pba-app input[type="checkbox"],
.pba-app input[type="radio"] {
    width: auto; height: auto; outline: none; border-radius: 0;
    padding: 0; margin: 0; accent-color: var(--pba-primary);
}
.pba-app input[type="range"] {
    width: 100%; height: auto; padding: 0; outline: none;
    accent-color: var(--pba-primary);
}
.pba-app .pba-input { height: auto; }

.pba-container { max-width: none; margin: 0 auto; padding: 18px 28px 30px; }

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

.pba-nav { display: flex; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.pba-nav__link {
    display: inline-block; padding: 7px 15px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    color: var(--pba-text-soft); border: 1px solid transparent;
    transition: all .18s ease; cursor: pointer;
}
.pba-nav__link:hover { color: var(--pba-text); background: var(--pba-panel-2); }
.pba-nav__link.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--pba-primary), var(--pba-primary-2));
    box-shadow: 0 4px 14px rgba(37, 99, 235, .30);
}
.pba-topbar__spacer { flex: 1 1 auto; }
.pba-topbar__links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pba-doclink {
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--pba-primary); white-space: nowrap; cursor: pointer;
}
.pba-doclink:hover { text-decoration: underline; }

/* ---------- 页面标题 ---------- */
.pba-pagehead { margin: 16px 0 16px; }
.pba-pagehead__title { margin: 0; font-size: 21px; font-weight: 700; }
.pba-pagehead__sub { margin: 5px 0 0; font-size: 13px; color: var(--pba-text-mute); }

/* ---------- 三栏布局（与 SDBDesigner 一致，填满左右空白） ---------- */
.pba-layout3 {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
    max-width: 2100px;
    margin: 0 auto;
}
.pba-rail-left, .pba-rail-right, .pba-main { min-width: 0; }
@media (max-width: 1400px) {
    .pba-layout3 { grid-template-columns: 260px minmax(0, 1fr); }
    .pba-rail-right { grid-column: 1 / -1; }
    .pba-glossary { position: static; max-height: none; }
    .pba-gloss-cols { columns: 2; column-gap: 26px; }
}
@media (max-width: 1000px) {
    .pba-layout3 { grid-template-columns: 1fr; max-width: 820px; }
    .pba-gloss-cols { columns: 1; }
}

/* ---------- 卡片 ---------- */
.pba-card {
    background: linear-gradient(180deg, var(--pba-panel), var(--pba-bg-2));
    border: 1px solid var(--pba-border);
    border-radius: var(--pba-radius);
    box-shadow: var(--pba-shadow-soft);
    padding: 15px 17px 17px;
    margin-bottom: 16px;
}
.pba-card__title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 13px; font-size: 13.5px; font-weight: 700;
    color: var(--pba-primary); letter-spacing: .4px; text-transform: uppercase;
}
.pba-card__title::before {
    content: ""; width: 4px; height: 15px; border-radius: 2px;
    background: linear-gradient(var(--pba-primary), var(--pba-accent));
}
.pba-status { margin-left: auto; font-size: 12px; font-weight: 600;
              text-transform: none; letter-spacing: 0; color: var(--pba-text-mute); }
.pba-status.is-ok { color: var(--pba-ok); }
.pba-status.is-error { color: var(--pba-err); }

/* ---------- 左信息栏 ---------- */
.pba-info { display: flex; flex-direction: column; gap: 12px; }
.pba-info__intro {
    font-size: 13px; line-height: 1.7; color: var(--pba-text-soft);
    text-align: justify; margin: 0;
}
.pba-info__intro b { color: var(--pba-text); }
.pba-info__intro--zh {
    padding-bottom: 11px; margin-bottom: 0;
    border-bottom: 1px solid var(--pba-border-soft);
}
.pba-info__eq {
    font-family: "Cambria Math", Georgia, serif;
    font-size: 14px; text-align: center;
    background: #fff; border: 1px solid var(--pba-border-soft);
    border-radius: var(--pba-radius-sm); padding: 9px 8px;
}
.pba-info__refs {
    font-size: 12px; line-height: 1.65; color: var(--pba-text-mute);
    border-top: 1px solid var(--pba-border-soft); padding-top: 10px;
    text-align: justify;
}
.pba-info__refs p { margin: 0 0 6px; font-size: 12px; }

/* ---------- 右释义栏 ---------- */
.pba-glossary {
    position: sticky; top: 72px;
    max-height: calc(100vh - 94px);
    overflow-y: auto;
}
.pba-glossary::-webkit-scrollbar { width: 8px; }
.pba-glossary::-webkit-scrollbar-thumb {
    background: var(--pba-border); border-radius: 8px;
}
.pba-gloss-group {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--pba-primary); margin: 15px 0 6px;
    break-after: avoid;
}
.pba-gloss-group:first-child { margin-top: 0; }
.pba-gloss-item {
    font-size: 12px; line-height: 1.55; color: var(--pba-text-soft);
    margin: 0 0 9px; padding-left: 10px;
    border-left: 2px solid var(--pba-border);
    text-align: justify; break-inside: avoid;
}
.pba-gloss-item b { color: var(--pba-text); font-weight: 600; }
.pba-gloss-item.is-warn { border-left-color: var(--pba-warn); }

/* ---------- 表单 ---------- */
.pba-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pba-form3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
@media (max-width: 760px) {
    .pba-form2, .pba-form3 { grid-template-columns: 1fr; }
}
.pba-field { margin-bottom: 4px; }
.pba-field__label {
    display: block; margin-bottom: 5px;
    font-size: 12.5px; color: var(--pba-text-soft);
}
.pba-field__row { display: flex; align-items: center; gap: 8px; }
.pba-input {
    width: 100%; padding: 8px 10px; font-size: 13.5px;
    color: var(--pba-text); background: var(--pba-bg);
    border: 1px solid var(--pba-border); border-radius: var(--pba-radius-sm);
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.pba-input:focus { border-color: var(--pba-primary); box-shadow: var(--pba-glow); }
.pba-input--num { max-width: 86px; }
.pba-input--unit { max-width: 78px; }

.pba-check {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--pba-text-soft); cursor: pointer;
    padding: 3px 0;
}
.pba-help { font-size: 11.5px; line-height: 1.5; color: var(--pba-text-mute); margin: 5px 0 0; }
.pba-field.is-disabled { opacity: .5; }
.pba-field.is-disabled .pba-input,
.pba-field.is-disabled input[type="range"] { cursor: not-allowed; }
.pba-hint { font-size: 12.5px; color: var(--pba-text-mute); margin: 8px 0 0; }

.pba-more { margin: 10px 0 12px; }
.pba-more > summary {
    cursor: pointer; font-size: 12.5px; font-weight: 600;
    color: var(--pba-primary); outline: none; padding: 4px 0;
}
.pba-more__body { margin-top: 8px; }

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

/* ---------- 上传区 ---------- */
.pba-dropzone {
    border: 2px dashed #c9d6e0; border-radius: var(--pba-radius-sm);
    padding: 18px 14px; text-align: center; cursor: pointer;
    background: #fbfdfe; font-size: 13.5px; color: var(--pba-text-soft);
    transition: border-color .15s, background .15s;
}
.pba-dropzone:hover, .pba-dropzone.is-hover {
    border-color: var(--pba-primary); background: #f0f7fc;
}
.pba-dropzone b { color: var(--pba-text); }
.pba-dropzone__hint {
    display: block; margin-top: 4px; font-size: 12px; color: var(--pba-text-mute);
}

/* ---------- 示例条 ---------- */
.pba-samplebar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 11px; padding-top: 11px;
    border-top: 1px solid var(--pba-border-soft);
    font-size: 12.5px;
}
.pba-samplebar__label { color: var(--pba-text-mute); }
.pba-sample {
    border: 1px solid var(--pba-border); background: #fff;
    border-radius: 999px; padding: 4px 12px; font-size: 12px;
    color: var(--pba-text-soft); cursor: pointer; margin-right: 6px;
    transition: all .15s ease;
}
.pba-sample:hover { border-color: var(--pba-primary); color: var(--pba-primary); }
.pba-sample.is-active {
    border-color: var(--pba-primary); color: #fff;
    background: linear-gradient(135deg, var(--pba-primary), var(--pba-primary-2));
}

/* ---------- 图表 ---------- */
.pba-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .pba-charts { grid-template-columns: 1fr; } }
.pba-chart-label {
    font-size: 12px; color: var(--pba-text-mute); margin-bottom: 4px;
}
.pba-chart { width: 100%; height: 320px; }
.pba-chart--wide { height: 380px; }

/* ---------- 指标 ---------- */
.pba-metrics { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pba-metric {
    border: 1px solid var(--pba-border-soft); border-radius: var(--pba-radius-sm);
    padding: 7px 13px; min-width: 96px; background: #fff;
}
.pba-metric.is-warn { border-color: #e8c07a; background: #fffaf0; }
.pba-metric__v {
    display: block; font-size: 17px; font-weight: 700; color: var(--pba-text);
    font-variant-numeric: tabular-nums;
}
.pba-metric.is-warn .pba-metric__v { color: var(--pba-warn); }
.pba-metric__k { font-size: 11px; color: var(--pba-text-mute); }

/* ---------- 注意事项框 ---------- */
.pba-caveat {
    background: #fdfaf3; border: 1px solid #ecdcbd;
    border-radius: var(--pba-radius-sm); padding: 10px 13px;
    margin-top: 12px; font-size: 12.5px;
}
.pba-caveat__title { font-weight: 700; color: #8a5b1a; margin-bottom: 5px; }
.pba-caveat ul { margin: 0; padding-left: 18px; }
.pba-caveat li { margin-bottom: 4px; color: #6b5220; line-height: 1.55; }

/* ---------- 比较方法勾选 ---------- */
.pba-compare-picks {
    display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--pba-border-soft);
}
.pba-compare-picks .pba-check { font-size: 12px; }

/* ---------- 提示条 ---------- */
.pba-notice {
    position: relative; border-radius: var(--pba-radius-sm);
    padding: 9px 32px 9px 12px; margin-bottom: 8px;
    font-size: 13px; border-left: 3px solid; background: #fff;
}
.pba-notice--ok   { background: #eefaf5; border-color: var(--pba-ok);      color: #14584f; }
.pba-notice--info { background: #eef4fc; border-color: var(--pba-primary); color: #1c4272; }
.pba-notice--warn { background: #fef7ea; border-color: var(--pba-warn);    color: #6d4a06; }
.pba-notice--err  { background: #fdeeec; border-color: var(--pba-err);     color: #7d211a; }
.pba-notice__d { font-size: 12px; opacity: .88; margin-top: 3px; line-height: 1.55; }
.pba-notice__x {
    position: absolute; right: 7px; top: 5px; border: none; background: none;
    font-size: 17px; line-height: 1; cursor: pointer; color: inherit; opacity: .5;
}
.pba-notice__x:hover { opacity: 1; }

/* ---------- 弹窗 ---------- */
.pba-modal {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(12, 26, 38, .45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pba-modal__box {
    background: #fff; border-radius: var(--pba-radius);
    width: min(660px, 96vw); max-height: 88vh; overflow-y: auto;
    padding: 22px 26px 26px; position: relative;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.pba-modal__box h3 { margin: 0 30px 12px 0; font-size: 18px; color: var(--pba-text); }
.pba-modal__box p { font-size: 13.5px; line-height: 1.7; margin: 0 0 11px; color: var(--pba-text-soft); }
.pba-modal__box ul { font-size: 13.5px; line-height: 1.7; padding-left: 20px; margin: 0 0 11px; color: var(--pba-text-soft); }
.pba-modal__box code {
    background: var(--pba-panel-2); padding: 1px 5px;
    border-radius: 3px; font-size: 12.5px;
}
.pba-modal__x {
    position: absolute; right: 12px; top: 9px; border: none; background: none;
    font-size: 26px; line-height: 1; cursor: pointer; color: #8b99a4;
}
.pba-modal__x:hover { color: var(--pba-text); }
.pba-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.pba-table th, .pba-table td {
    border-bottom: 1px solid var(--pba-border-soft); padding: 6px 8px; text-align: left;
}
.pba-table th { color: var(--pba-text-mute); font-weight: 600; }
.pba-table td { font-variant-numeric: tabular-nums; }

/* ---------- 忙碌遮罩 ---------- */
.pba-busy {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(255, 255, 255, .7);
    display: flex; align-items: center; justify-content: center;
}
.pba-busy__box {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--pba-border);
    border-radius: var(--pba-radius); padding: 14px 22px;
    box-shadow: var(--pba-shadow-soft);
    font-size: 13.5px; color: var(--pba-text);
}
.pba-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, .22); border-top-color: var(--pba-primary);
    animation: pba-spin .7s linear infinite; display: inline-block;
}
@keyframes pba-spin { to { transform: rotate(360deg); } }

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

.pba-hidden { display: none !important; }

@media (max-width: 720px) {
    .pba-container { padding: 14px 14px 24px; }
    .pba-topbar { gap: 10px; padding: 9px 14px; }
    .pba-pagehead__title { font-size: 18px; }
    .pba-chart { height: 260px; }
}