:root{ --bg:#f5f7fa; --card:#ffffff; --line:#e3e8ef; --line2:#eef2f7; --txt:#1f2937; --txt2:#5b6779; --txt3:#8a94a6; --brand:#2f5597; --brand-d:#24437a; --brand-l:#eaf0fa; --ok:#0f8a4c; --ok-l:#e8f6ee; --warn:#b26a00; --warn-l:#fff6e5; --danger:#c00000; --danger-l:#fdecec; --grey:#8a94a6; --grey-l:#f0f2f6; --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ background:var(--bg);color:var(--txt);font-size:15px;line-height:1.55; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB", "Microsoft YaHei","Helvetica Neue",Arial,sans-serif; } a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0 0 .6em;line-height:1.3;font-weight:600} h1{font-size:20px}h2{font-size:17px}h3{font-size:15px} p{margin:0 0 .8em} code{background:var(--grey-l);padding:1px 5px;border-radius:4px;font-size:12px} /* ---------- 顶栏 ---------- */ .topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30} .topbar-in{max-width:1180px;margin:0 auto;padding:8px 14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .brand{font-weight:700;color:var(--brand);font-size:16px;white-space:nowrap} .mainnav{display:flex;gap:4px;flex:1;flex-wrap:wrap} .mainnav a{padding:5px 11px;border-radius:8px;color:var(--txt2);font-size:14px} .mainnav a:hover{background:var(--grey-l);text-decoration:none} .mainnav a.on{background:var(--brand-l);color:var(--brand);font-weight:600} .who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt2)} .uname{font-weight:600;color:var(--txt)} .urole{background:var(--grey-l);padding:1px 7px;border-radius:20px;font-size:12px} .mobilebar{display:none} @media(max-width:860px){ .mainnav{display:none} .mobilebar{display:flex;gap:2px;padding:0 8px 6px;overflow-x:auto} .mobilebar a{padding:5px 12px;border-radius:8px;color:var(--txt2);font-size:13px;white-space:nowrap} .mobilebar a.on{background:var(--brand-l);color:var(--brand);font-weight:600} .topbar-in{gap:10px} } /* ---------- 布局 ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:16px 14px 60px} .foot{text-align:center;color:var(--txt3);font-size:12px;padding:8px 0 30px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:16px;margin-bottom:14px;box-shadow:var(--shadow)} .card.tight{padding:12px} .row{display:flex;gap:12px;flex-wrap:wrap} .row.between{justify-content:space-between;align-items:center} .col{flex:1;min-width:220px} .muted{color:var(--txt2)} .small{font-size:13px} .tiny{font-size:12px;color:var(--txt3)} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px} .right{text-align:right} .center{text-align:center} .mt{margin-top:12px}.mt2{margin-top:20px}.mb{margin-bottom:12px} .nomargin{margin:0} hr{border:0;border-top:1px solid var(--line);margin:14px 0} /* ---------- flash ---------- */ .flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;border:1px solid} .flash.err{background:var(--danger-l);border-color:#f3c9c9;color:#8a1a1a} .flash.ok{background:var(--ok-l);border-color:#c3e6d2;color:#0b5f36} .flash.warn{background:var(--warn-l);border-color:#f0d9a8;color:#7a4a00} /* ---------- 按钮 ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:8px 15px;border-radius:8px;border:1px solid var(--line); background:#fff;color:var(--txt);font-size:14px;cursor:pointer;font-family:inherit; text-decoration:none;line-height:1.3} .btn:hover{background:var(--grey-l);text-decoration:none} .btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .btn.pri:hover{background:var(--brand-d)} .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600} .btn.danger{background:#fff;border-color:#e7b6b6;color:var(--danger);font-weight:600} .btn.danger:hover{background:var(--danger-l)} .btn.sm{padding:5px 11px;font-size:13px} .btn.big{padding:12px 18px;font-size:15px;width:100%;min-height:44px} .btn[disabled]{opacity:.45;cursor:not-allowed} .link{background:none;border:0;color:var(--txt2);cursor:pointer;font-size:13px;padding:0; font-family:inherit;text-decoration:underline} .inline{display:inline} /* ---------- 表单 ---------- */ label{display:block;font-size:13px;color:var(--txt2);margin:0 0 4px;font-weight:500} /* 字号必须 ≥16px：iOS Safari 对 <16px 的输入框会在聚焦时强制放大整页 */ input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{ width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px; font-size:16px;font-family:inherit;background:#fff;color:var(--txt)} select{font-size:15px} input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-l); border-color:var(--brand);outline-offset:0} textarea{min-height:70px;resize:vertical} .field{margin-bottom:12px} .hint{font-size:12px;color:var(--txt3);margin-top:4px} /* ---------- 计数块 ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:12px 8px;text-align:center;box-shadow:var(--shadow)} .stat .n{font-size:24px;font-weight:700;line-height:1.1} .stat .l{font-size:12px;color:var(--txt2);margin-top:3px} .stat.p .n{color:var(--brand)} .stat.r .n{color:var(--warn)} .stat.j .n{color:var(--danger)} /* ---------- chips / 筛选 ---------- */ .chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0} .chip{padding:5px 12px;border-radius:20px;border:1px solid var(--line);background:#fff; font-size:13px;color:var(--txt2)} .chip:hover{text-decoration:none;background:var(--grey-l)} .chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} /* ---------- 状态标签 ---------- */ .tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px; white-space:nowrap;border:1px solid transparent} .s-pending{background:var(--brand-l);color:var(--brand);border-color:#cfdcf1} .s-review{background:var(--warn-l);color:var(--warn);border-color:#f0d9a8} .s-rejected{background:var(--danger-l);color:var(--danger);border-color:#f3c9c9} .s-done{background:var(--ok-l);color:var(--ok);border-color:#c3e6d2} .s-unrec{background:var(--grey-l);color:var(--txt2);border-color:var(--line)} .tag.behalf{background:#f3ecff;color:#5b3fa8;border-color:#ddd0f7} .tag.disputed{background:var(--danger-l);color:var(--danger);border-color:#f3c9c9;font-weight:600} .tag.mismatch{background:var(--danger-l);color:var(--danger);border-color:#f3c9c9;font-weight:600} .tag.dup{background:var(--grey-l);color:var(--txt2)} /* ---------- 列表 ---------- */ .list{display:flex;flex-direction:column;gap:10px} .item{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:12px 14px;box-shadow:var(--shadow);display:block;color:inherit} .item:hover{border-color:#c9d6ea;text-decoration:none} .item .l1{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .item .sn{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600;font-size:15px} .item .l2{font-size:13px;color:var(--txt2);margin-top:5px} .item .l3{font-size:12px;color:var(--txt3);margin-top:3px} .item .tags{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap} /* ---------- 表格 ---------- */ .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;font-size:13px;background:#fff} th,td{border-bottom:1px solid var(--line2);padding:8px 10px;text-align:left;vertical-align:top} th{background:#fafbfd;color:var(--txt2);font-weight:600;white-space:nowrap; position:sticky;top:0;border-bottom:1px solid var(--line)} tbody tr:hover{background:#fafcff} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} .kv{display:grid;grid-template-columns:96px 1fr;gap:6px 10px;font-size:14px} .kv dt{color:var(--txt3);font-size:13px} .kv dd{margin:0;word-break:break-all} /* ---------- 图片 ---------- */ .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .thumb{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line); background:var(--grey-l);cursor:zoom-in} .thumb.big{width:150px;height:150px} .lightbox{position:fixed;inset:0;background:rgba(15,23,42,.9);display:none; align-items:center;justify-content:center;z-index:100;padding:16px} .lightbox.on{display:flex} .lightbox img{max-width:100%;max-height:92vh;border-radius:8px} /* ---------- 审核台卡片 ---------- */ .reviewcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:14px;box-shadow:var(--shadow)} .reviewcard.mismatch{border-color:#e7b6b6;background:#fffafa} .review-actions{display:flex;gap:10px;position:sticky;bottom:0;background:#fff; padding:10px 0 2px;margin-top:12px;border-top:1px solid var(--line2)} .review-actions .btn{flex:1;padding:12px;font-size:15px} .presets{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0} .presets label{display:inline-flex;align-items:center;gap:4px;background:var(--grey-l); border-radius:20px;padding:4px 10px;font-size:13px;color:var(--txt);cursor:pointer;margin:0} .presets input{width:auto} /* ---------- 大字按钮组（反馈提交） ---------- */ .bigchoice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0} .choice{border:2px solid var(--line);border-radius:12px;padding:20px 12px;text-align:center; cursor:pointer;background:#fff;font-size:16px;font-weight:600;color:var(--txt2)} .choice.on{border-color:var(--brand);background:var(--brand-l);color:var(--brand)} .choice .sub{display:block;font-size:12px;font-weight:400;color:var(--txt3);margin-top:4px} /* ---------- 上传区 ---------- */ .uploader{border:2px dashed #cfd8e6;border-radius:10px;padding:16px;text-align:center; background:#fbfcfe;color:var(--txt2);font-size:14px} .uploader input{display:none} .preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .pv{position:relative;width:84px;height:84px} .pv img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line)} .pv button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%; border:1px solid #e7b6b6;background:#fff;color:var(--danger);cursor:pointer;font-size:13px; line-height:1;padding:0} /* ---------- 时间线 ---------- */ .tl{border-left:2px solid var(--line);margin-left:6px;padding-left:14px} .tl .t{position:relative;padding-bottom:14px} .tl .t:before{content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px; border-radius:50%;background:#fff;border:2px solid var(--brand)} .tl .th{font-size:13px;font-weight:600} .tl .tb{font-size:13px;color:var(--txt2);margin-top:2px} /* ---------- 步骤条 ---------- */ .steps{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap} .steps .s{padding:6px 14px;border-radius:20px;background:var(--grey-l);color:var(--txt2); font-size:13px} .steps .s.on{background:var(--brand);color:#fff;font-weight:600} .steps .s.done{background:var(--ok-l);color:var(--ok)} /* ---------- 登录页 ---------- 手机和 PC **共用同一套版式**：始终一张居中卡片，只按宽度微调留白和控件高度。 （教训：曾按 560px 拆成两套完全不同的样子 —— 窄一点的 PC 窗口 / 预览面板会掉进 "去掉卡片 + 放大按钮"的手机样式，看起来就像 PC 版被弄没了，按钮也大得离谱。 不要再用断点切换视觉语言，只调尺寸。） ⚠️ base.html 里
/