* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    color: #1f2937; background: #f3f4f6; font-size: 15px; }
h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef2ff; padding: 1px 5px; border-radius: 4px; }

/* 布局：左侧菜单 fixed 钉死在视口，内容区留出菜单宽度，页面滚动只动内容 */
.layout { display: block; min-height: 100vh; }
.content { margin-left: 200px; padding: 1.5rem 2rem; max-width: 1100px; }

/* 导航：固定于视口左侧，永不随页面滚动；"退出"等始终在视口左下角 */
.nav { position: fixed; top: 0; left: 0; bottom: 0; width: 200px; box-sizing: border-box;
    background: #111827; color: #e5e7eb; display: flex; flex-direction: column;
    padding: 1rem .6rem; gap: .2rem; overflow-y: auto; z-index: 100; }
.brand { font-weight: 700; font-size: 1.05rem; padding: .4rem .6rem 1rem; color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* 抽屉自带的关闭按钮，只在手机上出现（电脑端侧栏常驻，没有"关"这一说） */
.nav-close { display: none; background: rgba(255,255,255,.1); border: none; color: #cbd5e1;
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1rem; flex-shrink: 0; }
.nav-close:active { background: #2563eb; color: #fff; }
/* flex + 固定 line-height：各 emoji 字形高度不同，靠基线排会把整行文字顶歪 */
.nav-item { color: #cbd5e1; padding: .55rem .7rem; border-radius: 6px; font-size: .95rem;
    display: flex; align-items: center; gap: .1rem; line-height: 1.5; }
/* 定宽图标槽：图标居中、文字起点对齐成一条竖线 */
.nav-ico { flex: 0 0 1.6em; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1em; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji",
    "Noto Color Emoji", sans-serif; }
.nav-item:hover { background: #1f2937; text-decoration: none; color: #fff; }
.nav-item.active { background: #2563eb; color: #fff; }
.nav-item.danger { color: #fca5a5; }
.nav-badge { display: inline-block; background: #dc2626; color: #fff; border-radius: 10px;
    padding: 0 .45rem; font-size: .75rem; font-weight: 700; margin-left: .3rem; min-width: 1.2em;
    text-align: center; }
.nav-spacer { flex: 1; }
.nav-user { border-top: 1px solid #374151; padding-top: .7rem; font-size: .85rem; color: #9ca3af;
    display: flex; flex-direction: column; gap: .3rem; }
.logout-btn { background: none; border: 1px solid #4b5563; color: #cbd5e1; padding: .35rem;
    border-radius: 6px; cursor: pointer; margin-top: .3rem; }
.logout-btn:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* 登录 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #111827; }
.login-card { background: #fff; padding: 2.2rem; border-radius: 12px; width: 340px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-card h1 { font-size: 1.2rem; text-align: center; }
.login-card .sub { text-align: center; color: #6b7280; margin-top: 0; }
.login-card label { display: block; margin: .8rem 0 .25rem; font-size: .9rem; color: #374151; }
.login-card input { width: 100%; padding: .6rem; border: 1px solid #d1d5db; border-radius: 7px; font-size: 1rem; }
.login-card button { width: 100%; margin-top: 1.2rem; padding: .65rem; background: #2563eb; color: #fff;
    border: none; border-radius: 7px; font-size: 1rem; cursor: pointer; }
.login-card button:hover { background: #1d4ed8; }

/* 搜索 */
.search-bar { display: flex; gap: .5rem; margin: 1rem 0; }
.search-bar input { flex: 1; padding: .7rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1.05rem; }
.search-bar button { padding: .7rem 1.6rem; background: #2563eb; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.hint, .dim { color: #6b7280; font-size: .9rem; }
.dim { font-size: .85rem; }

/* 表格 */
.grid { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; margin: .6rem 0; }
.grid th { background: #f9fafb; text-align: left; padding: .6rem .7rem; font-size: .85rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; }
.grid td { padding: .6rem .7rem; border-bottom: 1px solid #f1f5f9; font-size: .92rem; }
.grid tr:hover td { background: #fafbff; }
.row-off td { color: #9ca3af; }

/* 表单 */
.form, .panel { background: #fff; padding: 1.2rem 1.4rem; border-radius: 10px; margin: 1rem 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.form-narrow { max-width: 420px; }
.form-row { margin-bottom: .8rem; display: flex; flex-direction: column; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.form label, .panel label { font-size: .85rem; color: #374151; margin-bottom: .25rem; display: block; }
.form input, .form select, .form textarea, .panel input, .panel select {
    padding: .5rem .6rem; border: 1px solid #d1d5db; border-radius: 7px; font-size: .95rem; width: 100%; }
.form-actions { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; }
.req { color: #dc2626; }
.chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: #374151; }
.chk input { width: auto; }
.comp-input input { padding: .35rem .4rem; }

/* 按钮 */
.btn, .btn-primary, .btn-danger, .btn-sm { display: inline-block; border: none; border-radius: 7px; cursor: pointer;
    text-align: center; font-size: .92rem; }
.btn { background: #eef2ff; color: #2563eb; padding: .5rem 1rem; }
.btn-primary { background: #2563eb; color: #fff; padding: .6rem 1.4rem; font-size: 1rem; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: #dc2626; color: #fff; padding: .6rem 1.4rem; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { background: #f1f5f9; color: #374151; padding: .3rem .7rem; font-size: .82rem; margin-right: .3rem; }
.btn-sm:hover { background: #e2e8f0; }

/* 提示条 */
.alert-error { background: #fef2f2; color: #b91c1c; padding: .7rem .9rem; border-radius: 8px; margin: .7rem 0; border: 1px solid #fecaca; }
.alert-warn { background: #fffbeb; color: #92400e; padding: .7rem .9rem; border-radius: 8px; margin: .7rem 0; border: 1px solid #fde68a; }
.alert-ok { background: #f0fdf4; color: #15803d; padding: .7rem .9rem; border-radius: 8px; margin: .7rem 0; border: 1px solid #bbf7d0; }

/* 详情 */
.detail-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.status-badge { padding: .2rem .7rem; border-radius: 20px; font-size: .8rem; color: #fff; }
.status-in_stock { background: #6b7280; } .status-shipped { background: #2563eb; }
.status-repairing { background: #f59e0b; } .status-scrapped { background: #991b1b; }
.meta-row { display: flex; gap: 2rem; flex-wrap: wrap; background: #fff; padding: .9rem 1.2rem; border-radius: 10px; margin: 1rem 0; }
.meta-row .k { display: block; font-size: .78rem; color: #9ca3af; }
.remark { background: #fff; padding: .7rem 1.2rem; border-radius: 8px; color: #374151; }

/* 标签页 */
.tabs { display: flex; gap: .3rem; margin: 1.2rem 0 .5rem; border-bottom: 2px solid #e5e7eb; flex-wrap: wrap; }
.tab { background: none; border: none; padding: .6rem 1rem; cursor: pointer; font-size: .95rem; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }

/* 时间线 */
.timeline { list-style: none; padding: 0; margin: .5rem 0; }
.timeline li { display: flex; align-items: baseline; gap: .8rem; padding: .6rem .4rem; border-bottom: 1px solid #f1f5f9; }
.timeline li.voided { opacity: .5; text-decoration: line-through; }
.tl-date { color: #6b7280; font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-icon { font-size: 1.1rem; }
.tl-summary { flex: 1; }
.tl-src { color: #9ca3af; font-size: .8rem; white-space: nowrap; }

/* 标记 */
.tag { display: inline-block; background: #f1f5f9; color: #475569; padding: .05rem .5rem; border-radius: 5px; font-size: .75rem; }

/* 关于页 */
.about-panel { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.about-main { flex: 1 1 340px; min-width: 0; }
.about-title { margin: 0 0 .2rem; font-size: 1.4rem; color: #1f4e79; }
.about-company { margin: 0 0 1rem; color: #475569; font-size: 1.02rem; }
.about-table { max-width: 480px; }
.about-note { margin-top: 1rem; line-height: 1.7; }
.about-qr { flex: 0 0 auto; text-align: center; }
/* 白底 + 留白：二维码贴着深色或彩色背景会扫不出来 */
.qr-box { width: 220px; height: 220px; background: #fff; padding: 10px;
    border: 1px solid #e5e7eb; border-radius: 10px; box-sizing: content-box; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-caption { margin: .5rem 0 0; }

/* 关于页的分步说明 */
.step-h { margin: 1.2rem 0 .4rem; font-size: 1rem; color: #1f4e79;
    border-left: 4px solid #2563eb; padding-left: .55rem; }
.step-h:first-child { margin-top: 0; }
.step-list { margin: .3rem 0 .6rem; padding-left: 1.5rem; line-height: 2; }
.step-list li { margin-bottom: .15rem; }
.step-cols { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.step-col { flex: 1 1 300px; min-width: 0; background: #f8fafc;
    border: 1px solid #e5e7eb; border-radius: 8px; padding: .9rem 1rem; }
.step-os { font-weight: 700; color: #334155; margin-bottom: .3rem; }

/* 可见角色多选 */
.role-picks { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; }
.role-pick { display: inline-flex; align-items: center; gap: .3rem; font-size: .92rem;
    padding: .3rem .6rem; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; }
.role-pick:hover { background: #f8fafc; }

/* 上传进度 */
.upload-box { margin: .8rem 0; padding: .9rem 1rem; background: #f8fafc;
    border: 1px solid #dbeafe; border-radius: 8px; }
.upload-bar { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.upload-fill { height: 100%; background: #2563eb; border-radius: 999px;
    transition: width .3s ease; }
.upload-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .5rem;
    font-size: .88rem; color: #475569; }
.upload-meta b { color: #1f4e79; font-size: 1rem; }

/* 附件缩略图 */
.thumb-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; margin: .3rem 0; }
.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
    border: 1px solid #d1d5db; background: #f8fafc; display: block; }
.thumb-lg { width: 92px; height: 92px; }
.thumb-box { position: relative; display: inline-block; }
/* 删除角标：绝对定位在缩略图右上角 */
.thumb-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0;
    border: none; border-radius: 50%; background: #dc2626; color: #fff; font-size: .8rem;
    line-height: 22px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.thumb-del:hover { background: #b91c1c; }
.tag-blue { background: #dbeafe; color: #1d4ed8; }
.tag-red { background: #fee2e2; color: #b91c1c; }
.tag-gray { background: #e5e7eb; color: #6b7280; }

.code-block { background: #1f2937; color: #e5e7eb; padding: .8rem 1rem; border-radius: 8px;
    font-size: .85rem; overflow-x: auto; white-space: pre; margin: .5rem 0; }

/* 补录标记：显著醒目 */
.backfill-badge { display: inline-block; background: #fef3c7; color: #92400e; border: 1px solid #fbbf24;
    padding: .12rem .5rem; border-radius: 5px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.backfill-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; }

/* 识别强度弱/无：紫色与"补录"的琥珀色区分开——两者可能同时出现在一台机器上 */
.weakid-badge { display: inline-block; background: #f3e8ff; color: #6b21a8; border: 1px solid #c084fc;
    padding: .12rem .5rem; border-radius: 5px; font-size: .78rem; font-weight: 600; white-space: nowrap; }

/* 品牌/型号待定：橙色，与"补录"的琥珀、"识别弱"的紫都分得开 */
.pending-badge { display: inline-block; background: #ffedd5; color: #9a3412; border: 1px solid #fb923c;
    padding: .12rem .5rem; border-radius: 5px; font-size: .78rem; font-weight: 600; white-space: nowrap; }

.pager { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; justify-content: center; }
.pager button:disabled { opacity: .4; cursor: default; }
.target-box { background: #eff6ff; padding: .8rem 1.2rem; border-radius: 8px; margin: 1rem 0; border: 1px solid #bfdbfe; }
.empty-result { background: #fff; padding: 1.5rem; border-radius: 10px; text-align: center; }

/* 统计 */
.stat-tiles { display: flex; gap: 1rem; margin: 1rem 0; }
.tile { background: #fff; padding: 1.2rem 1.6rem; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.tile-num { font-size: 2rem; font-weight: 700; color: #2563eb; }
.tile-label { color: #6b7280; font-size: .85rem; }
.stat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.barlist { display: flex; flex-direction: column; gap: .4rem; }
.barrow { display: flex; align-items: center; gap: .6rem; }
.barlabel { width: 90px; font-size: .85rem; text-align: right; color: #374151; }
.bar { flex: 1; background: #f1f5f9; border-radius: 5px; height: 18px; overflow: hidden; }
.barfill { display: block; height: 100%; background: #2563eb; }
.barval { width: 30px; font-size: .85rem; color: #6b7280; }

/* ===== 手机端顶栏（电脑端隐藏） ===== */
.mobile-bar { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 820px) {
    /* --- 顶栏：汉堡(最左) + 常用(查询/报修/待修) --- */
    .mobile-bar {
        display: flex; align-items: center; gap: .35rem;
        position: fixed; top: 0; left: 0; right: 0; height: 58px;
        background: #111827; color: #fff; padding: 0 .5rem; z-index: 300;
    }
    .nav-close { display: flex; align-items: center; justify-content: center; }
    .mobile-quick { color: #cbd5e1; background: #1f2937; padding: .5rem .55rem; border-radius: 8px;
        font-size: .82rem; white-space: nowrap; text-decoration: none; flex-shrink: 0;
        display: inline-flex; align-items: center; gap: .25rem; line-height: 1.4; }
    .mobile-quick.active { background: #2563eb; color: #fff; }
    /* 汉堡按钮加大，方便手指点击 */
    .hamburger { background: #1f2937; border: 1px solid #4b5563; color: #fff; font-size: 1.4rem;
        width: 48px; height: 44px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; padding: 0; }
    .hamburger:active { background: #2563eb; }
    /* 菜单里有待办时，汉堡右上角一个小红点——不显示数字，避免和「待修」的数字打架 */
    .hamburger.has-dot { position: relative; }
    .hamburger.has-dot::after { content: ""; position: absolute; top: 5px; right: 6px;
        width: 9px; height: 9px; border-radius: 50%; background: #dc2626;
        box-shadow: 0 0 0 2px #111827; }
    /* 顶栏空间紧张，角标比侧栏的小一号 */
    .mobile-quick .nav-badge { font-size: .68rem; padding: 0 .35rem; margin-left: .25rem; }

    /* --- 侧栏：默认收起，点汉堡从左滑出 --- */
    .nav { position: fixed; top: 0; left: 0; bottom: 0; width: 230px; height: 100%;
        transform: translateX(-100%); transition: transform .22s ease; z-index: 400; }
    .nav.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.4); }
    /* 侧滑菜单项加大，手指好点 */
    .nav .nav-item { padding: .85rem .8rem; font-size: 1rem; }
    .nav .logout-btn { padding: .6rem; font-size: .95rem; }
    .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 350; }

    .content { margin-left: 0; padding: 1rem; padding-top: 70px; }

    /* --- 统计卡：每行 2 个，文字不再被挤成竖条 --- */
    .stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .tile { padding: .8rem; }
    .tile-num { font-size: 1.5rem; }
    .tile-label { font-size: .8rem; white-space: nowrap; }

    /* --- 时间线：上下堆叠，摘要独占整行 --- */
    .timeline li { display: block; padding: .7rem .2rem; }
    .tl-date { font-size: .78rem; }
    .tl-src { font-size: .75rem; margin-left: .5rem; }
    .tl-summary { display: block; margin: .3rem 0; font-size: .95rem; }

    /* --- 普通表格：可横向滑动，不再压缩列 --- */
    .grid { display: block; overflow-x: auto; white-space: nowrap; }
    .grid th, .grid td { white-space: nowrap; }

    /* --- 查询结果表：改为卡片（一台电脑一张卡，字段竖排） --- */
    .grid.cardable { display: block; overflow: visible; white-space: normal; background: none; }
    .grid.cardable thead { display: none; }
    .grid.cardable tbody, .grid.cardable tr, .grid.cardable td { display: block; width: auto; }
    .grid.cardable tr { background: #fff; border-radius: 10px; margin-bottom: .7rem;
        padding: .6rem .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
    .grid.cardable td { border: none; padding: .25rem 0; white-space: normal; }
    .grid.cardable td::before { content: attr(data-label); display: inline-block; min-width: 5.5em;
        color: #9ca3af; font-size: .8rem; }
    .grid.cardable td[data-label=""]::before { display: none; }
    .grid.cardable td.cell-key { font-size: 1.05rem; font-weight: 700; padding-bottom: .4rem; }
    .grid.cardable td.cell-key::before { display: none; }

    /* --- 表单：一行一项；日期两个一行 --- */
    .form-grid { grid-template-columns: 1fr; }
    .form-grid > div[style*="span 2"] { grid-column: auto !important; }

    /* --- 按钮文字不折断 --- */
    .btn, .btn-sm, .btn-primary, .btn-danger, button { white-space: nowrap; }

    .stat-cols { grid-template-columns: 1fr; }
    .meta-row { gap: 1rem; }
    .detail-head { gap: .5rem; }
    h1 { font-size: 1.2rem; }
}

/* 按钮文字永不折断（全端） */
.btn, .btn-sm, .btn-primary, .btn-danger { white-space: nowrap; }

/* 输入框 + 扫码按钮 */
.input-scan { display: flex; gap: .4rem; }
.input-scan input { flex: 1; }
.scan-btn { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 7px; cursor: pointer;
    font-size: 1.15rem; padding: 0 .7rem; flex-shrink: 0; }
.scan-btn:hover { background: #e0e7ff; }

/* 折叠更多条件 */
.adv-toggle { color: #2563eb; cursor: pointer; font-size: .9rem; padding: .4rem 0; user-select: none; }
.adv-toggle:hover { text-decoration: underline; }

/* 扫码浮层：视频自适应剩余高度，工具栏永远在底部可见 */
.scan-overlay { position: fixed; inset: 0; background: #000; z-index: 500;
    flex-direction: column; align-items: center; justify-content: flex-start;
    gap: .5rem; padding: .6rem; padding-top: max(.6rem, env(safe-area-inset-top));
    padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
.scan-close { position: absolute; top: max(.6rem, env(safe-area-inset-top)); right: .8rem;
    width: 40px; height: 40px; border-radius: 50%; border: none; z-index: 520;
    background: rgba(255,255,255,.22); color: #fff; font-size: 1.2rem; cursor: pointer; }
.scan-videobox { position: relative; width: 100%; max-width: 640px; flex: 1; min-height: 0;
    display: flex; align-items: center; }
.scan-overlay video { width: 100%; max-height: 100%; border-radius: 12px; background: #000;
    display: block; object-fit: contain; }
/* 取景框：提示把码放中间 */
.scan-frame { position: absolute; left: 8%; right: 8%; top: 34%; height: 32%;
    border: 2px solid rgba(255,255,255,.85); border-radius: 8px; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.25); }
.scan-tip { color: #fff; font-size: .9rem; text-align: center; padding: 0 1rem; line-height: 1.5; }

.scan-zoom { display: flex; align-items: center; gap: .6rem; color: #fff; width: 100%; max-width: 640px; }
.scan-zoom input { flex: 1; }

.scan-always { color: #cbd5e1; font-size: .85rem; display: flex; align-items: center;
    gap: .4rem; flex-shrink: 0; }
.scan-always input { width: auto; }
.scan-tools { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
    width: 100%; flex-shrink: 0; }
.scan-tool { background: #374151; color: #fff; border: none; border-radius: 8px;
    padding: .7rem 1rem; font-size: .95rem; cursor: pointer; }
.scan-tool.primary { background: #2563eb; font-weight: 700; }
.scan-tool.danger { background: #dc2626; }
.scan-tool.disabled { opacity: .5; }
.scan-tool.on { background: #f59e0b; color: #111827; font-weight: 700; }

.scan-list { position: absolute; inset: 0; background: rgba(0,0,0,.94); overflow-y: auto;
    padding: 1.2rem; z-index: 510; }
.scan-list-title { color: #fff; font-size: 1rem; margin-bottom: .8rem; text-align: center; }
.scan-pick { display: block; width: 100%; text-align: left; background: #1f2937; color: #fff;
    border: 1px solid #374151; border-radius: 10px; padding: .9rem 1rem; margin-bottom: .6rem; cursor: pointer; }
.scan-pick b { display: block; font-size: 1.05rem; word-break: break-all; }
.scan-pick span { color: #9ca3af; font-size: .8rem; }
.scan-pick-back { text-align: center; background: #374151; color: #cbd5e1; font-size: .95rem; }

/* 弱识别机器的标签照片补拍入口，嵌在黄色警告框里 */
.label-photo-box { margin-top: .8rem; padding: .7rem .9rem; background: #fff; border: 1px dashed #f59e0b;
    border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.label-photo-box .hint { margin: 0; }
.label-photo-ok { margin-top: .8rem; color: #166534; font-weight: 600; }

/* 页签上的待办数字：非零用红底药丸（与菜单红点同一视觉），零用灰字。
   两者都常显——只显示非零的话，页签之间看不出"这边 0、那边 1"。 */
.tab-badge { display: inline-block; background: #dc2626; color: #fff; border-radius: 10px;
    padding: 0 .45rem; font-size: .75rem; font-weight: 700; margin-left: .35rem;
    min-width: 1.2em; text-align: center; }
.tab-zero { color: #9ca3af; font-size: .8rem; margin-left: .35rem; }

/* 上传进度条：所有走 InputFile 的上传共用（UploadBar 组件） */
.upload-prog { margin: .6rem 0; }
.upload-prog-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    font-size: .88rem; color: #374151; margin-bottom: .35rem; }
.upload-name { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-pct { margin-left: auto; font-weight: 700; color: #2563eb; font-variant-numeric: tabular-nums; }
.upload-track { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.upload-fill { height: 100%; background: #2563eb; transition: width .15s linear; }
.upload-fill.cancelling { background: #9ca3af; }

/* 图片放大预览（灯箱）。缩略图一律加 .thumb，由 lightbox.js 统一接管点击 */
.thumb { cursor: zoom-in; }
/* 上留白给顶栏：横构图照片在手机上会被顶到很上面，不留白标题会压在照片上 */
.lb-mask { position: fixed; inset: 0; z-index: 9999; display: none;
    padding: 4.2rem .6rem 1rem; background: rgba(0,0,0,.93);
    align-items: center; justify-content: center; }
.lb-mask.on { display: flex; }
/* 尺寸按视口算死，不用百分比：百分比要靠父级内容盒推导，横屏矮窗口下会算多几个像素顶到顶栏 */
.lb-img { max-width: calc(100vw - 1.2rem); max-height: calc(100vh - 5.4rem); object-fit: contain;
    box-shadow: 0 8px 40px rgba(0,0,0,.6); background: #fff; }
.lb-bar { position: fixed; top: 0; left: 0; right: 0; padding: .7rem 1rem; z-index: 1;
    display: flex; align-items: center; gap: 1rem; color: #fff; font-size: .9rem;
    background: linear-gradient(rgba(0,0,0,.55), transparent); }
.lb-cap { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-dl { color: #fff; text-decoration: underline; white-space: nowrap; }
.lb-close { background: rgba(255,255,255,.15); color: #fff; border: none;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.lb-close:hover { background: rgba(255,255,255,.3); }

/* ── 维修历史提示 ────────────────────────────────────────────────
   蓝色系，和黄色的 alert-warn（"该电脑有 N 条待处理报修"）区分开：
   那条是要你动手的，这块只是参考信息，不该抢同样的注意力。
   没有历史时整块不渲染，所以这里没有空状态样式。 */
.hist-line { background: #eff6ff; color: #1e40af; border-left: 3px solid #3b82f6;
    padding: .5rem .7rem; margin: .6rem 0; font-size: .9rem; line-height: 1.6; border-radius: 0 6px 6px 0; }
.hist-box { background: #eff6ff; border-left: 3px solid #3b82f6; padding: .5rem .7rem;
    margin: .6rem 0; border-radius: 0 6px 6px 0; }
.hist-box .hist-line { background: none; border: none; padding: 0; margin: 0; }
.hist-detail { width: 100%; margin-top: .45rem; padding-top: .4rem;
    border-top: 1px solid #bfdbfe; border-collapse: collapse; }
.hist-detail td { color: #1e40af; font-size: .82rem; padding: .12rem 0; vertical-align: top; }
.hist-detail a { color: #1d4ed8; }
.hd-date { white-space: nowrap; width: 6.2rem; }
.hd-sn { white-space: nowrap; width: 7rem; padding-right: .6rem !important; }
.hd-txt { width: auto; }
.hist-foot { color: #3b82f6; font-size: .78rem; margin-top: .3rem; }

/* 报修列表「序列号」格下面那行维修史。
   手机上表格是横向滚动的窄列，整句塞进去会把日期从中间折断（「2026-06-」换行），
   而且把这一列撑宽、滚动条又长一截 —— 报修员十有八九在手机上看这页。
   所以窄屏只留「修过 N 次」这个信号，明细收起来，要细节点进档案看。 */
.grid td .hist-sub { display: block; white-space: nowrap; font-size: .78rem; line-height: 1.5; }

/* 手机上三列挤不下：序列号和处理说明各占一行，日期跟序列号并排 */
@media (max-width: 620px) {
    .hist-detail, .hist-detail tbody, .hist-detail tr, .hist-detail td { display: block; width: auto; }
    .hist-detail tr { padding: .25rem 0; border-bottom: 1px solid #dbeafe; }
    .hist-detail tr:last-child { border-bottom: none; }
    /* 必须带 .hist-detail 前缀：上一条 .hist-detail td 是 (0,1,1)，
       裸的 .hd-date 只有 (0,1,0)，压不过它，日期和序列号会各占一行 */
    .hist-detail .hd-date, .hist-detail .hd-sn { display: inline-block; }
    .hist-detail .hd-sn { padding-right: 0 !important; margin-left: .5rem; }
    .grid td .hist-sub .hist-more { display: none; }
}

/* 挂着未关闭报修：实心红 + 白字，和侧边栏那个红点角标（.nav-badge）同一套语言 ——
   系统里"红色数字 = 有报修待处理"已经是既有约定，这里沿用，不另造一种。
   刻意不用浅红描边款：那样和「补录」的浅琥珀在一行里几乎分不出来
   （状态徽章「维修中」也是暖橙，同一台机器上三个暖色角标会糊成一片）。 */
.repair-badge { display: inline-block; background: #dc2626; color: #fff; border: 1px solid #dc2626;
    padding: .12rem .55rem; border-radius: 5px; font-size: .78rem; font-weight: 600; white-space: nowrap; }