/* LY物料查询器 — 样式
   规则（见 AGENTS.md）：全站等宽字体且 中文 = 2 × 英文 宽度；输入框 ≥16px；无横向滚动；触控区 ≥44px */

/* 更纱黑体 Sarasa Fixed SC 的裁剪版（tools/build_webfont.py 生成）：字母 500 / 汉字 1000，无连字。
   所有设备都用这一份，电脑和手机显示完全一致。不提供粗体文件——浏览器合成的粗体不改变字宽，对齐不受影响。 */
@font-face {
    font-family: "LY Mono";
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/LYMono-Regular.woff2") format("woff2");
}

:root {
    --font: "LY Mono", "Sarasa Fixed SC", "Sarasa Mono SC", "Noto Sans Mono CJK SC", "Source Han Mono SC",
            "NSimSun", "SimSun", monospace;
    --bg: #f7f5f2;
    --card: #ffffff;
    --ink: #2b2a28;
    --ink-2: #6f6b65;
    --ink-3: #a09b93;
    --line: #dcd8d1;
    --line-2: #c4bfb6;
    --accent: #2b2a28;      /* 强调 = 墨色（焦点框、链接悬停）。全站不用蓝色 */
    --accent-bg: #ebe7e0;   /* 暖灰：焦点光晕、标签底、拖拽悬停 */
    --ink-hover: #4d4945;
    --warn: #9a6400;
    --warn-bg: #fdf5df;
    --danger: #b93a2b;
    --danger-bg: #fcebe8;
    --ok: #2c7a52;
    --ok-bg: #e7f5ed;
    --radius: 8px;
    --tap: 40px;
    --page: 1080px;
    color-scheme: light dark;
}
@media (pointer: coarse) { :root { --tap: 44px; } }
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #191816; --card: #222120; --ink: #ece9e4; --ink-2: #a8a39b; --ink-3: #76716a;
        --line: #36342f; --line-2: #4a4741; --accent: #ece9e4; --accent-bg: #34322e; --ink-hover: #cfcbc4;
        --warn: #e0b252; --warn-bg: #3a3016; --danger: #ff8a7a; --danger-bg: #44211c; --ok: #6fcf9a; --ok-bg: #1c3528;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 16px/1.6 var(--font); overflow-wrap: anywhere;
    font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0;  /* 型号里的 -- -> 不能被合成连字 */
    font-synthesis: weight;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.label { font-size: 13px; letter-spacing: .08em; color: var(--ink-2); }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }

/* ---------- 按钮 / 表单 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--card); cursor: pointer; text-decoration: none; color: var(--ink); white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--ink-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--bg); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--line); border-color: transparent; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 14px; }
@media (pointer: coarse) { .btn-sm { min-height: 40px; } }
.btn-icon { width: var(--tap); padding: 0; }

.input, textarea.input, select.input {
    width: 100%; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--card); font-size: 16px; /* <16px 时 iOS 聚焦会放大页面 */
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
textarea.input { resize: vertical; line-height: 1.5; }
.field { display: grid; gap: 6px; }
.field > .hint { font-size: 13px; color: var(--ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; cursor: pointer;
    border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); user-select: none;
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-bg); }
.chip input:disabled + span { opacity: .45; cursor: default; }

.tag {
    display: inline-block; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px;
    font-size: 13px; line-height: 20px; color: var(--ink-2); white-space: nowrap;
}
.tag-warn { color: var(--warn); border-color: currentColor; background: var(--warn-bg); }
.tag-accent { color: var(--ink-2); border-color: transparent; background: var(--accent-bg); }
.tag-ok { color: var(--ok); border-color: currentColor; background: var(--ok-bg); }
.tag-danger { color: var(--danger); border-color: currentColor; background: var(--danger-bg); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card-pad { padding: 20px; }
.section-head {
    display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.notice { padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.notice-warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.notice-danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.notice-ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.empty { padding: 48px 16px; text-align: center; color: var(--ink-2); }

/* ---------- 登录 ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-box { width: 100%; max-width: 360px; padding: 32px 24px; }
.login-box h1 { font-size: 22px; margin-bottom: 4px; }
.login-box form { display: grid; gap: 12px; margin-top: 24px; }

/* ---------- 顶部 ---------- */
.topbar { border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; height: 52px; }
.brand { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.menu-wrap { position: relative; }
#quick-new { margin-right: 6px; }
.menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; padding: 6px;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.menu-user { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu a, .menu button {
    display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 0 12px; border: 0; border-radius: 6px;
    background: none; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--bg); }
.menu .danger { color: var(--danger); }

.searchbar { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.searchbar .wrap { display: flex; gap: 8px; align-items: flex-end; padding-top: 12px; padding-bottom: 12px; }
.search-box { position: relative; flex: 1; min-width: 0; }
.search-box textarea { display: block; padding-right: 44px; resize: none; max-height: 232px; overflow-y: auto; }
.search-clear {
    position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; border: 0; background: none;
    color: var(--ink-3); font-size: 20px; cursor: pointer; border-radius: 6px;
}
.search-clear:hover { color: var(--ink); }
.searchbar .btn { min-width: 76px; min-height: 44px; }
.searchbar #q-cam { min-width: 44px; width: 44px; cursor: pointer; }
.searchbar #q-cam.busy { opacity: .5; pointer-events: none; }

main.wrap.wide { max-width: 1680px; }
main.wrap { padding-top: 24px; padding-bottom: 72px; min-height: 60vh; }
.page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h2 { font-size: 20px; }

/* ---------- 首页：浏览 ---------- */
.filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.filter::-webkit-scrollbar { display: none; }
.filter .btn { flex: none; border-radius: 999px; }
.filter .btn.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 480px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.tile { display: block; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.tile .pic { aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--line); }
.tile .pic img { width: 100%; height: 100%; object-fit: contain; }
.tile .txt { padding: 10px 12px 12px; }
.tile .model { font-weight: 700; font-size: 15px; line-height: 1.35; }
.tile .desc { font-size: 13px; color: var(--ink-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-3); font-size: 13px; }

/* ---------- 候选 / 批量 ---------- */
.list { display: grid; }
.item {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 10px 12px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; cursor: pointer;
}
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--bg); }
.item .thumb { width: 64px; height: 64px; border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.item .model { font-weight: 700; }
.item .desc { font-size: 14px; color: var(--ink-2); }
/* 候选行：窄屏 = 缩略图 | 型号+匹配方式 / 说明 | PDF；宽屏 = 说明单独放中间一列 */
.item.cand { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb main pdf" "thumb desc pdf"; row-gap: 2px; }
.item.cand .thumb { grid-area: thumb; }
.item.cand .main { grid-area: main; }
.item.cand .desc { grid-area: desc; }
.item.cand .pdf { grid-area: pdf; }
.item.cand .main .tag { font-weight: 400; vertical-align: 2px; margin-left: 4px; color: var(--ink-3); border-color: var(--line); }
@media (min-width: 760px) {
    .item.cand { grid-template-columns: 64px minmax(0, 2fr) minmax(0, 3fr) auto; grid-template-areas: "thumb main desc pdf"; }
}
.pdf-btn { width: 40px; min-height: 40px; }
@media (pointer: coarse) { .pdf-btn { width: 44px; min-height: 44px; } }

.multi .item { grid-template-columns: 96px minmax(0, 2fr) minmax(0, 3fr) 12ch; border-left: 3px solid transparent; }
.multi .item > .pdf { justify-self: end; }
.multi .item .thumb { width: 96px; height: 96px; }
.multi .item .model { font-size: 17px; }
.multi .item.inexact { border-left-color: #e0a100; background: var(--warn-bg); }
.multi .item.nomatch { border-left-color: var(--danger); background: var(--danger-bg); cursor: default; }
.multi .head { display: grid; grid-template-columns: 96px minmax(0, 2fr) minmax(0, 3fr) 60px; gap: 12px; padding: 8px 12px 8px 15px; border-bottom: 1px solid var(--line); }
.multi .query { font-size: 13px; color: var(--ink-2); }
@media (max-width: 700px) {
    .multi .head { display: none; }
    .multi .item { grid-template-columns: 80px minmax(0, 1fr); }
    .multi .item .thumb { width: 80px; height: 80px; grid-row: span 3; }
    .multi .item .model { font-size: 16px; }
    .multi .item > .pdf { justify-self: start; }
}

/* ---------- 详情 ---------- */
.detail-top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .detail-top { grid-template-columns: 1fr; gap: 16px; } }
/* 图片规定：一律正方形；不是正方形的，补白底后按正方形显示（不裁切） */
.hero { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; cursor: zoom-in; aspect-ratio: 1; }
.hero img { width: 100%; height: 100%; object-fit: contain; }
.hero-more {
    position: absolute; right: 8px; top: 8px; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--radius);
    display: grid; place-items: center; background: rgba(30, 30, 30, .78); color: #fff; font-weight: 700;
}
.hero-edit { position: absolute; left: 8px; bottom: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.model-title { font-size: 28px; line-height: 1.25; font-weight: 700; }
@media (max-width: 760px) { .model-title { font-size: 22px; } }
.props { display: grid; grid-template-columns: 10ch minmax(0, 1fr); }
.props > * { padding: 9px 0; border-bottom: 1px solid var(--line); }
.props dt { color: var(--ink-2); }
.props dd { margin: 0; white-space: pre-wrap; }
/* 备注块：和下面的文件列表同一种白卡片，不用色块 */
.remark { padding: 12px 16px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); white-space: pre-wrap; }
.remark b { display: block; font-size: 13px; font-weight: 400; letter-spacing: .08em; color: var(--ink-2); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.files .file { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.files .file:last-child { border-bottom: 0; }
.files .file .desc { color: var(--ink-2); font-size: 14px; }
.files .btn-icon { width: 44px; min-height: 44px; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.files .btn-icon:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--bg); }
@media (max-width: 600px) {
    .files .file { grid-template-columns: auto minmax(0, 1fr); }
    .files .file .desc { grid-column: 1 / -1; }
    .files .file .desc:empty { display: none; }
}

/* ---------- 覆盖层：相册 / PDF ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(12, 12, 12, .94); color: #fff; }
.overlay-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 56px; }
.overlay-bar .btn { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.overlay-bar .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.grid-thumbs { flex: 1; overflow-y: auto; padding: 8px 12px 24px; display: grid; gap: 8px; align-content: start; grid-template-columns: repeat(auto-fill, minmax(min(30%, 300px), 1fr)); }
.grid-thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: #222; cursor: pointer; }
.grid-thumbs button:hover { border-color: #fff; }
.grid-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.viewer { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: pan-y pinch-zoom; }
/* 图片用绝对定位铺满可视区再 contain：无论原图多大，点开后正好完整显示（之前 max-height:100% 在网格里不生效，大图会撑出屏幕） */
.viewer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.viewer .nav { position: absolute; top: 0; bottom: 0; width: 18%; border: 0; background: none; color: #fff; font-size: 40px; cursor: pointer; opacity: .35; }
.viewer .nav:hover { opacity: 1; }
.viewer .prev { left: 0; } .viewer .next { right: 0; }
.overlay iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* ---------- 编辑 ---------- */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.savebar { position: sticky; bottom: 0; z-index: 20; margin: 0 -20px -20px; padding: 12px 20px; display: flex; gap: 8px; align-items: center;
    background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.drop {
    display: grid; place-items: center; gap: 4px; padding: 24px 16px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--bg); transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-bg); }
.efile { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.efile:last-child { border-bottom: 0; }
.efile .pv { width: 64px; height: 64px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; display: grid; place-items: center; font-size: 12px; color: var(--ink-2); }
.efile .pv img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.efile .name { font-weight: 700; }
.efile .ctl { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.efile .ctl .input { min-height: 36px; padding: 4px 10px; }
@media (pointer: coarse) { .efile .ctl .input { min-height: 44px; } }
@media (max-width: 600px) { .efile .ctl { grid-template-columns: 1fr; } }
.efile .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- 管理 ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; }
.tabs a { padding: 10px 16px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 700; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 400; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
@media (max-width: 700px) {
    .table.cards thead { display: none; }
    .table.cards tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .table.cards td { display: flex; gap: 8px; padding: 2px 12px; border: 0; }
    .table.cards td::before { content: attr(data-th); flex: none; width: 8ch; color: var(--ink-2); }
}

/* ---------- 对话框 / 提示 ---------- */
dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog .dlg-body { padding: 20px; display: grid; gap: 14px; max-height: 70vh; overflow-y: auto; }
dialog .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
dialog h3 { font-size: 18px; }
.toasts { position: fixed; left: 0; right: 0; bottom: 20px; z-index: 200; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { padding: 10px 16px; border-radius: var(--radius); background: var(--ink); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); max-width: 100%; }
.toast.err { background: var(--danger); color: #fff; }

/* ---------- 原位编辑：看起来还是显示页，元素就地可改；空的用虚框 ---------- */
.inline {
    display: block; width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
    background: transparent; font: inherit; color: inherit; outline: none; resize: none; overflow: hidden; line-height: 1.6;
    transition: border-color .15s, background .15s;
}
.inline:placeholder-shown { border: 1.5px dashed var(--line-2); }
.inline:hover:not(:disabled) { border-color: var(--ink-2); }
.inline:focus { border: 1px solid var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-bg); }
.inline:disabled { border-color: transparent; padding-left: 0; opacity: 1; -webkit-text-fill-color: currentColor; }
.inline.model-title { font-size: 28px; font-weight: 700; line-height: 1.25; padding: 4px 8px; }
@media (max-width: 760px) { .inline.model-title { font-size: 22px; } }
@media (pointer: coarse) { .inline { min-height: 44px; } }
.editing .props > * { padding: 6px 0; }
.editing .props dt { padding-top: 12px; }
.editing .remark { white-space: normal; }
.editing .remark .inline { margin-top: 0; }
.chips-sm .chip span { min-height: 34px; padding: 0 14px; }
@media (pointer: coarse) { .chips-sm .chip span { min-height: 44px; } }

.files .file-edit { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.fctl { display: grid; grid-template-columns: minmax(0, 1fr) 13ch; gap: 8px; margin-top: 2px; }
.fctl .input { min-height: 36px; padding: 4px 8px; }
@media (pointer: coarse) { .fctl .input { min-height: 44px; } }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 760px) {
    .files .file-edit { grid-template-columns: auto minmax(0, 1fr); }
    .files .file-edit .fctl { grid-column: 1 / -1; }
}
.upload-row { display: grid; grid-template-columns: minmax(0, 1fr) 13ch; gap: 8px; align-items: stretch; padding: 10px 12px; }
.upload-row .input { height: 100%; }
.drop-sm { padding: 12px; grid-auto-flow: column; justify-content: center; gap: 12px; }
@media (max-width: 600px) { .drop-sm { grid-auto-flow: row; } .upload-row { grid-template-columns: 1fr; } }
.efile .fctl { margin-top: 8px; }

dialog.panel { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); }
dialog.panel .dlg-head { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
dialog.panel .dlg-body { max-height: none; }
dialog.panel .upload-row { padding: 0; }

/* ---------- 物料总表（Excel 式） ---------- */
.sheet-tools #sheet-q { flex: 1; min-width: 220px; }
.sheet-wrap { overflow: auto; max-height: calc(100dvh - 250px); min-height: 320px; }
.sheet { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1320px; font-size: 15px; }
.sheet th {
    position: sticky; top: 0; z-index: 3; padding: 8px 10px; text-align: left; font-weight: 400; font-size: 13px; letter-spacing: .06em;
    color: var(--ink-2); background: var(--bg); border-bottom: 1px solid var(--line-2); white-space: nowrap; cursor: pointer; user-select: none;
}
.sheet th:hover { color: var(--ink); }
.sheet td { padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: middle; height: 44px; transition: background .4s; }
.sheet td:last-child { border-right: 0; }
.sheet tr:hover td { background: var(--bg); }
.sheet td.ok { background: var(--ok-bg) !important; }
.sheet td.bad { background: var(--danger-bg) !important; }
.sheet .c-pic { width: 52px; min-width: 52px; position: sticky; left: 0; z-index: 2; background: var(--card); }
.sheet .c-model { position: sticky; left: 52px; z-index: 2; background: var(--card); min-width: 26ch; max-width: 34ch; border-right: 1px solid var(--line-2); }
.sheet th.c-pic, .sheet th.c-model { z-index: 5; background: var(--bg); }
.sheet .c-pic a { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; }
.sheet .c-pic img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 4px; border: 1px solid var(--line); }
.sheet .nopic { font-size: 11px; color: var(--ink-3); }
.sheet .c-model a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; }
.sheet .c-model a:hover { text-decoration: underline; }
.sheet td input[data-f], .sheet td textarea {
    display: block; width: 100%; height: 43px; padding: 9px 10px; border: 0; border-radius: 0; background: transparent; outline: none;
    font: inherit; font-size: 16px; color: inherit; resize: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.55;
}
@media (pointer: fine) { .sheet td input[data-f], .sheet td textarea { font-size: 15px; } }
.sheet td input[data-f]:focus, .sheet td textarea:focus { box-shadow: inset 0 0 0 2px var(--accent); background: var(--card); }
.sheet td textarea.open { position: relative; z-index: 5; white-space: pre-wrap; overflow: auto; min-height: 96px; max-height: 320px; box-shadow: inset 0 0 0 2px var(--accent), 0 10px 28px rgba(0, 0, 0, .16); }
.sheet .c-attrs { white-space: nowrap; padding: 0 6px; min-width: 232px; }
.mini { position: relative; display: inline-block; margin: 0 2px; }
.mini input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mini span { display: inline-block; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--ink-3); user-select: none; }
.mini input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mini input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-bg); }
.mini input:disabled + span { opacity: .4; }
.sheet .c-files { white-space: nowrap; text-align: center; min-width: 14ch; }
.sheet .c-files a { display: block; padding: 8px 10px; color: var(--ink-2); text-decoration: none; }
.sheet .c-files .zero { color: var(--danger); font-weight: 700; }
.sheet td.empty { border: 0; height: auto; }
.sheet th.c-category, .sheet th.c-grp { min-width: 20ch; }
.sheet th.c-description { min-width: 30ch; }
.sheet th.c-remark { min-width: 24ch; }

/* 表头第二行：每列一个筛选器（文字列 = 方式 + 内容；属性 / 文件列 = 三态开关） */
.sheet .h-name th { height: 36px; }
.sheet .h-filter th { top: 36px; padding: 5px 6px; cursor: default; letter-spacing: 0; border-bottom: 1px solid var(--line-2); }
.sheet .h-name th { border-bottom: 0; }
.flt { display: flex; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); overflow: hidden; }
.flt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.flt select, .flt input { min-width: 0; height: 30px; border: 0; background: transparent; outline: none; font: inherit; font-size: 16px; color: var(--ink); }
@media (pointer: fine) { .flt select, .flt input { font-size: 14px; } }
@media (pointer: coarse) { .flt select, .flt input { height: 40px; } }
.flt select { flex: none; width: 9.5ch; padding: 0 2px 0 6px; border-right: 1px solid var(--line); color: var(--ink-2); cursor: pointer; }
.flt input { flex: 1; width: 0; padding: 0 8px; }
.flt input:disabled { background: var(--bg); }
.flt:focus-within { border-color: var(--ink); }
.tri {
    margin: 0 2px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card);
    font: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer; user-select: none;
}
@media (pointer: coarse) { .tri { padding: 8px 10px; } }
.tri[data-state="1"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tri[data-state="2"] { border-color: var(--danger); color: var(--danger); text-decoration: line-through; }
.sheet .h-filter .c-attrs, .sheet .h-filter .c-files { white-space: nowrap; }
.sheet .h-filter .c-files { text-align: center; }
.sheet th.c-files { min-width: 19ch; }

/* ---------- 电缆接线图：适用米数 ---------- */
.files .file .range { color: var(--ink); white-space: nowrap; }
.files .file.fit { box-shadow: inset 3px 0 0 var(--ok); background: var(--ok-bg); }
.lenrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lenrow .inline { width: 9ch; text-align: right; }
.lenrow .label { white-space: nowrap; }
.multi .head { grid-template-columns: 96px minmax(0, 2fr) minmax(0, 3fr) 12ch; }

/* ---------- 手机上的 PDF 页内查看器：每页一张图，上下滚动，双指放大 ---------- */
.overlay.pdf-pages { background: #2a2927; }
.pdf-pages .pages { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px; touch-action: pan-x pan-y pinch-zoom; }
.pdf-pages .pages img { display: block; width: 100%; height: auto; margin: 0 auto 8px; background: #fff; border-radius: 4px; }
.pdf-pages .hint { text-align: center; color: #aaa; font-size: 13px; padding: 4px 0 16px; }

/* 管理 → 接线图：格子里直接改 */
.w-table td { vertical-align: middle; }
.w-table .input { min-height: 36px; padding: 4px 8px; font-size: 16px; }
.w-table .w-name { min-width: 26ch; width: 100%; }
.w-table .w-len { flex-wrap: nowrap; }
.w-table .w-len .input { width: 7ch; text-align: right; }
@media (pointer: coarse) { .w-table .input { min-height: 44px; } }