* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
font-size: 13px;
color: #1f2328;
background: #f6f7f9;
line-height: 1.6;
}
button, input, select, textarea { font-family: inherit; font-size: 13px; }
/* 顶栏 */
.topbar {
background: #fff;
border-bottom: 1px solid #e5e7eb;
padding: 0 24px;
display: flex;
align-items: center;
gap: 16px;
height: 52px;
position: sticky; top: 0; z-index: 50;
}
.brand { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.brand span { color: #6b7280; font-weight: 400; margin-left: 8px; font-size: 12px; }
.env {
margin-left: auto; font-size: 12px; color: #6b7280;
display: flex; align-items: center; gap: 6px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: #1a7f37; display: inline-block; }
/* 标签页：跟着顶栏一起冻结（顶栏 52px + 本栏），页面往下滚时不再被吃掉 */
.tabs {
display: flex; gap: 4px; padding: 12px 24px 0;
position: sticky; top: 52px; z-index: 45;
background: #f6f7f9;
box-shadow: 0 8px 10px -10px rgba(15, 23, 42, .35);
}
.tab {
border: none; background: transparent; padding: 8px 14px; border-radius: 8px 8px 0 0;
color: #57606a; cursor: pointer; font-size: 13px;
}
.tab:hover { background: #eef0f3; }
.tab.active { background: #fff; color: #185fa5; font-weight: 500; box-shadow: 0 -1px 0 #e5e7eb inset; }
.wrap { padding: 0 24px 32px; }
.panel { display: none; }
.panel.active { display: block; }
.card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
padding: 16px; margin-bottom: 14px;
}
.card h3 {
margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #1f2328;
display: flex; align-items: center; gap: 8px;
}
.card h3 .sub { font-weight: 400; color: #8b949e; font-size: 12px; }
/* 工具条 */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
input[type=text], input[type=date], select, textarea {
border: 1px solid #d0d7de; border-radius: 6px; padding: 6px 9px;
background: #fff; color: #1f2328; outline: none; width: 100%;
}
input[type=text]:focus, input[type=date]:focus, select:focus, textarea:focus {
border-color: #185fa5; box-shadow: 0 0 0 3px rgba(24,95,165,.12);
}
input::placeholder { color: #9aa4af; }
textarea { resize: vertical; min-height: 56px; }
.btn {
border: 1px solid #d0d7de; background: #fff; color: #1f2328;
padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #f3f4f6; }
.btn.primary { background: #185fa5; border-color: #185fa5; color: #fff; }
.btn.primary:hover { background: #14508c; }
.btn.danger { color: #cf222e; border-color: #f0c6c9; }
.btn.danger:hover { background: #fff5f5; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.on { background: #185fa5; border-color: #185fa5; color: #fff; }
/* 表格 */
.tablewrap { overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eef0f3; white-space: nowrap; }
th {
background: #fafbfc; font-weight: 500; color: #57606a; font-size: 12px;
position: sticky; top: 0; z-index: 1;
}
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: none; }
td.clip { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.muted { color: #8b949e; }
.empty { text-align: center; color: #8b949e; padding: 28px 0; }
.tag {
display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
background: #eef2f7; color: #3d5a80; border: 1px solid #dbe4ef;
}
.tag.green { background: #e8f5ec; color: #1a7f37; border-color: #c6e6d0; }
.tag.amber { background: #fff8e6; color: #9a6700; border-color: #f0e0b8; }
.tag.red { background: #fff0f0; color: #cf222e; border-color: #f5cdd0; }
/* 分页 */
.pager { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.pager .info { color: #6b7280; font-size: 12px; }
/* 表单栅格 */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.field label { display: block; font-size: 12px; color: #57606a; margin-bottom: 4px; }
.field.full { grid-column: 1 / -1; }
/* 只读值：由别的页签自动带出，这里只展示不给改（如台账「局端设备端口」） */
.ro-val {
min-height: 34px; display: flex; align-items: center;
padding: 0 10px; border-radius: 6px; border: 1px dashed #d0d7de;
background: #f6f8fa; color: #57606a; font-size: 12px;
font-family: ui-monospace, Consolas, monospace; line-height: 1.4;
}
.ro-val.none { font-family: inherit; color: #8b949e; }
.req::after { content: " *"; color: #cf222e; }
/* 弹窗 */
.mask {
position: fixed; inset: 0; background: rgba(15,23,42,.38);
display: none; align-items: flex-start; justify-content: center; z-index: 100;
padding: 40px 16px; overflow: auto;
}
.mask.show { display: flex; }
.modal {
background: #fff; border-radius: 12px; width: min(880px, 100%);
box-shadow: 0 12px 40px rgba(15,23,42,.18);
}
.modal header {
padding: 14px 18px; border-bottom: 1px solid #eef0f3;
display: flex; align-items: center; font-weight: 600;
}
.modal header .x { margin-left: auto; cursor: pointer; color: #8b949e; font-size: 18px; line-height: 1; }
.modal .body { padding: 18px; }
.modal footer {
padding: 12px 18px; border-top: 1px solid #eef0f3;
display: flex; gap: 8px; justify-content: flex-end;
}
/* 提示条 */
#toast {
position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
background: #1f2328; color: #fff; padding: 9px 16px; border-radius: 8px;
font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
z-index: 200; max-width: 70vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(4px); }
#toast.err { background: #a40e26; }
#toast.ok { background: #1a7f37; }
/* 光路页布局 */
.split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .split { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pick { display: flex; gap: 6px; align-items: center; }
.pick select { flex: 1; }
.seg-list { font-size: 12px; }
.seg-row {
display: flex; align-items: center; gap: 8px; padding: 6px 0;
border-bottom: 1px dashed #eef0f3;
}
.seg-row:last-child { border-bottom: none; }
.seg-no {
width: 22px; height: 22px; border-radius: 5px; background: #eef2f7;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #3d5a80; flex: none;
}
.seg-body { min-width: 0; }
.seg-body .a { color: #185fa5; }
.seg-body .z { color: #0f6e56; }
.seg-arrow { color: #b4b2a9; margin: 0 4px; }
/* 段的 A / Z 两端：能定位到芯位的做成可点（点了跳纤芯看板），
设备端口 / 用户端 / 分光器插片式没有纤芯格，灰掉不可点 */
.seg-end {
font: inherit; background: none; border: 0; padding: 0; margin: 0;
cursor: pointer; text-align: left; color: #185fa5;
border-bottom: 1px dashed rgba(24, 95, 165, .5);
}
.seg-end.z { color: #0f6e56; border-bottom-color: rgba(15, 110, 86, .5); }
.seg-end:hover { color: #0b4a86; border-bottom-color: #0b4a86; border-bottom-style: solid; }
.seg-end.z:hover { color: #0a5743; border-bottom-color: #0a5743; }
.seg-end:focus-visible { outline: 2px solid #185fa5; outline-offset: 2px; border-radius: 2px; }
.seg-end.off { color: #6b7480; cursor: default; border-bottom: 0; }
.seg-end.off:hover { color: #6b7480; }
/* 段名称 */
.seg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.seg-head .btn { padding: 0 7px; font-size: 11px; line-height: 17px; }
.seg-name {
font-size: 12.5px; font-weight: 600; color: #1f2328;
max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seg-name.none { font-weight: 400; color: #b0b8c1; font-style: italic; }
.hint { font-size: 12px; color: #8b949e; margin-top: 6px; }
.hidden { display: none !important; }
/* 端口矩阵 */
.port-grid { display: grid; grid-template-columns: repeat(13, minmax(0,1fr)); gap: 6px; }
@media (max-width: 720px) { .port-grid { grid-template-columns: repeat(7, minmax(0,1fr)); } }
.port {
height: 38px; border-radius: 6px; border: 1px solid #e5e7eb; background: #f6f7f9;
color: #57606a; display: flex; align-items: center; justify-content: center;
font-size: 12px; cursor: pointer; user-select: none; font-family: ui-monospace, Consolas, monospace;
}
.port:hover { border-color: #185fa5; }
.port.sel { outline: 2px solid #185fa5; outline-offset: 1px; }
.port.used { background: #e6f1fb; border-color: #b5d4f4; color: #0c447c; }
.port.reserved { background: #faeeda; border-color: #f0e0b8; color: #854f0b; }
.port.fault { background: #fcebeb; border-color: #f5cdd0; color: #a32d2d; }
.port.off { background: #d3d1c7; border-color: #b4b2a9; color: #5f5e5a; }
.port-edit { display: none; border-top: 1px solid #eef0f3; padding-top: 14px; margin-top: 14px; }
.port-edit.show { display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 1px solid #e5e7eb; }
/* ==========================================================================
账号 / 角色
========================================================================== */
.userbar { display: flex; align-items: center; gap: 8px; margin-left: 18px; padding-left: 16px; border-left: 1px solid #e5e7eb; }
.userbar .btn { text-decoration: none; display: inline-flex; align-items: center; }
.who { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.who .uname { font-weight: 500; color: #1f2328; }
.urole {
font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid;
white-space: nowrap;
}
.urole.r-admin { background: #eef4fc; color: #185fa5; border-color: #cfe0f5; }
.urole.r-editor { background: #e9f6ee; color: #1a7f37; border-color: #c6e6d0; }
.urole.r-viewer { background: #f3f4f6; color: #57606a; border-color: #e0e3e7; }
/* 按角色隐藏：后端仍会强制校验 */
body[data-role="viewer"] .need-edit,
body[data-role="viewer"] .need-admin,
body[data-role="editor"] .need-admin { display: none !important; }
.pwd-inline { display: flex; gap: 6px; }
.pwd-inline input { flex: 1; }
/* ==========================================================================
登录页
========================================================================== */
.login-body {
min-height: 100vh; margin: 0; background: #eef1f5;
display: flex; align-items: center; justify-content: center; padding: 28px 16px;
}
.login-shell {
width: min(920px, 100%); background: #fff; border-radius: 16px; overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 18px 60px rgba(15, 23, 42, .16);
min-height: 540px;
}
.login-side {
background: linear-gradient(160deg, #12365c 0%, #185fa5 58%, #1f74b8 100%);
color: #eaf2fa; padding: 34px 32px; display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
.login-side::after {
content: ""; position: absolute; right: -90px; bottom: -90px;
width: 260px; height: 260px; border-radius: 50%;
background: rgba(255, 255, 255, .06);
}
.login-side::before {
content: ""; position: absolute; right: -30px; top: -70px;
width: 170px; height: 170px; border-radius: 50%;
background: rgba(255, 255, 255, .05);
}
.login-logo { display: flex; align-items: center; gap: 12px; }
.login-logo .t { font-size: 17px; font-weight: 600; letter-spacing: .5px; }
.login-logo .s { font-size: 12px; color: #b9d4ec; margin-top: 2px; }
.login-points { list-style: none; padding: 0; margin: 34px 0 0; font-size: 12.5px; line-height: 1.5; }
.login-points li {
position: relative; padding: 9px 0 9px 16px; color: #cfe2f3;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.login-points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.login-points li::before {
content: ""; position: absolute; left: 0; top: 15px; width: 5px; height: 5px;
border-radius: 50%; background: #8fc0e8;
}
.login-points b { color: #fff; font-weight: 500; }
.login-foot { margin-top: auto; font-size: 11.5px; color: #9dbfdc; letter-spacing: .4px; }
.login-main { padding: 44px 44px 30px; display: flex; flex-direction: column; }
.login-main h1 { font-size: 20px; margin: 0 0 6px; color: #1f2328; font-weight: 600; }
.login-sub { color: #6b7280; font-size: 12.5px; margin: 0 0 24px; }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; font-size: 12.5px; color: #57606a; margin-bottom: 6px; }
.login-field input {
width: 100%; border: 1px solid #d0d7de; border-radius: 8px; padding: 10px 12px;
font-size: 13.5px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus { border-color: #185fa5; box-shadow: 0 0 0 3px rgba(24, 95, 165, .12); }
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 40px; }
.pwd-eye {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
border: none; background: transparent; color: #8b949e; cursor: pointer;
padding: 6px; border-radius: 6px; line-height: 0;
}
.pwd-eye:hover { background: #f3f4f6; color: #57606a; }
.pwd-eye.on { color: #185fa5; }
.login-btn {
width: 100%; margin-top: 8px; border: none; border-radius: 8px; cursor: pointer;
background: #185fa5; color: #fff; padding: 11px 0; font-size: 14px; letter-spacing: 2px;
transition: background .15s;
}
.login-btn:hover { background: #14508c; }
.login-btn:active { transform: translateY(1px); }
.login-err {
display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
background: #fff5f5; border: 1px solid #f5cdd0; color: #a40e26;
border-radius: 8px; padding: 9px 12px; margin-bottom: 16px; line-height: 1.45;
}
.login-err svg { flex: none; margin-top: 3px; }
.login-hint {
margin-top: 20px; font-size: 12px; color: #8b949e; line-height: 1.7;
background: #f8fafc; border: 1px dashed #e5e7eb; border-radius: 8px; padding: 9px 12px;
}
.login-hint code {
font-family: ui-monospace, Consolas, monospace; color: #185fa5;
background: #eef4fc; padding: 1px 5px; border-radius: 4px;
}
.login-copy { margin-top: auto; padding-top: 22px; font-size: 11.5px; color: #b0b8c1; text-align: center; }
@media (max-width: 760px) {
.login-shell { grid-template-columns: 1fr; min-height: 0; }
.login-side { padding: 24px 22px; }
.login-points, .login-foot { display: none; }
.login-main { padding: 28px 22px 22px; }
.userbar { margin-left: auto; padding-left: 0; border-left: none; }
.who .uname { display: none; }
.topbar { padding: 0 14px; gap: 8px; }
.tabs { padding: 10px 14px 0; overflow-x: auto; }
.wrap { padding: 0 14px 24px; }
}
/* ==========================================================================
纤芯看板（12 色色谱 + 占用状态）
色谱顺序按 TIA-598：蓝 橘 绿 棕 灰 白 红 黑 黄 紫 粉 青
========================================================================== */
.bd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bd-title { font-size: 15px; font-weight: 600; }
.bd-meta { font-size: 12px; color: #6b7280; }
.bd-badge {
font-size: 11.5px; padding: 1px 8px; border-radius: 999px;
background: #eef4fc; color: #185fa5; border: 1px solid #d7e6f8;
}
/* 统计条 */
.bd-stat { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.bd-num { display: flex; flex-direction: column; line-height: 1.3; }
.bd-num b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-num span { font-size: 11.5px; color: #8b949e; }
.bd-num.used b { color: #185fa5; }
.bd-num.free b { color: #1a7f37; }
.bd-bar { flex: 1; min-width: 160px; height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.bd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #185fa5, #3f8fd8); border-radius: 999px; }
.bd-rate { font-size: 12.5px; color: #57606a; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
/* 图例 */
.bd-legend {
display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
margin-top: 14px; padding-top: 12px; border-top: 1px dashed #eef0f3;
}
.bd-lg-group { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.bd-lg-cap { font-size: 11.5px; color: #8b949e; margin-right: 3px; }
.bd-lg-cell {
display: inline-flex; align-items: center; justify-content: center;
min-width: 26px; height: 18px; padding: 0 4px; border-radius: 3px;
font-size: 10.5px; border: 1px solid rgba(0,0,0,.12);
}
.bd-lg-free { background: #fff; border: 1px dashed #c8d1d9; color: #8b949e; }
.bd-lg-used { background: #185fa5; border-color: #185fa5; color: #fff; }
.bd-lg-rsv {
background: repeating-linear-gradient(45deg, #e3b341 0 4px, #f6e2a8 4px 8px);
border-color: #d4a72c; color: #4a3a00;
}
.bd-lg-bad {
background: #cf222e; border-color: #cf222e; color: #fff; position: relative;
}
/* 网格与分块 */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(318px, 1fr)); gap: 12px; }
.bd-block { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px 12px; background: #fcfcfd; }
.bd-block-hd {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
padding-bottom: 7px; border-bottom: 1px solid #eef0f3;
}
.bd-block-name { font-size: 12.5px; font-weight: 600; color: #1f2328; }
.bd-block-use { margin-left: auto; font-size: 11.5px; color: #8b949e; font-variant-numeric: tabular-nums; }
.bd-block-use.full { color: #cf222e; }
.bd-rows { max-height: 470px; overflow-y: auto; padding-right: 2px; }
.bd-rows::-webkit-scrollbar { width: 8px; }
.bd-rows::-webkit-scrollbar-thumb { background: #dfe3e8; border-radius: 8px; }
.bd-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.bd-row-no {
flex: none; width: 20px; text-align: right; font-size: 10.5px; color: #9aa4af;
font-variant-numeric: tabular-nums;
}
.bd-cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; flex: 1; }
/* 单个芯位：底色永远是该芯的色谱色（浅/深表示空闲/占用） */
.bd-cell {
position: relative; height: 21px; padding: 0; border-radius: 3px;
border: 1px dashed rgba(0,0,0,.14); background: var(--soft); color: var(--ink);
font-size: 10.5px; line-height: 1; cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: center;
transition: transform .08s ease, box-shadow .12s ease;
}
.bd-cell:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.16); z-index: 2; }
.bd-cell[data-s="1"] {
background: var(--c); color: var(--ink-on); border: 1px solid rgba(0,0,0,.28);
font-weight: 600;
}
.bd-cell[data-s="1"]::after {
content: ""; position: absolute; top: 2px; right: 2px;
width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.9);
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.bd-cell[data-s="2"] {
background: repeating-linear-gradient(45deg, var(--c) 0 4px, var(--soft) 4px 8px);
border: 1px solid rgba(0,0,0,.2); font-weight: 600;
}
.bd-cell[data-s="3"] {
background: var(--c); border: 1px solid #cf222e; color: var(--ink-on);
font-weight: 600; box-shadow: inset 0 0 0 1.5px #cf222e;
}
.bd-cell[data-s="3"]::before {
content: "\00d7"; position: absolute; right: 2px; top: 0; font-size: 9px;
color: #fff; text-shadow: 0 0 2px #cf222e;
}
.bd-cell.sel { outline: 2px solid #185fa5; outline-offset: 1px; }
/* 从光路录入点端跳过来时，目标格闪两下，避免眼睛找不到 */
@keyframes bdFlash {
0%, 100% { outline: 2px solid rgba(9, 105, 218, 0); outline-offset: 1px; }
40% { outline: 4px solid #0969da; outline-offset: 2px; }
}
.bd-cell.flash { animation: bdFlash 1.2s ease-in-out 2; z-index: 3; }
/* 筛选：只淡出，不隐藏，保留色谱位置感 */
#bdGrid[data-f="used"] .bd-cell[data-s="0"] { opacity: .1; }
#bdGrid[data-f="free"] .bd-cell[data-s="1"],
#bdGrid[data-f="free"] .bd-cell[data-s="2"],
#bdGrid[data-f="free"] .bd-cell[data-s="3"] { opacity: .12; }
/* 选中芯详情 */
.bd-detail { display: none; margin-bottom: 14px; border: 1px solid #d7e6f8; background: #f7fbff; border-radius: 10px; padding: 12px 14px; }
.bd-detail.show { display: block; }
.bd-detail-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bd-detail-hd .chip {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 4px; font-size: 11px; font-weight: 600;
border: 1px solid rgba(0,0,0,.18);
}
.bd-detail-hd b { font-size: 13px; }
.bd-detail-hd .x { margin-left: auto; }
.bd-detail-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 18px; font-size: 12.5px; }
.bd-kv { display: flex; gap: 6px; }
.bd-kv i { flex: none; width: 68px; color: #8b949e; font-style: normal; }
.bd-kv span { color: #1f2328; word-break: break-all; }
.bd-detail-empty { font-size: 12.5px; color: #6b7280; }
.bd-warn {
margin-bottom: 12px; font-size: 12.5px; color: #7a4d00; background: #fff8e6;
border: 1px solid #f3e0a8; border-radius: 8px; padding: 8px 12px;
}
.bd-empty { padding: 40px 0; text-align: center; color: #8b949e; font-size: 13px; }
/* 分光器占格：不是纤芯，用紫色斜纹区分，避免和 12 色谱混看 */
.bd-cell.bd-cell-sp {
background: repeating-linear-gradient(45deg, #8250df, #8250df 4px, #a371f7 4px, #a371f7 8px);
color: #fff; font-weight: 700; border-color: #6639ba;
}
#bdGrid[data-f="free"] .bd-cell.bd-cell-sp { opacity: .12; }
/* 共格：这一格是真纤芯（大芯 Z 端成端），同时又压着分光器输入口。
按纤芯画，左边一道紫条 + 右上角紫点提示「这里还有分光器」 */
.bd-cell.bd-cell-spmix { box-shadow: inset 3px 0 0 #8250df; }
.bd-cell.bd-cell-spmix::after {
content: ""; position: absolute; top: 1px; right: 1px;
width: 5px; height: 5px; border-radius: 50%;
background: #8250df; box-shadow: 0 0 0 1px rgba(255,255,255,.9);
}
.bd-mix-note {
margin-bottom: 8px; padding: 7px 10px; font-size: 12.5px; color: #4c2a85;
background: #f6f0ff; border: 1px solid #e3d9f7; border-left: 3px solid #8250df; border-radius: 6px;
}
.bd-sp-pos.mix { color: #6a3fb5; font-weight: 600; }
/* 箱内分光器小卡 */
.bd-splitters { margin-top: 12px; }
.bd-splitters:empty { display: none; }
.bd-sp-cap { font-size: 12px; color: #8b949e; margin-bottom: 6px; }
.bd-sp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.bd-sp { border: 1px solid #e3d9f7; background: #faf7ff; border-radius: 8px; padding: 8px 10px; }
.bd-sp-hd { display: flex; align-items: center; gap: 8px; }
.bd-sp-hd b { font-size: 12.5px; color: #1f2328; }
.bd-sp-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
.bd-sp-use { display: flex; gap: 10px; font-size: 12px; color: #8b949e; margin-top: 4px; }
.bd-sp-use .on { color: #1a7f37; font-weight: 600; }
.bd-sp-pos { font-size: 11.5px; color: #8b949e; margin-top: 4px; }
/* 全程光路 */
.bd-trace { margin-top: 14px; border-top: 1px dashed #d7e6f8; padding-top: 12px; }
.bd-trace-hd { font-size: 12.5px; font-weight: 600; color: #1f2328; margin-bottom: 8px; }
.bd-hops { list-style: none; margin: 10px 0 0; padding: 0; }
.bd-hops li {
position: relative; padding: 6px 0 6px 26px; font-size: 12.5px;
border-bottom: 1px solid #eef2f7;
}
.bd-hops li:last-child { border-bottom: none; }
.bd-hops .hop-no {
position: absolute; left: 0; top: 6px;
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
background: #dbe8ff; color: #1f6feb; font-size: 11px; font-weight: 700;
}
.bd-hops .hop-name { color: #6b7280; margin-left: 6px; }
.bd-hops .hop-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; color: #1f2328; }
.bd-hops .hop-line i { color: #8b949e; font-style: normal; }
.tag.sm { font-size: 11px; padding: 0 5px; }
.tag-fp { background: #eef6ff; color: #0969da; border-color: #c6ddf8; }
.tag-modf { background: #f3eeff; color: #6639ba; border-color: #ddd0f7; }
/* 双面 MODF 看板：按面分隔 */
.bd-face-sep {
grid-column: 1 / -1;
margin: 10px 0 2px;
padding: 5px 10px;
border-left: 3px solid #8250df;
background: #f6f2ff;
color: #6639ba;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
}
.bd-face-sep:first-child { margin-top: 0; }
.dim { color: #8b949e; }
.bd-lg-cell.bd-lg-sp {
background: repeating-linear-gradient(45deg, #8250df, #8250df 3px, #a371f7 3px, #a371f7 6px);
color: #fff; border-color: #6639ba;
}
@media (max-width: 760px) {
.bd-grid { grid-template-columns: 1fr; }
.bd-row-no { width: 16px; }
.bd-cells { gap: 2px; }
.bd-cell { height: 19px; font-size: 9.5px; }
}
/* ---------------- 导入导出 ---------------- */
#panel-io .split { align-items: start; }
#panel-io input[type="file"] {
width: 100%; padding: 6px 8px; font-size: 12px; color: #57606a;
background: #fff; border: 1px dashed #d0d7de; border-radius: 6px; cursor: pointer;
}
#panel-io input[type="file"]::file-selector-button {
margin-right: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer;
background: #f6f8fa; color: #24292f; border: 1px solid #d0d7de; border-radius: 5px;
}
#panel-io input[type="file"]::file-selector-button:hover { background: #eef1f4; }
tr.row-new td:first-child { border-left: 3px solid #1a7f37; }
tr.row-upd td:first-child { border-left: 3px solid #0969da; }
tr.row-err { background: #fff5f5; }
tr.row-err td { color: #b42318; }
tr.row-err td:first-child { border-left: 3px solid #cf222e; }
tr.row-warn { background: #fffbeb; }
tr.row-warn td { font-size: 12px; color: #7a5c00; }
#ioResultCard h3 .sub { font-weight: 400; }