/* 960px 经典窄屏；固定紧凑 BOM。玻璃材质沿用用户提供的参数。 */
:root { --lcd-glow: 1; --font-pixel: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; --page-width: 960px; --row-height: 42px; --text: #263c48; --muted: #677b86; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font-pixel); font-size: 12px; line-height: 1.5; color: var(--text); font-variant-numeric: tabular-nums; background: radial-gradient(ellipse at 50% 0%, #fafcfd, #e5ebee 58%, #d9e1e6); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: #225c7a; }
:focus-visible { outline: 2px solid #1975ad; outline-offset: 2px; }
[hidden] { display: none !important; }
.app { width: min(var(--page-width), calc(100% - 24px)); margin: 24px auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -50px; left: 12px; z-index: 10; padding: 8px; background: white; }
.skip:focus { top: 8px; }
.glass-brand {
    position: relative;
    isolation: isolate;

    height: 90px;
    padding: 14px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    overflow: hidden;

    border-radius: 15px;

    border:
        1px solid rgba(120,205,238,0.72);

    background:

        /* 左侧折射 */
        radial-gradient(
            ellipse 7% 70% at 0% 43%,

            rgba(240,252,255,0.58),
            rgba(160,225,250,0.28) 25%,
            rgba(75,165,220,0.10) 50%,
            transparent 75%
        ),

        /* 右侧折射 */
        radial-gradient(
            ellipse 6% 68% at 100% 43%,

            rgba(225,248,255,0.38),
            rgba(135,210,245,0.19) 26%,
            rgba(65,150,210,0.07) 52%,
            transparent 75%
        ),

        /* 蓝色玻璃本体 */
        linear-gradient(
            to bottom,

            #376e9f 0%,
            #286092 13%,
            #195083 27%,
            #104172 43%,
            #0b3566 60%,
            #082a58 76%,
            #051f49 89%,
            #031734 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(245,253,255,0.88),
        inset 0 2px 0 rgba(110,200,235,0.35),
        inset 1px 0 0 rgba(165,225,248,0.30),
        inset -1px 0 1px rgba(0,20,42,0.40),
        inset 0 -2px 3px rgba(0,5,22,0.68),
        inset 0 0 8px rgba(0,12,30,0.32),

        0 6px 12px rgba(0,0,0,0.18);
}


/* =====================================================
   Glass Reflection · 文字上方的玻璃罩
   ===================================================== */

.glass-brand::before {
    content: "";

    position: absolute;

    left: 2%;
    top: 2%;

    width: 96%;
    height: 43%;

    border-radius:
        12px 12px 48% 48% /
        10px 10px 32% 32%;

    background:

        radial-gradient(
            ellipse at 12% 15%,

            rgba(255,255,255,0.20),
            rgba(205,240,255,0.09) 38%,
            transparent 66%
        ),

        radial-gradient(
            ellipse at 88% 12%,

            rgba(245,253,255,0.14),
            rgba(185,230,250,0.06) 38%,
            transparent 66%
        ),

        linear-gradient(
            to bottom,

            rgba(235,250,255,0.31),
            rgba(190,232,250,0.23) 28%,
            rgba(130,205,240,0.15) 55%,
            rgba(75,160,215,0.06) 78%,
            transparent
        );

    z-index: 3;
    pointer-events: none;
}


/* =====================================================
   PINS LCD Glow · 可复用文字材质

   --lcd-glow = 0.0  无光晕
   --lcd-glow = 0.8  默认
   --lcd-glow = 1.0  最大光晕
   ===================================================== */

.pins-lcd-glow {
    color: #e2f7ff;

    text-shadow:

        /* 暗色字形边缘 */
        0 1px 0 rgba(0,20,42,0.95),

        /* 锐利亮芯 */
        0 0 1px rgb(
            255 255 255 /
            calc(var(--lcd-glow) * 0.65)
        ),

        /* 近距离冰蓝光 */
        0 0 3px rgb(
            130 220 255 /
            calc(var(--lcd-glow) * 0.72)
        ),

        /* 远距离微弱光晕 */
        0 0 8px rgb(
            55 165 235 /
            calc(var(--lcd-glow) * 0.25)
        );
}


/* =====================================================
   Brand Typography
   24px = 12px 点阵的 2 倍尺寸
   ===================================================== */

.brand-name,
.brand-info {
    position: relative;
    z-index: 2;
}

.brand-name {
    font-family: var(--font-pixel);

    font-size: 24px;
    font-weight: 400;
    line-height: 28px;

    letter-spacing: 0;
}

.brand-name span {
    font-size: 24px;
    font-weight: 400;
}

.brand-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 4px;

    font-family: var(--font-pixel);

    font-size: 12px;
    line-height: 14px;
    font-weight: 400;

    letter-spacing: 0;
}



/* 品牌使用小写域名，保留顶部曲面反射与 LCD 字体材质。 */
.glass-brand { height: 90px; padding: 12px 22px; border-radius: 13px; align-items: flex-end; }
.brand-name { align-self: center; text-decoration: none; font-family: "Trebuchet MS", sans-serif; font-size: 32px; font-weight: 400; letter-spacing: .3px; }
.brand-name span { font-size: 26px; font-weight: inherit; }
.brand-info { color: #bdd8ed; gap: 5px; }
.brand-info strong { font-weight: 500; font-size: 13px; letter-spacing: 2px; }
.brand-info > span { font-size: 10px; letter-spacing: .5px; }
.utility-bar { height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; color: #617582; font-size: 10px; }
.indicator { display: inline-block; width: 6px; height: 6px; background: #77a8bb; border: 1px solid #57849c; border-radius: 50%; box-shadow: inset 0 1px 1px #effbff; margin-right: 6px; }
.draft-label { color: #697d88; }
.console { position: relative; z-index: 4; border: 1px solid #a5b6c0; border-radius: 5px; background: linear-gradient(#f6f9fa, #e0e9ee); box-shadow: inset 0 1px white, 0 2px 3px #34526912; }
.filter-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 220px 288px; align-items: center; gap: 18px; padding: 11px 13px; }
.search-panel { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 6px; width: 288px; max-width: 100%; }
.search-panel .field input { height: 32px; }
.search-submit { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border: 1px solid #356b89; border-radius: 3px; color: #fff; font-size: 12px; background: linear-gradient(#83bbd8, #3d83ab 42%, #245f83); box-shadow: inset 0 1px #ffffffb3, 0 1px 1px #24445429; cursor: pointer; }
.search-submit:hover { background: linear-gradient(#9bcee6, #4d94ba 42%, #2e7297); }
.search-submit:active { box-shadow: inset 0 2px 3px #173b5566; }
.manufacturer-picker { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; }
.manufacturer-menu { position: relative; min-width: 0; }
.manufacturer-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 32px; padding: 0 9px; border: 1px solid #92a5af; border-radius: 3px 0 0 3px; color: #273c47; text-align: left; background: linear-gradient(#fff, #edf3f6); box-shadow: inset 0 1px #fff; }
.manufacturer-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manufacturer-trigger svg { flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: #638092; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.manufacturer-trigger[aria-expanded="true"] { border-color: #5686a2; background: #f6fbfe; }
.manufacturer-options { position: absolute; top: 100%; left: 0; z-index: 10; width: max(100%, 190px); max-height: min(280px, 50vh); overflow-y: auto; padding: 4px; border: 1px solid #96afbd; border-radius: 0 3px 4px 4px; background: #f7fafc; box-shadow: 0 5px 12px #203f5529, inset 0 1px #fff; }
.manufacturer-option { display: block; width: 100%; min-height: 28px; padding: 4px 9px; border: 0; border-radius: 2px; text-align: left; font-size: 12px; color: #395769; background: transparent; }
.manufacturer-option[aria-selected="true"] { color: #185e87; background: #dfedf5; }
.manufacturer-option:hover, .manufacturer-option:focus-visible { color: #164c6b; background: #d0e5f1; outline: none; }
.manufacturer-picker .ui-btn { display: flex; align-items: center; justify-content: center; height: 32px; border: 1px solid #92a5af; border-left: 0; border-radius: 0 3px 3px 0; box-shadow: inset 0 1px #fff; text-decoration: none; }

.field { display: flex; min-width: 0; }
.field input, .field select { width: 100%; min-width: 0; height: 28px; padding: 0 7px; color: #273c47; border: 1px solid #92a5af; border-radius: 3px; background: linear-gradient(#f5f8fa, #fff 45%); box-shadow: inset 0 1px 3px #193e541b, 0 1px #fff; }
.field input::placeholder { color: #81919a; }
.ui-btn { height: 28px; padding: 0 9px; border: 1px solid #738994; border-radius: 4px; color: #293e49; white-space: nowrap; background: linear-gradient(#fff, #eaf1f4 38%, #b9cbd3); box-shadow: inset 0 1px white, inset 0 -1px #28414e2b, 0 1px 1px #0000001f; }
.ui-btn:hover { background: linear-gradient(#fff, #dceef6 55%, #a5c7d7); }
.ui-btn:active { box-shadow: inset 0 2px 3px #00000040; }
.ui-btn.primary { color: white; border-color: #15547d; background: linear-gradient(#8acbea, #358fc2 38%, #07517e); }
.ui-btn.small { height: 23px; padding: 0 8px; font-size: 11px; }
.ui-btn:disabled { cursor: default; opacity: .42; background: linear-gradient(#fff, #eaf1f4 38%, #b9cbd3); }
.list-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 41px; margin-top: 4px; }
.list-title, .list-tools { display: flex; align-items: center; gap: 10px; }
h1 { font-size: 12px; font-weight: 600; margin: 0; color: #2a4c61; }
.separator { width: 1px; height: 12px; background: #a8b6be; }
#result-count { font-size: 11px; color: #647985; }
.table-shell { overflow-x: auto; border: 1px solid #8298a4; border-radius: 4px; background: #fff; box-shadow: 0 1px #ffffffb3, 0 3px 6px #1428371a; }
.bom { width: 100%; min-width: 936px; border-collapse: collapse; table-layout: fixed; font-size: 11px; line-height: 16px; }
.col-no { width: 38px; } .col-maker { width: 86px; } .col-part { width: 174px; } .col-revision { width: 44px; } .col-resource { width: 65px; } .col-download { width: 58px; }
.bom thead th { position: relative; height: 29px; padding: 0 8px; text-align: left; font-size: 11px; font-weight: 500; white-space: nowrap; color: #253c49; background: linear-gradient(#f9fbfc, #e8eff2 28%, #c7d5dc); border-right: 1px solid #a9bbc5; border-bottom: 2px solid #718a97; box-shadow: inset 0 1px white; }
.bom tbody td { height: var(--row-height); padding: 3px 8px; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #2b3e48; background: #fff; border-bottom: 1px solid #d8e0e4; border-right: 1px solid #edf1f3; }
.bom tbody tr:nth-child(even) td { background: #f3f7f9; }
.bom tbody tr:hover td, .bom tbody tr:focus-within td { background: #e4f0f7; }
.bom tr > :last-child { border-right: 0; }
.bom tbody tr:last-child td { border-bottom: 0; }
.bom tbody .number { text-align: center; font-size: 11px; }
.bom .part, .bom .version { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 10px; }
/* 以更清晰的深色等宽字常驻强调料号，不加粗、不改变隔行底色。 */
.bom .part { color: #183d52; font-size: 12px; font-weight: 400; letter-spacing: .1px; }
.bom .version { color: #6d808c; }
.bom .description { white-space: normal; line-height: 16px; color: #536872; }
/* 描述不裁剪必要条件；短描述自然单行，较长条目允许换行。 */
.description-text { overflow-wrap: anywhere; }
.bom .center { text-align: center; }
.bom td.image-cell { padding: 2px 4px; }
/* 直接显示缩略图，去掉卡片框与内边距；白色图片背景融入隔行底色。 */
.thumbnail { display: flex; align-items: center; justify-content: center; width: 56px; height: 36px; padding: 0; margin: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: zoom-in; }
.thumbnail img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.thumbnail:hover img { filter: contrast(1.08); }
.zip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 4px; border: 1px solid #24628a; border-radius: 3px; color: white; font-size: 10px; text-decoration: none; background: linear-gradient(#68b6e0, #17638f); box-shadow: inset 0 1px #ffffff73; }
.zip:hover { background: linear-gradient(#86cbea, #287db0); }
.statusbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 2px; min-height: 39px; color: #788891; font-size: 10px; }
.pagination { display: flex; align-items: center; gap: 7px; }
.page-number { display: grid; place-items: center; min-width: 40px; height: 24px; line-height: 1; text-align: center; font-size: 11px; }
.pagination .ui-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; line-height: 1; }
.pagination .ui-btn svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pagination label { display: flex; align-items: center; }
.pagination select { border: 1px solid #afc0ca; border-radius: 3px; color: #506d7c; font-size: 10px; height: 24px; margin-left: 5px; background: linear-gradient(#f9fcfd,#e3ebef); }
.site-footer { border-top: 1px solid #becbd3; box-shadow: inset 0 1px #ffffff90; padding: 17px 8px 3px; margin-top: 10px; text-align: center; color: #607682; font-size: 11px; }
.site-footer > div { display: flex; justify-content: center; align-items: center; gap: 13px; }
.site-footer strong { font-weight: 500; }
.footer-divider { height: 11px; width: 1px; background: #aebfc9; }
.site-footer a { color: #516d7c; text-decoration: none; }
.site-footer a:hover { color: #175c89; text-decoration: underline; text-underline-offset: 3px; }
.external { margin-left: 5px; }
.site-footer p { margin: 7px 0 0; color: #7c8f9b; font-size: 10px; letter-spacing: .2px; }
.site-footer p span { margin: 0 7px; }
#empty { padding: 32px 15px; text-align: center; color: #6b808d; }
#empty strong { color: #36596f; font-size: 13px; }
#empty p { margin: 8px 0 15px; }
dialog { width: min(800px, calc(100vw - 24px)); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid #8daaba; border-radius: 9px; background: #edf3f6; color: #27495e; box-shadow: 0 16px 70px #08233665, inset 0 1px white; }
dialog::backdrop { background: #0b223e85; backdrop-filter: blur(4px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: linear-gradient(#fff,#d5e4ed); border-bottom: 1px solid #aec4d1; }
.dialog-header h2 { font-family: ui-monospace, monospace; font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.dialog-header p { font-size: 11px; margin: 3px 0 0; color: #688291; }
.preview-tabs { display: flex; justify-content: flex-end; gap: 6px; padding: 9px 16px; }
.preview-tabs [aria-pressed="true"] { background: linear-gradient(#568db2,#215e86); color: white; border-color: #245b7e; }
.preview-stage { display: flex; justify-content: center; align-items: center; height: min(58dvh, 530px); background: #fff; margin: 0 14px; border: 1px solid #c4d4de; }
.preview-stage img { width: 100%; height: 100%; object-fit: contain; }
.dialog-footer { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; font-size: 10px; color: #6a808e; }
.dialog-footer a { white-space: nowrap; }
.noscript { text-align: center; }
@media (max-width: 600px) {
  .app { margin: 14px auto; }
  .search-panel { grid-template-columns: minmax(0,1fr) 58px; }
  .brand-name { font-size: 28px; } .brand-name span { font-size: 24px; }
  .glass-brand { padding: 12px 17px; }
  .brand-info strong { font-size: 12px; letter-spacing: 1px; }
  .brand-info > span { font-size: 8px; letter-spacing: 0; }
  .statusbar { flex-wrap: wrap; }
  .pagination { margin-left: auto; }
  .site-footer > div { gap: 9px; font-size: 10px; }
}

/* Excel式列宽手柄：只改变表格内部宽度，页面仍保持960px窄屏。 */
.bom.resized { min-width: 0; }
.column-resizer { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; user-select: none; }
th:last-child .column-resizer { right: 0; }
.column-resizer::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 2px; background: transparent; }
.column-resizer:hover::after, .column-resizer:focus-visible::after, .column-resizer.active::after { background: #2780ac; }
.column-resizer:focus-visible { outline-offset: -2px; }
body.resizing-columns, body.resizing-columns * { cursor: col-resize !important; user-select: none !important; }

/* 单行工具栏：左侧席位，中间悬停厂商菜单，右侧搜索；席位增多时自然换行。 */
/* 推广席位只显示文字链接，不使用边框、底色、阴影或按钮选中态。 */
.brand-showcase { min-width: 0; }
.manufacturer-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-width: 0; }
.maker-card { display: flex; align-items: center; min-width: 0; height: 30px; }
.maker-entry { display: flex; align-items: center; gap: 5px; min-width: 0; height: 30px; padding: 0 3px; color: #2c6484; text-decoration: underline; text-decoration-color: #9bb5c5; text-underline-offset: 3px; }
.maker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: .2px; }
.promotion-label { flex: 0 0 auto; color: #857e70; font-size: 9px; line-height: 14px; }
.maker-entry:hover { color: #155b83; text-decoration-color: currentColor; }
.maker-entry[aria-current="page"] { color: #173e56; text-decoration-color: currentColor; }
.maker-entry:focus-visible { outline: 2px solid #237ba8; outline-offset: -2px; }
@media (max-width: 860px) {
  .filter-toolbar { grid-template-columns: 220px minmax(0, 1fr); gap: 8px 20px; }
  .brand-showcase { grid-column: 1 / -1; padding: 0; border: 0; }
  .search-panel { width: 100%; }
}
@media (max-width: 520px) {
  .filter-toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  .manufacturer-picker, .search-panel { width: 100%; }
}

/* 正式页面：原生链接、指南与无脚本回退。 */
.utility-bar nav { display:flex;align-items:center;gap:14px; } .utility-bar a { color:#587585;text-decoration:none; } .utility-bar a:hover {text-decoration:underline;}
.manufacturer-trigger {list-style:none;cursor:pointer;} .manufacturer-trigger::-webkit-details-marker{display:none;}
.manufacturer-options a {text-decoration:none;} .manufacturer-menu:not([open]) .manufacturer-options{display:none;}
.thumbnail {text-decoration:none;} .missing-image {display:block;text-align:center;color:#91a0aa;}
.pagination a {text-decoration:none;} .pagination .page-number {min-width:55px;}
.guide {padding:18px 22px;border:1px solid #b4c6d1;border-radius:5px;background:#f8fbfd;line-height:1.8;}
.guide h1{font-size:22px;} .guide h2{font-size:15px;color:#2c5771;margin-top:24px;}
.guide .eyebrow {font-size:11px;color:#778f9d;} .guide-title p{margin:5px 0;}
.guide section {margin:18px 0;} .guide table{border-collapse:collapse;width:100%;}
.guide td,.guide th{border:1px solid #c7d6df;padding:7px 10px;text-align:left;}
.guide pre{overflow:auto;padding:12px;background:#eaf1f5;border:1px solid #c7d6df;border-radius:3px;}
.guide input{min-width:0;width:min(440px,100%);padding:7px;border:1px solid #9cb2c0;}
.guide button,.guide .action-link{padding:6px 10px;border:1px solid #8daaba;border-radius:3px;background:linear-gradient(#fff,#d9e6ee);color:#29526b;}
.guide .endpoint-row,.guide .manual-links{display:flex;flex-wrap:wrap;gap:8px;}
.guide .note,.guide .manual-footer{color:#647d8b;font-size:11px;}
@media(max-width:600px){.utility-bar nav{gap:8px;font-size:9px;}.guide{padding:14px;} .guide table{font-size:11px;}}