/* ========================================================================== 海南诺洁 · 样式 颜色取自 logo。所有管理页面统一三种版式： 列表页 .page 限宽居中；页头 + 卡片（工具栏 / 表格 / 底栏） 编辑页 .page.narrow 窄版居中；面包屑 + 标题 + 分区表单卡片 + 危险操作卡片 宽表格 .page.wide 配送表、月度统计，占满宽度 小表单一律放在弹窗（dialog.modal）里。 ========================================================================== */ :root{ --brand:#0d6ea8; --brand-deep:#0a4f86; --brand-cyan:#14b9ec; --brand-gray:#8c8c8c; --brand-50:#eef6fb; --brand-100:#d9ebf6; --accent:var(--brand); --accent-soft:#e3f1fa; --bg:#f4f6f9; --panel:#fff; --ink:#1d2433; --ink-2:#3b4556; --muted:#6b7688; --faint:#98a2b3; --line:#e4e7ec; --line-strong:#d0d5dd; --head:#f7f8fa; --ok:#067647; --ok-soft:#ecfdf3; --ok-line:#abefc6; --warn:#b54708; --warn-soft:#fffaeb; --warn-line:#fedf89; --err:#b42318; --err-soft:#fef3f2; --err-line:#fecdca; --info:#175cd3; --info-soft:#eff8ff; --info-line:#b2ddff; --lock:#5b21b6; --lock-soft:#f4f0ff; --r-sm:6px; --r:8px; --r-lg:12px; --shadow-card:0 1px 2px rgba(16,24,40,.05); --shadow-pop:0 20px 48px -12px rgba(16,24,40,.28); } *{box-sizing:border-box} html,body{margin:0} /* 滚动条的位置永远留着：内容短的页面没有滚动条、长的有，居中的版心会跟着左右差出半个滚动条， 从「月结账单」切到「应收账款」，标题和表格的左上角就挪了七八个像素 */ html{scrollbar-gutter:stable} body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased; font:14px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0;color:var(--ink);font-weight:650} h1{font-size:22px;line-height:1.3} h2{font-size:15px} p{margin:0} .muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12px} .num{font-variant-numeric:tabular-nums} .spacer{flex:1} .nowrap{white-space:nowrap} form.inline{display:inline} [hidden]{display:none !important} /* ---------- 顶栏 ---------- */ .topbar{display:flex;align-items:center;gap:4px;height:54px;padding:0 20px;background:#fff; border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;white-space:nowrap} .topbar .brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--brand-deep); margin-right:18px;letter-spacing:.5px} .topbar .brand img{width:22px;height:22px;object-fit:contain} .topbar .brand:hover{text-decoration:none} .mainnav{display:flex;align-items:center;gap:2px} .mainnav>a,.fin-pins a,.navgroup-btn,.topbar>a:not(.brand){display:inline-flex;align-items:center;gap:5px;height:34px;color:var(--ink-2); padding:0 12px;border-radius:var(--r);font-size:14px} .navgroup-btn{border:0;background:none;font:inherit;cursor:pointer} .mainnav>a:hover,.fin-pins a:hover,.navgroup-btn:hover,.navgroup.open .navgroup-btn,.topbar>a:not(.brand):hover{background:#f2f4f7;text-decoration:none} .mainnav>a.on,.fin-pins a.on,.navgroup-btn.on,.topbar>a.on{color:var(--brand-deep);background:var(--brand-50);font-weight:600} /* 本机 / 测试环境：顶栏深色，中间标「测试环境」（服务器上不显示） */ body.testenv{--bg:#a9b4c6} body.testenv .page-head .desc,body.testenv .crumbs,body.testenv .crumbs a{color:#3b4556} /* 底色深了，直接压在底色上的灰字也跟着加深 */ body.testenv .crumbs .sep{color:#6b7688} /* 测试环境：页面底色也深一档，一眼看得出不是正式系统 */ .topbar.testenv{background:#1f2a3c;border-bottom-color:#16202e} .topbar.testenv .brand,.topbar.testenv .mainnav>a,.topbar.testenv .fin-pins a,.topbar.testenv .navgroup-btn,.topbar.testenv>a:not(.brand){color:#e6ebf2} .topbar.testenv .navgroup-btn svg{color:#9aa7b8} .topbar.testenv .mainnav>a:hover,.topbar.testenv .fin-pins a:hover,.topbar.testenv .navgroup-btn:hover,.topbar.testenv .navgroup.open .navgroup-btn,.topbar.testenv>a:not(.brand):hover{background:rgba(255,255,255,.1)} .topbar.testenv .mainnav>a.on,.topbar.testenv .fin-pins a.on,.topbar.testenv .navgroup-btn.on,.topbar.testenv>a.on{color:#fff;background:rgba(255,255,255,.18)} .topbar.testenv .who,.topbar.testenv .logout{color:#c3cbd8 !important} .topbar.testenv .env-tag{margin-left:22px;height:24px;padding:0 12px;border-radius:999px;pointer-events:none; background:#f79009;color:#fff;font-size:12px;font-weight:700;letter-spacing:2px;display:inline-flex;align-items:center} @media (max-width:900px){.topbar.testenv .env-tag{margin-left:8px;letter-spacing:0;padding:0 8px}} .navgroup-btn svg{color:var(--faint);transition:transform .15s} .navgroup.open .navgroup-btn svg{transform:rotate(180deg)} /* 下拉菜单 */ .navgroup{position:relative} .navmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:168px;padding:6px;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow-pop);display:none;z-index:60} /* 鼠标从按钮移到菜单途中不要断开 */ .navmenu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px} .navgroup.open .navmenu{display:block;animation:pop .12s ease-out} .navmenu a{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:var(--r);color:var(--ink)} .navmenu a:hover{background:#f5f7fa;text-decoration:none} .navmenu a b{font-weight:500;font-size:14px} .navmenu a span{font-size:12px;color:var(--muted)} .navmenu a.on{background:var(--brand-50)} .navmenu a.on b{color:var(--brand-deep);font-weight:600} @media (max-width:720px){ .topbar{padding:0 10px;gap:0} .topbar .brand{margin-right:6px;font-size:0;gap:0} .topbar>a.who{display:none} .mainnav>a,.navgroup-btn{padding:0 8px} } .topbar .who{color:var(--muted) !important;font-size:13px} .topbar .logout{color:var(--muted);font-size:13px;padding:6px 8px} .save-state{font-size:12px;margin-right:10px} .save-state.saving{color:var(--warn)} .save-state.saved{color:var(--ok)} .save-state.error{color:var(--err);font-weight:600} /* ---------- 页面版式 ---------- */ main.page{max-width:1360px;margin:0 auto;padding:28px 24px 56px} /* 列表页统一一个宽度（和现金明细表一样）；配送表、统计、单价是全屏的 */ main.page.narrow{max-width:760px} main.page.wide{max-width:none;padding:16px 16px 32px} /* 宽表格页也有面包屑和标题，竖直位置和别的页一样（面包屑 82、标题 112、内容 160）； 左边跟着自己的表格走，不跟版心——这几页是占满窗口的 */ main.page.wide:not(.bill-page)>.page-head{margin-top:12px} main.page.narrow-guide{max-width:960px} /* 使用指南：一列，居中 */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap} .page-head .titles{display:flex;flex-direction:column;gap:6px;min-width:0} .page-head .desc{color:var(--muted);max-width:640px} .page-head .actions{display:flex;gap:8px;align-items:center} .crumbs{display:flex;align-items:center;gap:8px;min-height:21px;font-size:14px;color:var(--muted);margin-bottom:2px} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--brand);text-decoration:none} .crumbs .sep{color:var(--line-strong)} .crumbs .cur{color:var(--ink-2)} .title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px} .meta b{color:var(--ink-2);font-weight:500} .stack{display:flex;flex-direction:column;gap:16px} .split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start} @media (max-width:960px){.split{grid-template-columns:1fr}} /* ---------- 卡片 ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)} main.page>.card+.card,main.page>.card+.flash,main.page>.flash+.card{margin-top:16px} /* 上下相邻的卡片要留缝 */ .card-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap} .card-head h2{margin-right:auto} .card-head .sub{color:var(--muted);font-size:13px;font-weight:400;margin-left:6px} .card-body{padding:20px 16px} .card-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line); background:#fcfcfd;border-radius:0 0 var(--r-lg) var(--r-lg)} .card-foot .hint{margin-right:auto;color:var(--muted);font-size:13px} .card.danger{border-color:var(--err-line)} .card.danger .card-head{border-bottom-color:var(--err-line)} .card.danger h2{color:var(--err)} .card>.table-wrap:last-child table tr:last-child td{border-bottom:0} /* 表格直接顶着卡片的边时，表头的灰底是方角，会从卡片的圆角里戳出来一点。 让表格外面那层跟着卡片的内圆角裁掉（内圆角 = 卡片圆角 − 1px 边框） */ .card>.table-wrap:first-child{border-top-left-radius:calc(var(--r-lg) - 1px);border-top-right-radius:calc(var(--r-lg) - 1px)} .card>.table-wrap:last-child{border-bottom-left-radius:calc(var(--r-lg) - 1px);border-bottom-right-radius:calc(var(--r-lg) - 1px)} /* ---------- 按钮 ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px; border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink-2); font:inherit;font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(16,24,40,.05); transition:background .12s,border-color .12s,box-shadow .12s} .btn:hover{background:#f9fafb;text-decoration:none;border-color:#b9c0cb} .btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--brand-100)} .btn.primary{background:linear-gradient(180deg,#127cbb,var(--brand));border-color:var(--brand);color:#fff} .btn.primary:hover{filter:brightness(1.06)} .btn.danger{background:var(--err);border-color:var(--err);color:#fff} .btn.excel{background:linear-gradient(180deg,#26864f,#1d6f42);border-color:#1d6f42;color:#fff} /* Excel 的绿 */ .btn.excel:hover{filter:brightness(1.06);border-color:#1d6f42} .btn.danger:hover{filter:brightness(1.08)} .btn.danger-outline{color:var(--err);border-color:var(--err-line)} .btn.danger-outline:hover{background:var(--err-soft)} .btn.ghost{border-color:transparent;box-shadow:none;background:transparent;color:var(--ink-2)} .btn.ghost:hover{background:#f2f4f7} .btn.sm,.btn.small{height:30px;padding:0 10px;font-size:13px} .btn.block{width:100%} .btn:disabled{opacity:.55;cursor:default} .btn .plus{font-size:16px;line-height:1;margin-top:-1px} button.link{background:none;border:0;padding:0;color:var(--brand);font:inherit;cursor:pointer} button.link:hover{text-decoration:underline} .danger-link,button.danger-link{color:var(--err)} /* ---------- 表单 ---------- */ input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-strong); border-radius:var(--r);height:36px;padding:0 10px;transition:border-color .12s,box-shadow .12s} input::placeholder{color:var(--faint)} input:hover,select:hover{border-color:#b9c0cb} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-100)} input[type=radio],input[type=checkbox]{height:auto;box-shadow:none;accent-color:var(--brand)} input:disabled,select:disabled{background:#f9fafb;color:var(--muted)} input[type=search]{min-width:200px} .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px} .fields .full{grid-column:1/-1} @media (max-width:640px){.fields{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field>span:first-child,.field>.label{font-size:13px;font-weight:500;color:var(--ink-2)} .field input,.field select{width:100%} .field .hint{font-size:12px;color:var(--muted)} .check{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)} /* 是 / 否 这类二选一 */ .seg{display:inline-flex;padding:3px;background:#f2f4f7;border:1px solid var(--line);border-radius:var(--r);gap:2px;align-self:flex-start} .seg label{position:relative;cursor:pointer} .seg input{position:absolute;opacity:0;pointer-events:none} .seg span{display:block;min-width:56px;text-align:center;padding:5px 14px;border-radius:6px;color:var(--muted);font-size:13px;font-weight:600} .seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.1)} .seg input:focus-visible+span{box-shadow:0 0 0 3px var(--brand-100)} /* ---------- 工具栏、标签页 ---------- */ .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tabs{display:inline-flex;gap:2px;padding:3px;background:#f2f4f7;border-radius:var(--r)} .tabs a{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:6px;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap} /* 筛选条：标签页、下拉、搜索框、按钮同为 32px 高，排在同一条线上 */ .card-head .toolbar select,.card-head .toolbar input,.card-head .toolbar .btn{height:32px} .tabs a:hover{color:var(--ink);text-decoration:none} /* 选中的标签不再靠加粗区分：粗细一变宽度就变，后面的控件会跟着左右挪 */ .tabs a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.1)} .tabs a .n{margin-left:5px;color:var(--faint);font-weight:400} .tabs a.on .n{color:var(--muted)} .tabs a.warn .n{color:var(--warn)} .search{position:relative} .search input,.search input.sm{padding-left:32px} .search::before{content:"";position:absolute;left:11px;top:50%;width:11px;height:11px;margin-top:-7px; border:1.6px solid var(--faint);border-radius:50%} .search::after{content:"";position:absolute;left:21px;top:50%;width:5px;height:1.6px;margin-top:4px; background:var(--faint);transform:rotate(45deg)} /* ---------- 列表表格 ---------- */ .table-wrap{overflow-x:auto} table.data{width:100%;border-collapse:separate;border-spacing:0} table.data th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);background:var(--head); padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap} table.data td{padding:9px 16px;border-bottom:1px solid var(--line);vertical-align:middle} table.data th.r,table.data td.r{text-align:right} table.data th.c,table.data td.c{text-align:center} table.data td.actions{text-align:right;white-space:nowrap} table.data td.actions>*+*{margin-left:12px} table.data tbody tr{} table.data tbody tr:hover{background:#f9fafb} table.data tr.off td{color:var(--muted)} table.data tr.off td a{color:var(--muted)} table.data .strong{font-weight:600;color:var(--ink);white-space:nowrap} table.data a.strong:hover{color:var(--brand)} table.data .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px} .table-empty{padding:48px 20px;text-align:center;color:var(--muted)} .table-empty b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:4px} .pager{display:flex;align-items:center;gap:12px} /* ---------- 标记 ---------- */ .badge,.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px; font-size:12px;font-weight:500;white-space:nowrap;background:#f2f4f7;color:var(--ink-2);border:1px solid transparent} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.off{background:#f2f4f7;color:var(--muted)} .pill.lock,.badge.lock{background:var(--lock-soft);color:var(--lock)} .badge.warn,.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)} .badge.brand{background:var(--brand-50);color:var(--brand-deep)} .badge.soft{background:transparent;border-color:var(--line);color:var(--muted)} a.badge:hover{text-decoration:none;filter:brightness(.97)} /* ---------- 提示条 ---------- */ /* 提示条：文字里可能有加粗等行内标签，不能用 flex（会被拆成几列），图标绝对定位 */ .flash{position:relative;display:block;padding:11px 14px 11px 40px;border-radius:var(--r);margin-bottom:16px; border:1px solid;font-size:14px} .flash::before{position:absolute;left:13px;top:12px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center; font-size:12px;font-weight:700;color:#fff} .flash.ok{background:var(--ok-soft);border-color:var(--ok-line);color:#05603a} .flash.ok::before{content:"✓";background:var(--ok)} .flash.warn{background:var(--warn-soft);border-color:var(--warn-line);color:#93370d} .flash.warn::before{content:"!";background:#f79009} .flash.error{background:var(--err-soft);border-color:var(--err-line);color:#912018} .flash.error::before{content:"!";background:var(--err)} .flash.info{background:var(--info-soft);border-color:var(--info-line);color:#1849a9} .flash.info::before{content:"i";background:#2e90fa;font-family:Georgia,serif} .card-body>.flash:last-child{margin-bottom:0} /* ---------- 弹窗 ---------- */ /* 弹窗打开时，背后的页面不跟着滚。body 定住并往上挪同样的距离，视觉上不动 （只设 overflow:hidden 的话浏览器会把滚动位置归零，背后的列表会跳到最上面） */ html.modal-open,html.modal-open body{overflow:hidden} html.modal-open body{position:fixed;left:0;right:0;width:100%} dialog{overscroll-behavior:contain} /* 弹窗内部滑到头，也不把外面带着滚 */ dialog.modal{border:0;border-radius:14px;padding:0;width:min(460px,calc(100vw - 32px));color:var(--ink); box-shadow:var(--shadow-pop)} dialog.modal::backdrop{background:rgba(16,24,40,.45)} dialog.modal[open]{animation:pop .16s ease-out} @keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}} .modal-head{padding:20px 24px 4px} .modal-head h2{font-size:17px} .modal-head p{color:var(--muted);margin-top:4px;font-size:13px} .modal-body{padding:16px 24px 8px;display:flex;flex-direction:column;gap:16px} .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px} .modal-foot .left{margin-right:auto} /* 配送表里两个老弹窗的写法 */ dialog.modal>form[method=dialog]{padding:22px 24px} dialog.modal>form[method=dialog] h2{font-size:17px;margin:0 0 6px} dialog.modal>form[method=dialog] label{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px;font-size:13px;color:var(--ink-2)} dialog.modal>form[method=dialog] select{width:100%} .modal-actions{display:flex;gap:10px;align-items:center;margin:18px 0 10px;flex-wrap:wrap} /* ---------- 其他 ---------- */ .perm{width:100%;border-collapse:collapse;font-size:13px} .perm th,.perm td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:center} .perm th:first-child,.perm td:first-child{text-align:left} .perm th{color:var(--muted);font-weight:500} .perm td.yes{color:var(--ok);font-weight:700} .center-box{min-height:60vh;display:grid;place-items:center;text-align:center} .center-box .code{font-size:56px;font-weight:700;color:var(--brand-100);line-height:1} ul.plain{margin:0;padding-left:18px;color:var(--ink-2)} ul.plain li+li{margin-top:4px} /* ---------- 配送表格（宽表，录入用，紧凑） ---------- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)} .scroll{overflow:auto;max-height:calc(100vh - 150px)} .grid{border-collapse:separate;border-spacing:0} .grid th,.grid td{text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)} .grid td.text,.grid th.text{text-align:left} .grid th{background:var(--head);font-size:12px;font-weight:600;color:#475467;position:sticky;top:0;z-index:5;height:34px} /* ---------- 配送表页面 ---------- */ /* 工具栏收进表格卡片顶部，和表格连成一体；表格铺满宽度 */ .sheet-panel{display:flex;flex-direction:column} .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap; padding:10px 14px;border-bottom:1px solid var(--line);background:#fff} .sheet-date,.sheet-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .btn.icon{width:30px;padding:0;font-size:18px;line-height:1} .date-title{position:relative;display:flex;align-items:baseline;gap:8px;padding:2px 8px;border-radius:var(--r);cursor:pointer} .date-title:hover{background:#f2f4f7} .date-title b{font-size:19px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums} .date-title span{font-size:13px;color:var(--muted)} /* 原生日期框藏在标题下面，点标题时用 showPicker() 弹出日历 */ .date-title input{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0} .sheet-total{display:inline-flex;align-items:baseline;gap:5px;padding-left:14px;margin-left:4px;border-left:1px solid var(--line); color:var(--muted);font-size:13px;white-space:nowrap} .sheet-total b{font-size:18px;color:var(--brand-deep);font-weight:650} /* 表格在剩下的高度里自己滚：上面有多少东西（标题、提醒、封账提示）每页不一样， --scroll-top 由脚本量出来；量不到就按顶栏 + 标题 + 工具条估 */ .sheet-panel .scroll{max-height:calc(100vh - var(--scroll-top,284px));scrollbar-gutter:stable} /* 一开始就留出滚动条的位置，表格画出来后宽度不变 */ .sheet-foot{padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);background:#fcfcfd} .grid.sheet{width:100%;table-layout:fixed} .grid.sheet th.c-vehicle{width:108px} .grid.sheet th.c-name{width:150px} .grid.sheet th.c-region{width:82px} .grid.sheet th.c-shared{width:46px} .grid.sheet th.c-crew{width:82px} /* 配送表：左边几列收窄（总宽 = deliveries.py 的 SHEET_LEFT_WIDTH），品类列的宽度由页面按内容给，不用左右滑 */ #grid.grid.sheet th.c-name{width:176px} #grid.grid.sheet th.c-crew{width:78px} /* 配送表：客户和司机之间的「时段」——上午 / 下午两个小按钮，选中的填色 */ #grid.grid.sheet th.c-shift{width:92px} .grid td.c-shift{padding:0 3px;text-align:center;white-space:nowrap;overflow:hidden} .shift-seg{display:inline-flex;gap:3px;vertical-align:middle} .shift-seg button{height:22px;padding:0 5px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font:inherit; font-size:12px;line-height:1;color:var(--muted);cursor:pointer;white-space:nowrap} .shift-seg button:hover{border-color:var(--brand);color:var(--brand)} .shift-seg button[aria-pressed="true"]{color:#fff;border-color:transparent} .shift-seg button[data-shift="am"][aria-pressed="true"]{background:#2f6feb} .shift-seg button[data-shift="pm"][aria-pressed="true"]{background:#e07b16} #grid.grid.sheet th.c-total{width:62px} #grid.grid.sheet input.q{padding:0 5px} /* 合计和各品类不设宽度：固定布局下平分剩下的宽度，自然一样宽 */ .grid.sheet .c-total,.grid.sheet .c-qty{width:auto;min-width:0;max-width:none} /* 配送表、生产表最右边的空列：吃掉多出来的宽度，前面每一列才能固定在指定的像素上 */ .grid.sheet th.c-fill{width:auto;min-width:0;max-width:none;padding:0;border-left:0;border-right:0} .grid.sheet th.c-qty{font-size:11.5px;letter-spacing:-.02em} .grid.sheet td.c-name,.grid.sheet td.c-region{overflow:hidden;text-overflow:ellipsis} /* 配送表 */ .grid td,.grid th{border-right:1px solid var(--line);padding:0 5px;height:30px} .grid .sticky-l,.grid .sticky-l2{position:sticky;z-index:3;background:#fff} .grid .sticky-l{left:0;width:108px;min-width:108px;max-width:108px} .grid .sticky-l2{left:108px;border-right:1px solid var(--line-strong)} .grid thead .sticky-l,.grid thead .sticky-l2,.grid tfoot .sticky-l,.grid tfoot .sticky-l2{z-index:7;background:var(--head)} .grid .c-name{min-width:150px;max-width:190px;overflow:hidden;text-overflow:ellipsis} .grid .c-region{min-width:62px;color:var(--muted)} .grid .c-shared{min-width:38px;text-align:center} .grid .c-crew{min-width:78px} /* 月度统计等其他宽表：按内容排版，合计和品类同宽 */ .grid:not(.sheet){width:auto} .panel.scroll:has(> table.grid){width:fit-content;max-width:100%} .grid:not(.sheet) .c-total,.grid:not(.sheet) .c-qty{width:62px;min-width:62px;max-width:62px} .grid .c-total{font-weight:600;background:#fafbfc} .grid .c-qty{padding:0} .grid th.c-qty{padding:0 3px} .grid th small{display:block;font-size:10px;color:var(--err);font-weight:normal;line-height:1} .grid td.c-qty.num{padding:0 6px} .grid td.ro{background:#f6f7f9;color:var(--muted)} .grid tfoot th{position:sticky;bottom:0;z-index:5;border-top:1px solid var(--line-strong)} /* 车辆列：同一辆车合并成一格，每辆车之间加粗分隔 */ .grid tbody.group>tr:first-child>td{border-top:2px solid #c9d3de} .grid td.c-vehicle{vertical-align:top;text-align:left;padding:0;background:#f3f7fb;border-right:1px solid var(--line-strong)} .grid tbody.pickup td.c-vehicle{background:#f6f4fb} .grid tbody.unassigned td.c-vehicle{background:var(--warn-soft)} .grid td.drop-hint{text-align:left;color:var(--muted);font-size:13px;padding-left:14px;height:42px} .grid tbody tr[data-customer]:hover td:not(.c-vehicle):not(.person){background:#f5f9ff} .grid tr.hit td:not(.c-vehicle){background:#fff3bf !important} .grid select.crew{border-color:transparent;background:transparent;height:26px;padding:0 2px;width:100%;cursor:pointer} .grid select.crew:hover{border-color:var(--line-strong)} .grid select.crew:focus{background:#fff} .grid input.q{width:100%;height:29px;border:0;border-radius:0;background:transparent;text-align:right; padding:0 6px;font-variant-numeric:tabular-nums} .grid input.q:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff} .grid input.q.dirty{background:var(--warn-soft)} .grid input.q.bad{background:var(--err);color:#fff;font-weight:700;outline:2px solid #7a1a12;outline-offset:-2px;animation:shake .3s} @keyframes shake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}} /* 醒目的提示条：页面或弹窗的顶部正中 */ .toast{position:fixed;z-index:1000;top:18px;left:50%;transform:translateX(-50%);max-width:min(720px,calc(100vw - 48px)); padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;color:#fff;background:var(--err); box-shadow:0 12px 32px -8px rgba(180,35,24,.55);animation:toast-in .18s ease-out} .toast[hidden]{display:none} .toast.ok{background:var(--ok)} dialog .toast{position:absolute;top:12px} @keyframes toast-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}} .badge.temp{background:#e0f2fe;color:#075985;font-size:11px;padding:0 5px;margin-left:4px;vertical-align:1px} /* 拖动换车 */ .handle{display:inline-block;width:14px;margin-right:4px;color:#98a2ad;cursor:grab;user-select:none;text-align:center;border-radius:3px} .handle:hover,.handle:focus-visible{color:var(--brand);background:var(--accent-soft);outline:none} .grid tbody.drop-only{display:none} .grid.dragging tbody.drop-only{display:table-row-group} .grid.dragging tbody.group{transition:background .1s} .grid tbody.group.drop-over td{background:#e0f0fb !important} .grid tbody.group.drop-over>tr:first-child>td{border-top-color:var(--brand)} .grid tr.drag-source td{opacity:.45} /* 拖动时的插入线：放在这一行前面 / 后面 */ .grid tr.drop-before>td:not(.c-vehicle){box-shadow:inset 0 3px 0 var(--brand)} .grid tr.drop-after>td:not(.c-vehicle){box-shadow:inset 0 -3px 0 var(--brand)} .move-where{margin:10px 0 0;padding:8px 12px;border-radius:var(--r);background:var(--brand-50);color:var(--brand-deep);font-weight:500} .weekday{color:var(--muted)} #find{width:150px;min-width:0} /* 筛选 */ .filters{display:inline-flex;align-items:center;gap:6px} .filters select{height:30px} .filters.on select{border-color:var(--brand);background:var(--accent-soft)} .f-status{font-size:13px;color:var(--brand-deep);white-space:nowrap} .grid tbody[hidden],.grid tr[hidden]{display:none} /* ---------- 登录页：浅色背景，登录卡片居中 ---------- */ body.auth{min-height:100vh;background: radial-gradient(60% 50% at 12% 8%,rgba(20,185,236,.16) 0%,rgba(20,185,236,0) 70%), radial-gradient(55% 45% at 92% 96%,rgba(13,110,168,.14) 0%,rgba(13,110,168,0) 70%), linear-gradient(160deg,#eef6fb 0%,#f7fbfd 45%,#ffffff 100%)} main.auth-page{position:relative;min-height:100vh;padding:0;display:flex;flex-direction:column} /* 背景装饰：大水滴水印 + 水波纹，呼应 logo，都很淡，不抢内容 */ .auth-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0} .auth-watermark{position:absolute;right:-60px;top:-40px;height:min(78vh,720px);width:auto;opacity:.06;transform:rotate(-8deg)} .ripples{position:absolute;border-radius:50%} .ripples span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(13,110,168,.12)} .ripples.r1{left:-200px;bottom:-220px;width:620px;height:620px} .ripples.r1 span:nth-child(2){inset:90px;border-color:rgba(13,110,168,.09)} .ripples.r1 span:nth-child(3){inset:180px;border-color:rgba(13,110,168,.07);background:rgba(20,185,236,.03)} .ripples.r2{right:8%;top:14%;width:180px;height:180px} .ripples.r2 span:nth-child(2){inset:36px;border-color:rgba(13,110,168,.08)} @media (prefers-reduced-motion:no-preference){ .ripples span{animation:ripple 9s ease-in-out infinite} .ripples span:nth-child(2){animation-delay:-3s} .ripples span:nth-child(3){animation-delay:-6s} } @keyframes ripple{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.6}} .auth-center{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:48px 16px 24px} .auth-card{width:min(420px,100%);padding:40px 40px 32px;background:rgba(255,255,255,.92); border:1px solid rgba(13,110,168,.10);border-radius:18px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 60px -18px rgba(13,70,120,.22);backdrop-filter:blur(6px)} .auth-logo{display:block;width:188px;height:auto;margin:0 auto 26px} .auth-card h1{margin:0;text-align:center;font-size:22px;font-weight:700;letter-spacing:.06em;color:var(--ink)} .auth-sub{margin:8px 0 28px;text-align:center;font-size:13px;color:var(--muted)} .auth-card .flash{margin:0 0 18px} .auth-card .field{display:flex;flex-direction:column;gap:7px;margin:0 0 18px;font-size:13px;font-weight:600;color:#3d444d} .auth-card .field input{height:46px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;font-size:15px; background:#fbfcfd;transition:border-color .15s,box-shadow .15s,background .15s} .auth-card .field input:hover{border-color:#b7c0ca} .auth-card .field input:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(13,110,168,.14)} .pw-wrap{position:relative;display:block} .pw-wrap input{width:100%;padding-right:46px} .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:8px; background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center} .pw-toggle:hover{background:#eef2f6;color:var(--ink)} .pw-toggle:focus-visible{outline:2px solid var(--brand)} .pw-toggle[aria-pressed="true"] .slash{display:none} .caps-hint{color:var(--warn);font-weight:normal} .btn.lg{height:48px;border-radius:10px;font-size:16px;font-weight:600;letter-spacing:.2em;margin-top:8px; box-shadow:0 6px 16px rgba(13,110,168,.22)} .btn.primary:disabled{opacity:.7;cursor:progress} .auth-help{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted)} .auth-copy{position:relative;z-index:1;padding:0 16px 22px;text-align:center;font-size:12px;color:#8a94a0} @media (max-width:520px){ .auth-center{place-items:start center;padding-top:8vh} .auth-card{padding:32px 22px 26px;border-radius:16px} .auth-logo{width:164px} .auth-watermark{height:52vh;right:-90px;opacity:.05} } select.sm,input.sm{height:30px;font-size:13px;padding:0 8px} /* 配送表、月度统计：表头文字一律居中 */ .grid thead th,.grid thead th.text{text-align:center} /* 车辆格：居中；车名 → 车牌 → 家数/件数 → 改人员。长分组里滚动时整块跟着停在顶部 */ .grid .vcell{position:sticky;top:34px;display:flex;flex-direction:column;align-items:center;gap:6px; padding:12px 8px;white-space:normal;text-align:center} .grid .vname{font-size:15px;font-weight:650;color:var(--brand-deep);letter-spacing:.5px} .grid tbody.unassigned .vname{color:var(--warn)} .grid tbody.pickup .vname{color:var(--lock)} /* 蓝牌：蓝底白字、内白边 */ .grid .plate{display:inline-block;padding:1px 6px;border-radius:3px;background:linear-gradient(180deg,#2458b8,#1a47a0); color:#fff;font-size:12px;font-weight:600;line-height:17px;letter-spacing:.5px;white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 0 0 1px #1a47a0;font-variant-numeric:tabular-nums} .grid .vstats{display:grid;grid-template-columns:1fr 1fr;width:100%;padding-top:6px;margin-top:1px;border-top:1px solid #dde5ee} .grid .vstats span{display:flex;flex-direction:column;align-items:center;line-height:1.2} .grid .vstats span+span{border-left:1px solid #dde5ee} .grid .vstats b{font-size:14px;font-weight:650;color:var(--ink)} .grid .vstats small{font-size:11px;color:var(--muted)} .grid .vbtn{width:100%;height:24px;margin-top:2px;border:1px solid #c9d6e3;border-radius:6px;background:#fff; color:var(--brand);font:inherit;font-size:12px;cursor:pointer} .grid .vbtn:hover{background:var(--brand-50);border-color:var(--brand)} /* 列表表格按比例定列宽（各页用 colgroup 指定），不随内容长短忽宽忽窄； 窄屏上保持最小宽度、在卡片里横向滚动 */ table.data.fixed{table-layout:fixed;min-width:680px} table.data.fixed td{overflow:hidden;text-overflow:ellipsis} table.data.fixed td.actions{overflow:visible} /* 列表最后一列：只有一个「编辑」按钮，各页宽度一致 */ table.data th.act,table.data td.act{width:96px;text-align:right;white-space:nowrap} /* 弹窗里的只读信息、状态操作区（停用 / 失效 / 删除 / 启用） */ .modal-info{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:12px 14px;border-radius:var(--r); background:#f8fafc;border:1px solid var(--line);font-size:13px} .modal-info dt{color:var(--muted)} .modal-info dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums} .modal-extra{padding:14px 24px 20px;border-top:1px solid var(--line);background:#fcfcfd;border-radius:0 0 14px 14px} .modal-extra form{display:flex;align-items:center;justify-content:flex-end;gap:8px 10px;flex-wrap:wrap} .modal-extra .what{flex:1 1 100%;font-size:13px;color:var(--muted)} .modal-extra .what b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:2px} .modal-extra.danger .what b{color:var(--err)} .modal-extra input[type=date],.modal-extra input[type=text]{height:32px} dialog.modal>form.main .modal-foot{padding-bottom:18px} table.data .yes{color:var(--ok);font-weight:700} /* 日志内容可能很长，允许换行，不省略 */ table.data.fixed td.wrap{white-space:normal;overflow:visible;text-overflow:clip} /* 配送员颜色：12 种柔和的底色，配同色系深色文字，保证看得清 */ .grid td.person{background:var(--pbg);color:var(--pfg);font-weight:500;box-shadow:inset 3px 0 0 var(--pbar)} .grid td.person select.crew{color:inherit;font-weight:inherit} .grid td.person select.crew:hover{border-color:var(--pbar)} .grid tr.hit td.person{background:var(--pbg) !important} .p0 {--pbg:#e6f0ff;--pfg:#1e4fb4;--pbar:#6f9cf0} .p1 {--pbg:#e3f6ea;--pfg:#17693e;--pbar:#6fc794} .p2 {--pbg:#fff2d9;--pfg:#94580a;--pbar:#f0b44e} .p3 {--pbg:#efeaff;--pfg:#5b36b3;--pbar:#a58cf0} .p4 {--pbg:#fde8f1;--pfg:#a8235e;--pbar:#ec8ab4} .p5 {--pbg:#dff5f3;--pfg:#11685f;--pbar:#5cc4b8} .p6 {--pbg:#ffeadb;--pfg:#a8420f;--pbar:#f59a63} .p7 {--pbg:#e7e9fd;--pfg:#3a3fa8;--pbar:#8b91ee} .p8 {--pbg:#eef6d8;--pfg:#4c6812;--pbar:#a6cc54} .p9 {--pbg:#ffe6e8;--pfg:#b0283a;--pbar:#f08995} .p10{--pbg:#dcf3fa;--pfg:#0d6480;--pbar:#5cbfdc} .p11{--pbg:#eceff3;--pfg:#3b4656;--pbar:#a3adbb} /* ---------- 单价 ---------- */ .grid.prices th.c-name{width:140px} .grid.prices th.c-region{width:64px} .grid.prices th.c-min{width:64px} .grid.prices .sticky-l{width:140px;min-width:140px;max-width:140px;border-right:1px solid var(--line-strong)} .grid.prices td.c-name{overflow:hidden;text-overflow:ellipsis} .grid.prices td.c-name a.cname{color:var(--ink)} .grid.prices td.c-name a.cname:hover{color:var(--brand)} .grid.prices td.c-name .badge{height:18px;padding:0 5px;font-size:11px;margin-left:4px} .grid.prices th.c-five{width:54px} .grid.prices td.c-min{background:#fafbfc} .grid.prices td.c-five{background:#f6f7f9;color:var(--ink-2);padding:0 6px} .grid.prices tr.off td{color:var(--muted)} .grid.prices tr.unpriced td.c-name{box-shadow:inset 3px 0 0 #f79009} .grid.prices tbody tr:hover td{background:#f5f9ff} .sheet-foot b{color:var(--ink-2);font-weight:600} /* 月度统计 */ .grid.stats th.c-name{width:112px} .grid.stats th.c-region{width:56px} .grid.stats th.c-shared{width:34px} .grid.stats th.c-days{width:42px} .grid.stats th.c-total{width:64px} .grid.stats .sticky-l{min-width:0;max-width:none;border-right:1px solid var(--line-strong)} .grid.stats th,.grid.stats td{padding:0 4px} .grid.stats th.sortable .arrow{margin-left:-1px} .grid.stats td.c-name{overflow:hidden;text-overflow:ellipsis} .grid.stats td.c-days{color:var(--muted)} .grid.stats td.c-name .badge{height:18px;padding:0 5px;font-size:11px;margin-left:4px} .grid.stats tbody tr:hover td{background:#f5f9ff} .grid.stats tr.off td{color:var(--muted)} /* 月度统计 · 收入列（两个视图同宽，品类列才对得齐）。收入、合计是汇总块：不铺底色，只有合计后面一条粗线把它和品类隔开 */ .grid.stats th.c-rev{width:92px} .grid.stats td.c-rev{color:var(--brand-deep);font-weight:600;background:transparent} .grid.stats td.c-rev.unpriced{background:#fff3d6;color:#8a5a00} .grid.stats td.c-rev a.cell-link{display:block;color:inherit;margin:0 -5px;padding:0 5px} .grid.stats td.c-rev a.cell-link:hover{background:var(--brand-50);text-decoration:none} .grid.stats td.c-rev.unpriced a.cell-link:hover{background:#ffe9b0} .grid.stats .yen{font-style:normal;font-weight:400;opacity:.55;margin-right:1px} .grid.stats tfoot th.c-rev{color:var(--brand-deep)} .grid.stats td.c-total{background:transparent;color:var(--ink);font-weight:600} .grid.stats .c-total{border-right:1px solid var(--line-strong)} .grid.stats td.c-days,.grid.stats td.c-shared{text-align:center} .grid.stats td.c-shared{color:var(--muted)} .sheet-foot .warn-text{color:var(--warn);font-weight:600} .sheet-total+.sheet-total{margin-left:0} /* 可排序的表头：第一次点从大到小，再点从小到大，第三次回到默认顺序 */ .grid th.sortable a{display:flex;align-items:center;justify-content:center;gap:2px;height:100%;color:inherit} .grid th.sortable a:hover{color:var(--brand);text-decoration:none} .grid th.sortable .arrow{font-size:10px;color:var(--faint)} .grid th.sortable.on a,.grid th.sortable.on .arrow{color:var(--brand-deep);font-weight:700} /* 月度统计 · 按日期 */ /* 品类前面几列的总宽两个视图一样（按客户 112+34+92+42+64，按日期 128+92+60+64，都是 344 = stats.py 的 LEFT_WIDTH）， 品类列又是按内容定的同一套宽度，所以切换视图时品类列不动 */ .grid.stats.daily th.c-date{width:128px} .grid.stats.daily th.c-homes{width:60px} .grid.stats.daily td.c-date,.grid.stats.daily td.c-homes{text-align:center} .grid.stats.daily th.c-date{text-align:center} .grid.stats.daily td.c-date .wd{margin-left:8px;font-size:12px;color:var(--muted)} .grid.stats.daily td.c-date .wd.weekend{color:var(--brand)} .grid.stats.daily td.c-date b{display:inline-block;width:50px;text-align:right;font-weight:600;color:var(--ink)} .view-tabs{margin-left:8px} .grid.stats.daily tr.blank td{color:var(--faint);background:#fafbfc} .grid.stats.daily tfoot tr:first-child th{bottom:30px} .grid.stats.daily tfoot tr.avg th{border-top:0;color:var(--muted);font-weight:500} .grid.stats.daily tfoot tr.avg th{height:30px} /* 配送清单弹窗 */ /* 高度固定：换司机时清单长短不一样，弹窗不能跟着变大变小 */ dialog.modal.manifest{width:min(760px,calc(100vw - 32px));height:min(720px,calc(100vh - 48px));display:flex;flex-direction:column} dialog.modal.manifest:not([open]){display:none} .mf-head{position:relative;padding:20px 24px 14px;border-bottom:1px solid var(--line)} .mf-head h2{font-size:17px} .mf-head h2 .muted{font-weight:400;font-size:14px;margin-left:6px} .mf-head p{margin-top:4px;font-size:13px} .mf-close{position:absolute;top:16px;right:16px;font-size:18px} .mf-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:0;flex:1} .mf-drivers{border-right:1px solid var(--line);overflow:auto;padding:8px;background:#fafbfc} .mf-drivers button{display:flex;flex-direction:column;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:var(--r); background:transparent;font:inherit;color:var(--ink-2);cursor:pointer;gap:2px} .mf-drivers button:hover{background:#f2f4f7} .mf-drivers button.on{background:var(--brand-50);color:var(--brand-deep)} .mf-drivers button b{font-weight:600;color:inherit} .mf-drivers button span{font-size:12px;color:var(--muted)} .mf-main{min-height:0;display:flex;flex-direction:column} .mf-text{margin:0;padding:16px 20px;overflow:auto;flex:1;min-height:0;font:13px/1.7 inherit; font-family:inherit;white-space:pre-wrap;color:var(--ink)} .mf-empty{flex:1;display:grid;place-items:center;color:var(--muted)} dialog.modal.manifest .modal-foot{border-top:1px solid var(--line);align-items:center} @media (max-width:640px){.mf-body{grid-template-columns:1fr}.mf-drivers{display:flex;gap:4px;border-right:0;border-bottom:1px solid var(--line)} .mf-drivers button{width:auto;white-space:nowrap}} /* ---------- 月结单 ---------- */ table.bill-list th.sortable a{color:inherit;display:inline-flex;gap:3px} table.bill-list th.sortable a:hover{color:var(--brand);text-decoration:none} table.bill-list th.sortable.on a{color:var(--ink);font-weight:600} table.bill-list th.sortable .arrow{font-size:11px} table.bill-list td.neg{color:var(--err)} table.bill-list tfoot th{padding:9px 16px;border-top:1px solid var(--line-strong);background:var(--head);font-size:13px;color:var(--ink)} .bill-nav{display:inline-flex;align-items:center;gap:6px;margin-right:6px} span.btn[aria-disabled]{opacity:.4;pointer-events:none} .panel.bill{padding-top:16px} .bill-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 20px 8px} .bill-logo{height:34px;width:auto;justify-self:start} .bill-head h1{font-size:20px;font-weight:700;text-align:center;letter-spacing:.04em} .bill-who{justify-self:end;text-align:right;display:flex;flex-direction:column} .bill-who b{font-size:15px} .bill-who span{font-size:13px;color:var(--muted)} .bill-bank{display:grid;grid-template-columns:max-content 1fr;gap:1px 6px;margin:0;padding:0 20px 12px;font-size:12.5px;color:var(--ink-2)} .bill-bank dt{color:var(--muted)} .bill-bank dd{margin:0} .grid.billgrid th.c-day{width:110px} .grid.billgrid .sticky-l{width:110px;min-width:110px;max-width:110px;border-right:1px solid var(--line-strong)} .grid.billgrid th.c-min{width:78px} .grid.billgrid td.c-day{text-align:left} .grid.billgrid td.c-day b{font-weight:600} .grid.billgrid td.c-day .wd{margin-left:6px;font-size:11px;color:var(--faint)} .grid.billgrid tr.blank td{color:var(--faint)} .grid.billgrid tr.blank td.c-day{color:var(--faint)} .grid.billgrid tr.blank td.c-day b{color:var(--faint);font-weight:500} .grid.billgrid tr.price-row td{background:#f7f8fa;color:var(--ink-2);font-size:12px} .grid.billgrid tr.price-row td.unpriced{background:var(--warn-soft)} .grid.billgrid td.c-min{background:#fafbfc;color:var(--ink-2);font-size:12px} .grid.billgrid td.c-min.raised{color:var(--brand-deep);font-weight:600} .grid.billgrid a.cell-link{display:block;color:var(--ink);padding:0 6px;margin:0 -6px} .grid.billgrid a.cell-link:hover{background:var(--brand-50);color:var(--brand);text-decoration:none} .grid.billgrid tr.returns-row td{background:#fffdf5} .grid.billgrid tr.returns-row td.c-day{font-weight:600;color:var(--warn)} .grid.billgrid tr.sum-row td,.grid.billgrid tr.fee-row td{background:#f7f8fa;font-weight:600} .grid.billgrid tr.fee-row td{color:var(--ink-2)} .grid.billgrid tr.total-row td{height:40px;border-top:2px solid var(--line-strong)} .grid.billgrid tr.total-row td.c-day,.grid.billgrid tr.sum-row td.c-day,.grid.billgrid tr.fee-row td.c-day{font-weight:600} .grid.billgrid #bill-total{font-size:18px;color:var(--brand-deep);margin-right:12px} .grid.billgrid tr.note-row td{height:40px} .grid.billgrid tr.note-row input{width:min(520px,100%);height:30px} /* ---------- 车辆档案 ---------- */ .due-cells{display:flex;flex-wrap:wrap;gap:4px} /* 车辆列表：年检、交强险、商业险竖着排，一行一项，缺的标红 */ .due-list{list-style:none;margin:0;padding:4px 0;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:20px} .due-list li{display:flex;align-items:center;gap:10px;white-space:nowrap} .due-list li span{width:44px;flex:none;color:var(--muted);font-size:12px} .due-list li b{font-weight:500;color:var(--ink)} .due-list li em{font-style:normal;font-size:12px;padding:0 7px;border-radius:999px;line-height:18px} .due-list li.soon b,.due-list li.soon em{color:var(--warn)} .due-list li.soon em{background:var(--warn-soft)} .due-list li.urgent b,.due-list li.expired b,.due-list li.urgent em,.due-list li.expired em{color:var(--err);font-weight:600} .due-list li.urgent em,.due-list li.expired em{background:var(--err-soft)} .due-list li.missing b{color:var(--err);font-weight:600;font-size:12px;padding:0 7px;border-radius:999px;line-height:18px;background:var(--err-soft)} tr.off .due-list li b,tr.off .due-list li span{color:var(--faint)} .split-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .due{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:12px; background:#f2f4f7;color:var(--muted);white-space:nowrap} .due b{font-weight:600;color:inherit} .due.soon{background:var(--warn-soft);color:var(--warn)} .due.urgent,.due.expired{background:var(--err-soft);color:var(--err)} .due.expired{font-weight:600} .vehicle-alerts a.alert-item{display:inline-block;margin:2px 4px 2px 0;padding:1px 8px;border-radius:999px;background:#fff; border:1px solid var(--warn-line);color:#93370d;font-size:13px} .vehicle-alerts a.alert-item.urgent,.vehicle-alerts a.alert-item.expired{border-color:var(--err-line);color:var(--err);font-weight:600} .vehicle-alerts a.alert-item:hover{text-decoration:none;background:var(--warn-soft)} /* 每日配送：同一个黄底提醒框，只是不占整行，缩成内容那么宽放在标题右边 */ .page-head .flash.inline-alerts{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:6px 12px 6px 36px;max-width:60vw;font-size:13px} /* 里面的车辆标签是带边框的小胶囊，框比一行字高：感叹号按整个框竖直居中，不再贴着顶上 */ .page-head .flash.inline-alerts::before{top:50%;transform:translateY(-50%);left:11px;width:16px;height:16px;font-size:11px} .page-head .flash.inline-alerts a.alert-item{margin:1px 0 1px 4px} .due-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:16px} .due-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);background:#fff} .due-card span{font-size:12px;color:var(--muted)} .due-card b{font-size:15px;font-variant-numeric:tabular-nums} .due-card small{font-size:12px;color:var(--muted)} .due-card.soon{border-color:var(--warn-line);background:var(--warn-soft)} .due-card.soon small{color:var(--warn)} .due-card.urgent,.due-card.expired{border-color:var(--err-line);background:var(--err-soft)} .due-card.urgent small,.due-card.expired small{color:var(--err);font-weight:600} .due-card.missing{border-color:var(--err-line);border-style:dashed;background:#fff} .due-card.missing b,.due-card.missing small{color:var(--err)} fieldset.card{margin:0;padding:0;border:1px solid var(--line);min-width:0} fieldset.card:disabled input,fieldset.card:disabled .seg span{color:var(--ink-2)} .sub-block{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)} .sub-block h3{font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 10px} .fields.three{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:640px){.fields.three{grid-template-columns:1fr}} .file-list{display:flex;flex-direction:column;gap:0;padding:4px 20px} .file-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .file-row:last-child{border-bottom:0} .file-row .file-name{width:110px;font-weight:500;color:var(--ink-2)} .file-row .file-link{font-weight:500} .file-form label.btn{cursor:pointer} /* 手机上：结账单抬头竖排；月结单列表只留客户、天数、件数、金额 */ @media (max-width:640px){ .bill-head{grid-template-columns:auto 1fr;gap:6px 12px} .bill-head h1{font-size:16px;text-align:left;letter-spacing:0} .bill-who{grid-column:1/-1;justify-self:start;flex-direction:row;gap:8px;align-items:baseline;text-align:left} /* 固定列宽的表隐藏列以后列会错位，手机上改成按内容排 */ table.data.fixed.bill-list{table-layout:auto;min-width:0} table.bill-list colgroup{display:none} table.bill-list th:nth-child(2),table.bill-list th:nth-child(3),table.bill-list th:nth-child(5),table.bill-list th:nth-child(6), table.bill-list td:nth-child(2),table.bill-list td:nth-child(3),table.bill-list td:nth-child(5),table.bill-list td:nth-child(6){display:none} table.bill-list th,table.bill-list td{padding-left:8px;padding-right:8px;font-size:13px} table.bill-list .strong{white-space:normal} table.bill-list .badge{display:none} } /* 弹窗里的账单：紧凑，尽量一屏看完 */ /* 高度固定成整屏：打开、翻页时弹窗大小都不变，只换里面的数字 */ dialog.modal.embed{width:min(1500px,calc(100vw - 32px));height:calc(100vh - 32px);max-height:none;padding:0;overflow:hidden} .embed-body{position:relative;flex:1} .embed-body.loading{overflow:hidden} .embed-bill{height:100%} .embed-bill .embed-scroll{flex:1} .embed-bill .embed-head h2{min-height:24px} /* 加载进度条：贴着这一块的上边，先快后慢地涨到 88%；内容到了补满到最右边再淡出 */ .load-bar{position:absolute;z-index:20;top:0;left:0;width:0;height:3px;background:var(--brand); border-radius:0 3px 3px 0;pointer-events:none;transition:width 3s cubic-bezier(.1,.85,.25,1)} /* 定位和裁剪跟着进度条走，不跟着 .loading：补满那一下 .loading 已经摘掉了， 跟着它的话进度条会掉到外层去量宽度，一下子冲出卡片 */ .board-sec:has(>.load-bar),.bcard:has(>.load-bar),.card:has(>.load-bar), .embed-body:has(>.load-bar),#fin-body:has(>.load-bar){position:relative;overflow:hidden} .load-bar.done{transition:width .22s ease-out,opacity .3s ease-out .16s} /* 整页跳转时贴在窗口顶上的那一条：服务器要算几百毫秒，点完总得有个动静 */ .page-bar{position:fixed;z-index:200;top:0;left:0;width:0;height:3px;background:var(--brand-cyan); border-radius:0 3px 3px 0;pointer-events:none;transition:width 6s cubic-bezier(.05,.75,.2,1)} .page-bar.done{transition:width .2s ease-out,opacity .3s ease-out .12s} .embed-body.loading .embed-scroll,.embed-body.loading .bill-foot{opacity:.55;pointer-events:none;transition:opacity .15s .1s} dialog.modal.embed[open]{display:flex;flex-direction:column} .embed-body{display:flex;flex-direction:column;min-height:0} .embed-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)} .embed-head h2{font-size:16px;display:flex;align-items:baseline;gap:10px} .embed-head h2 .muted{font-size:13px;font-weight:400} .embed-total{font-size:18px;color:var(--brand-deep)} .embed-warn{padding:4px 10px;border-radius:999px;background:var(--warn-soft);border:1px solid var(--warn-line);color:#93370d;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%} .embed-scroll{overflow:auto;min-height:0;margin:12px 16px 16px;border:1px solid var(--line);border-radius:var(--r)} .embed-head{padding-left:18px !important;padding-right:16px !important} /* 没定价的格子里的「设价」按钮 */ .set-price{border:0;background:var(--warn);color:#fff;border-radius:4px;font:inherit;font-size:11px;line-height:1;padding:3px 6px;cursor:pointer} .set-price:hover{filter:brightness(1.1)} .grid.billgrid.compact .set-price{padding:1px 5px;font-size:10px;line-height:1.2} dialog.modal.price-dlg{width:min(380px,calc(100vw - 32px))} .price-dlg .modal-head p{font-size:14px;color:var(--ink-2)} .price-dlg input{font-size:16px;height:40px} .price-err{color:var(--err);font-size:13px;margin:0} /* 行高跟着窗口高度算：弹窗上下各留 16px，标题栏约 52px，表格外边距 28px，表头 24px，剩下的平分给各行。 最高 22px、最低 15px，所以普通屏幕上整个月不用滚动就能看完 */ .embed-bill{display:flex;flex-direction:column;min-height:0} .embed-bill .bill-foot{border-top:1px solid var(--line);padding:8px 16px} .embed-bill .embed-scroll{margin-bottom:10px} .pill.warn::before{background:currentColor} /* 弹窗上下各 16px，标题栏 52px，表格外边距 22px，表头 26px，底栏 46px */ .grid.billgrid.compact{--row:min(28px,max(13px,calc((100vh - 32px - 52px - 22px - 26px - 48px) / var(--rows,35))))} .grid.billgrid.compact td{height:var(--row);font-size:12px;padding:0 4px;line-height:1.15} .grid.billgrid.compact th{font-size:12px;padding:0 4px;line-height:1.2} .grid.billgrid.compact th{height:24px;font-size:11.5px} .grid.billgrid.compact th.c-day{width:84px} .grid.billgrid.compact .sticky-l{width:84px;min-width:84px;max-width:84px} .grid.billgrid.compact td.c-day .wd{margin-left:4px;font-size:10px} .grid.billgrid.compact th.c-min{width:64px} /* 月结单页面：和弹窗账单同一套紧凑表格。页面上方（顶栏、标题）和下方（总计栏）大约占 250px，其余平分给各行 */ main.page.wide.bill-page{padding-bottom:10px} main.bill-page .page-head{margin-bottom:10px;align-items:center} main.bill-page .page-head .titles{gap:2px} main.bill-page .page-head h1{font-size:20px} main.bill-page .page-head .embed-warn{max-width:420px} .grid.billgrid.compact.onpage{--row:min(22px,max(13px,calc((100vh - 250px) / var(--rows,35))))} /* 窗口很矮、行被压到 15px 以下时，字也跟着小一点 */ .grid.billgrid.compact td{font-size:clamp(10.5px,calc(var(--row) - 4px),12px)} .panel.bill{padding-top:0} .panel.bill .scroll{max-height:none} .grid.billgrid.compact input.q{height:calc(var(--row) - 1px);font-size:12px;padding:0 4px} .bill-foot{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line-strong);background:#fcfcfd;flex-wrap:wrap} .bill-foot .bf-label{font-weight:600;color:var(--ink-2);font-size:13px} .bill-foot #bill-total{font-size:18px;color:var(--brand-deep)} .bill-foot input{height:30px;width:min(420px,40vw)} /* 月份选择器 */ .month-wrap{position:relative} .sheet-panel:has(.month-pop){overflow:visible} .sheet-panel:has(.month-pop) .sheet-head{border-radius:var(--r-lg) var(--r-lg) 0 0} .sheet-panel:has(.month-pop) .scroll{border-radius:0 0 var(--r-lg) var(--r-lg)} button.date-title{border:0;background:transparent;font:inherit;color:inherit} .date-title svg{color:var(--faint);align-self:center} button.date-title:focus-visible{outline:none;box-shadow:0 0 0 4px var(--brand-100)} .month-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:264px;padding:10px;background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)} .mp-year{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .mp-year b{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .mp-months{display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .mp-months button{height:36px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font:inherit; font-size:13px;color:var(--ink-2);cursor:pointer} .mp-months button:hover{background:#f2f4f7} .mp-months button.today{border-color:var(--brand-100);color:var(--brand-deep);font-weight:600} .mp-months button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .mp-foot{display:flex;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13px} .arrow{color:var(--faint);margin:0 6px} .delta{display:inline-block;margin-left:8px;font-size:12px;padding:0 6px;border-radius:999px} .delta.up{background:var(--brand-50);color:var(--brand-deep)} .delta.down{background:#f2f4f7;color:var(--muted)} /* ---------- 财务 · 收入 ---------- */ .fin-kpis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-bottom:14px} /* 几张卡就分几栏，不留空位 */ .fin-kpi{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;min-width:0} .fin-kpi span{font-size:12px;color:var(--muted)} .fin-kpi b{font-size:20px;font-weight:650;color:var(--ink);letter-spacing:-.01em} .fin-kpi dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0;padding-top:8px;border-top:1px dashed var(--line);font-size:12px} .fin-kpi dt{color:var(--muted);white-space:nowrap} .fin-kpi dd{margin:0;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .fin-kpi.ok b{color:var(--ok)} .fin-kpi.owe b{color:var(--err)} .fin-progress{height:6px;border-radius:999px;background:#eef1f5;overflow:hidden;margin:6px 0 2px} .fin-progress i{display:block;height:100%;border-radius:999px;background:var(--ok)} table.fin-months .fin-progress{width:100%;max-width:160px;margin:2px 0 5px} /* 金额颜色：优惠/抵扣橙色，坏账红色，待付红色，其他黑色 */ table.data td.bad,table.data th.bad,.fin-kpi dd.bad{color:var(--err);font-weight:600} table.data td.owe,table.data th.owe{color:var(--err);font-weight:600} table.data td.over{color:var(--ink);font-weight:600} table.data td.neg{color:var(--warn)} table.fin-list tr.fin-row{cursor:pointer} table.fin-list tr.fin-row:hover td{background:#f5f9ff} table.fin-list tr.fin-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} table.fin-list td .badge{margin-left:4px} table.fin-list th,table.fin-list td{padding-left:10px;padding-right:10px} table.fin-list td:first-child,table.fin-list th:first-child{padding-left:16px} table.fin-list tfoot th{padding:9px 16px;border-top:1px solid var(--line-strong);background:var(--head);font-size:13px;color:var(--ink)} dialog.modal.fin{width:min(720px,calc(100vw - 32px));margin:5vh auto auto} /* 顶在固定位置，内容变多只往下长 */ #fin-body{position:relative} #fin-body.loading{overflow:hidden} #fin-body.loading .modal-body{opacity:.55;pointer-events:none;transition:opacity .15s .1s} .fin-ghost{min-height:120px;gap:10px} .ghost-line{height:36px;border-radius:var(--r);background:#f2f4f7} .ghost-line.short{height:40px;width:60%} .fin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} /* 收款弹窗：小票式竖排。所有金额同一字号、同一字重，右边对齐到同一条线；可改的格子看起来和别的行一样，点进去才像输入框 */ .receipt{margin:10px 24px 0;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:14px;font-variant-numeric:tabular-nums} .rrow{display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;padding:0 16px;border-bottom:1px solid var(--line)} .rrow>span{color:var(--ink-2);font-size:14px} .rrow>span small{font-size:12px;color:var(--muted);margin-left:4px} .rrow b,.rrow.edit input{font-size:16px;font-weight:600;color:var(--ink);line-height:1} .rrow.total{background:#f7f8fa} .rrow.total b,.rrow.total>span{font-weight:700;color:var(--ink)} .rrow.final{border-bottom:0;background:var(--ok-soft)} .rrow.final b,.rrow.final>span{color:var(--ok);font-weight:700} .rrow.final.owe{background:var(--err-soft)}.rrow.final.owe b,.rrow.final.owe>span{color:var(--err)} .rrow.final.over{background:var(--warn-soft)}.rrow.final.over b,.rrow.final.over>span{color:var(--warn)} .rrow.edit input{width:160px;height:32px;margin-right:-8px;padding:0 8px;text-align:right;border:1px solid transparent;border-radius:var(--r-sm);background:transparent} .rrow.edit input::placeholder{color:var(--faint);font-weight:500} .rrow.edit input:hover{border-color:var(--line-strong);background:#fff} .rrow.edit input:focus{border-color:var(--accent);background:#fff;outline:none;box-shadow:0 0 0 3px var(--brand-100)} .rrow.edit input[name=discount]{color:var(--warn)} .rrow.edit input[name=bad_debt]{color:var(--err)} .rsub{display:flex;align-items:center;gap:12px;height:36px;padding:0 16px 0 32px;border-bottom:1px solid var(--line);font-size:13px;background:#fcfcfd} .rsub .d{color:var(--muted);width:112px;flex:none;white-space:nowrap} /* 「2026年9月25日」要放得下，不能折行 */ .rsub .m{color:var(--ink-2);width:64px;flex:none} .rsub .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)} .rsub b{font-size:16px;font-weight:600;color:var(--ink)} /* 每笔收款的金额和上面各行一样大，整张小票的金额一个字号 */ .fin-extra{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)} .fin-extra input[name=note]{flex:1;min-width:0} .fin-extra .fin-note-ro{flex:1;min-width:0;font-size:13px} .rrow b.neg{color:var(--warn)} .rrow b.bad{color:var(--err)} table.cash-list .star-ro{color:#f5b301;font-size:16px;padding-right:8px} .fin-extra label.check{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap} .fin-box .modal-body{padding-bottom:20px;gap:12px} .fin-auto{padding:10px 14px;border-radius:var(--r);background:var(--ok-soft);color:var(--ok);font-size:13px} /* 记一笔收款：一行搞定 */ .fin-add{display:grid;grid-template-columns:150px 1fr auto;gap:8px;align-items:center} /* 记收款第二步：选账 + 确认 */ .fin-confirm{border:1px solid var(--brand-100);border-radius:var(--r);background:var(--brand-50);padding:14px 16px;display:flex;flex-direction:column;gap:12px} .fc-head{font-size:14px;color:var(--ink)} .fc-head b{font-size:16px;color:var(--brand-deep)} .fc-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .fc-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:2px solid var(--line);border-radius:var(--r);background:#fff;font:inherit;cursor:pointer;color:var(--ink)} .fc-opt i{font-style:normal;font-size:22px;line-height:1} .fc-opt b{font-size:15px} .fc-opt span{font-size:12px;color:var(--muted)} .fc-opt:hover{border-color:var(--brand-100);background:#fff} .fc-opt.on{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-100)} .fc-opt.on b{color:var(--brand-deep)} /* 弹窗里选方式：一排小按钮，图标 + 名字，说明放在 title 里 */ .pick-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .pick{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);border-radius:999px; background:#fff;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap;user-select:none} .pick i{font-style:normal;font-size:14px;line-height:1} /* 单选框自己不显示（弹窗里的 input 有 width:100%，这里要压回去，否则会把弹窗撑出横向滚动条） */ .pick input{position:absolute;width:0;height:0;margin:0;padding:0;opacity:0;pointer-events:none} .pick:hover{border-color:var(--brand-100)} .pick:has(input:checked){border-color:var(--brand);background:var(--brand-50);color:var(--brand-deep);font-weight:600} .pick:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px} .fc-opt:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)} .fc-opt:has(input:checked) b{color:var(--brand-deep)} .fc-opt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px} table.deposit-list td.muted{overflow:hidden;text-overflow:ellipsis} .fc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px} .fc-row{display:grid;grid-template-columns:auto 150px 1fr;gap:8px;align-items:center} .fc-label{font-size:14px;color:var(--ink-2)} .fin-pop{position:fixed;left:50%;top:38.2%;transform:translate(-50%,-50%);z-index:1200;max-width:min(720px,calc(100vw - 48px));padding:12px 12px 12px 22px;border-radius:999px;display:flex;align-items:center;gap:10px; background:var(--ok);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-shadow:0 18px 48px -8px rgba(3,152,85,.55);animation:pop-in .18s ease-out} /* 气泡自己的进场动画：结束位置和它的定位一致，不然动画完了会往上跳半个高度 */ @keyframes pop-in{from{opacity:0;transform:translate(-50%,calc(-50% + 6px))}to{opacity:1;transform:translate(-50%,-50%)}} .rrow.edit input.bad{border-color:var(--err);background:var(--err-soft);color:var(--err)} .btn.sm.on{background:var(--ok-soft);border-color:#a6e3bf;color:var(--ok)} .fin-add input,.fin-add select{width:100%;min-width:0} .fin-tip{font-size:13px;color:var(--muted)} /* 「更多」：优惠、坏账、发票这些不常用的收起来 */ .fin-more{border:1px solid var(--line);border-radius:var(--r);padding:0 14px} .fin-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;height:40px;font-size:13px;font-weight:600;color:var(--ink-2)} .fin-more summary::-webkit-details-marker{display:none} .fin-more summary::before{content:'';width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);margin-right:2px;transition:transform .15s} .fin-more[open] summary::before{transform:rotate(45deg)} .fin-more summary .muted{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} button.link.danger{color:var(--err)} @media (max-width:900px){.fin-kpis{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}} table.fin-list .manual{border-bottom:1px dashed var(--faint);cursor:help} table.fin-list tr.off td{color:var(--ink)} /* 已失效的客户也正常显示，金额别变灰 */ table.fin-list tr.off td:nth-child(2){color:var(--muted)} table.fin-list tr.has-bad td{background:var(--err-soft)} /* 有坏账的整行浅红 */ table.fin-list tr.has-bad.fin-row:hover td{background:#fde8e6} /* 放在 tr.off 之后、写法更具体：失效客户那一行的坏账、待付、优惠也要有颜色 */ table.fin-list tr td.bad,table.fin-list tr td.owe{color:var(--err);font-weight:600} table.fin-list tr td.neg{color:var(--warn)} .field>small{display:block;margin-top:5px;font-size:12px;line-height:1.4} /* 分块的表单（客户弹窗）：小标题 + 一组开关，像手机的设置页 */ #customer-dlg{width:min(540px,calc(100vw - 32px))} .form-sec{display:flex;flex-direction:column;gap:14px} .form-sec+.form-sec{margin-top:6px} .form-sec>h3{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.5px;margin:0 0 -4px} .setlist{border:1px solid var(--line);border-radius:12px;background:#fafbfc;overflow:hidden} .setrow{display:flex;align-items:center;gap:16px;padding:12px 14px;cursor:pointer} .setrow+.setrow,.setsub{border-top:1px solid var(--line)} .setrow .st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .setrow .st b{font-size:14px;font-weight:500;color:var(--ink)} .setrow .st small{font-size:12px;line-height:1.45;color:var(--muted)} .setsub{display:none;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px;background:#fff} .setrow:has(input:checked)+.setsub{display:grid} input.switch{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;border-radius:999px;background:#d0d5dd;position:relative; cursor:pointer;transition:background .15s;margin:0;border:0} input.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.25);transition:transform .15s} input.switch:checked{background:var(--brand)} input.switch:checked::after{transform:translateX(18px)} input.switch:focus-visible{outline:0;box-shadow:0 0 0 3px var(--brand-100)} /* ---------- 财务 · 现金明细表 ---------- */ .cash-head{flex-wrap:wrap;gap:10px} /* 这一行撑满整张卡片，中间的 spacer 才能把排序和搜索推到最右边 */ .cash-head .sheet-date{gap:6px;flex:1;min-width:0} /* 收入一绿、支出一红，光靠数字的颜色分，列上不再铺底色 */ table.cash-list th.in,table.cash-list td.num.in{color:var(--ok)} table.cash-list th.out,table.cash-list td.out,table.cash-list th.num.out{color:var(--err)} /* 三列数字（收入、支出、余额）右对齐，两边各一条竖线圈起来，和左右的文字分开。 竖线两侧留够空白，数字不要贴着线，后面的文字也不要贴着线 */ table.cash-list .gs{border-left:1px solid var(--line);padding-left:16px} table.cash-list .ge{border-right:1px solid var(--line);padding-right:16px} table.cash-list .ge+th,table.cash-list .ge+td{padding-left:16px} /* 「科目」两个字要和下面标签里的字对齐：表头往右让出标签自己的左内边距 */ table.cash-list th.c-cat{padding-left:17px} table.cash-list .ge+th.c-cat{padding-left:25px} table.cash-list tr.opening td{color:var(--muted);background:#fafbfc} /* 窗口窄了就让表格横向滚动，金额不能被截掉半截 */ table.data.fixed.cash-list{min-width:1000px} table.cash-list th,table.cash-list td{padding-left:8px;padding-right:8px} table.cash-list th{font-size:13px;color:var(--ink-2)} table.cash-list td.num{font-weight:600} table.cash-list td.num.muted{font-weight:400} table.cash-list td:first-child,table.cash-list th:first-child{padding-left:16px} table.cash-list td:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap} table.cash-list td.c-more.small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} table.cash-list .m-only{display:none} /* 手机上才有的「金额」列 */ table.cash-list tr.totals td{background:var(--head);font-weight:600;border-bottom:1px solid var(--line-strong)} .card:has(.month-pop){overflow:visible} .btn.primary.out{background:linear-gradient(180deg,#c9352a,var(--err));border-color:var(--err)} .page-head .actions .btn{min-width:112px} /* 标题旁边的时间范围：这里没有卡片托底，按钮是白的，标签页也跟着白 */ .page-head .actions .tabs{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.05)} .page-head .actions .tabs a{height:28px} .page-head .actions .tabs a.on{background:var(--brand-50);color:var(--brand-deep);box-shadow:none} table.cash-list tr.hl td{background:#fff5c2} table.cash-list .act-row{display:flex;justify-content:flex-end;gap:4px} table.cash-list .act-slot{width:48px} /* 「编辑」的位置：自动生成的行空着，右边一列才齐 */ .auto-tag{margin-left:6px;font-size:11.5px;color:var(--faint);white-space:nowrap} .btn.icon.star{color:var(--faint);font-size:16px} .btn.icon.star.on{color:#d89b00;background:#fff5c2;border-color:#f0d878} .prefixed{display:flex;align-items:center;gap:0} .prefixed i{display:inline-flex;align-items:center;height:36px;padding:0 10px;border:1px solid var(--line);border-right:0;border-radius:var(--r) 0 0 var(--r); background:#f7f8fa;color:var(--ink-2);font-style:normal;font-weight:600} .prefixed i.neg{color:var(--err);font-size:16px} .prefixed input{border-radius:0 var(--r) var(--r) 0;flex:1;min-width:0} .btn[aria-disabled=true]{opacity:.45;pointer-events:none} .mp-months button:disabled{opacity:.35;cursor:default} /* 本机 / 测试环境：整屏斜着铺满「测试环境」水印，不挡操作。服务器上不显示 */ .test-watermark{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.07; background-image:url("data:image/svg+xml;utf8,测试环境"); background-size:240px 160px} @media print{.test-watermark{display:none}} .fin-pop span{overflow:hidden;text-overflow:ellipsis} .fin-pop .fin-msg{display:flex;flex-direction:column;gap:2px;min-width:0} .fin-pop.two{border-radius:22px;padding-top:10px;padding-bottom:10px} .fin-pop .fin-msg small{font-size:12.5px;font-weight:400;opacity:.92} .fin-pop .fin-msg small::before{content:'📋 '} .fin-pop .fin-copy{border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0} .fin-undo,.fin-open{border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.15);color:#fff;font:inherit;font-size:14px;font-weight:600;padding:5px 14px;border-radius:999px;cursor:pointer} .fin-undo:hover,.fin-open:hover{background:rgba(255,255,255,.28)} .fin-open{background:#fff;color:var(--ok)} .fin-open:hover{background:#eafaf1} /* 自己画的确认框 */ dialog.modal.confirm{width:min(440px,calc(100vw - 32px))} dialog.modal.confirm .modal-head{padding:22px 24px 8px} dialog.modal.confirm .modal-head p{font-size:14px;color:var(--ink-2);line-height:1.6;margin-top:8px} dialog.modal.confirm .modal-foot{padding:14px 24px 20px} .fin-x{border:0;background:transparent;color:rgba(255,255,255,.8);font:inherit;font-size:20px;line-height:1;padding:0 4px 2px;cursor:pointer;margin-left:2px} .fin-x:hover{color:#fff} /* 配送表：填了数量但这个月没有单价的格子，右上角一个橙色小三角，点了就地设价 */ .grid.sheet td.c-qty.unpriced{background:var(--warn-soft)} .cell-flag{position:absolute;top:0;right:0;width:0;height:0;padding:0;border:0;background:transparent; border-top:9px solid var(--warn);border-left:9px solid transparent;cursor:pointer} .cell-flag:hover{border-top-color:#b54708} span.cell-flag{cursor:default} .grid.sheet td.c-qty{position:relative} .chip-warn{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;cursor:pointer; border:1px solid var(--warn-line);background:var(--warn-soft);color:#93370d;font:inherit;font-size:12.5px} .chip-warn:hover{border-color:var(--warn)} .chip-warn b{font-variant-numeric:tabular-nums} /* 列表里新增、删除的过渡：新增的行淡入、亮一下；删除或停用的行先滑走，再提交 */ tr.row-new>td,.row-new{animation:row-new 1.5s ease-out} @keyframes row-new{ 0%{opacity:0;transform:translateY(-8px);background:var(--brand-50)} 18%{opacity:1;transform:none;background:var(--brand-50)} 55%{background:var(--brand-50)} 100%{background:transparent} } /* 本来就在列表里的那一行刚改过：只让底色亮一下再退回去，字不跟着动 */ tr.row-hit>td,.row-hit{animation:row-hit 1.5s ease-out} @keyframes row-hit{0%,45%{background:var(--brand-50)}100%{background:transparent}} tr.row-jump>td{animation:row-jump 3s ease-out} @keyframes row-jump{0%,60%{background:#fff5c2}100%{background:transparent}} tr.row-gone>td,.row-gone{animation:row-gone .36s ease-in forwards} @keyframes row-gone{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(40px)}} @media (prefers-reduced-motion:reduce){ /* 系统里关了动画效果就不动，只留一下高亮 */ tr.row-new>td,.row-new{animation:row-hit 1.2s ease-out} tr.row-gone>td,.row-gone{animation:none;opacity:.3} } /* 收清的客户退场：整行亮一下绿色，然后往右滑出、淡掉；下面的行随后平滑滑上来（tr.sliding） */ table.fin-list tr.leaving td{animation:row-out 1s ease-in forwards;background:var(--ok-soft)} table.fin-list tr.leaving td:first-child .strong{color:var(--ok)} @keyframes row-out{0%{opacity:1;transform:translateX(0)}60%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(48px)}} table.fin-list tr.sliding{transition:transform .4s cubic-bezier(.2,.7,.2,1)} table.fin-list tr.sliding td{background:#fff} .btn.on{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-deep)} .fin-pins{display:inline-flex;align-items:center;gap:2px} .fin-pins a{font-weight:600} .fin-pins a::before{content:'📌';font-size:12px} /* 撤销以后回来的行：从右边滑进来、绿一下 */ table.fin-list tr.entering td{animation:row-in 1s ease-out forwards} @keyframes row-in{0%{opacity:0;transform:translateX(48px);background:var(--ok-soft)}40%{opacity:1;transform:translateX(0);background:var(--ok-soft)}100%{opacity:1;transform:translateX(0);background:transparent}} /* 记收入：常用金额按钮 */ .quick-amounts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .chip{display:inline-flex;align-items:center;justify-content:center; height:28px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font:inherit;font-size:13px;font-weight:600; color:var(--ink-2);cursor:pointer;font-variant-numeric:tabular-nums} .chip:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-50)} .chip.on{background:var(--brand);border-color:var(--brand);color:#fff} .fin-pop.fading{opacity:0;transition:opacity .4s ease} /* ---------- 财务看板 ---------- 两大块（总看板、月看板），每块：标题行 → 4 个指标 → 并排的卡片。并排的卡片一样高（grid 默认拉伸）， 列表每行一样高、行数一样，左右两边的线对得齐 */ .board{display:flex;flex-direction:column;gap:32px} .board em{font-style:normal} .board em.up{color:var(--ok)} .board em.down{color:var(--err)} .board-sec{display:flex;flex-direction:column;gap:14px;transition:opacity .15s} /* 换年份、换月份、换排行时：这一块变淡，顶上走一条进度条（和账单弹窗同一个动画） */ [data-swap]{scroll-margin-top:72px} /* 换内容后滚回块顶时，别被顶栏压住 */ .board-sec.loading,.bcard.loading,.card.loading{position:relative;pointer-events:none;overflow:hidden} .board-sec.loading>*:not(.load-bar),.bcard.loading>*:not(.load-bar), .card.loading>*:not(.load-bar){opacity:.55;transition:opacity .15s .1s} .sec-head{display:flex;align-items:center;gap:10px;min-height:34px} .sec-head h2{font-size:18px;font-weight:700;margin:0;letter-spacing:.02em} .sec-note{font-size:12.5px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px} /* 换年份：几个年份并排的分段按钮；换月份：‹ 月份 › 连成一个整体 */ .seg{display:inline-flex;margin-left:auto;padding:3px;gap:2px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-card)} .seg a{min-width:58px;height:28px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:7px; color:var(--ink-2);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums} .seg a:hover{background:#f4f7fb;color:var(--ink);text-decoration:none} .seg a.on{background:#7c3aed;color:#fff} .seg.sm{margin-left:0;box-shadow:none} .seg.sm a{min-width:0;height:24px;padding:0 10px;font-size:12.5px} .bcard-head .seg.sm+.cnt{margin-left:auto} /* 账号页：一列居中，两张卡片等宽 */ main.page.account{max-width:520px} .account-col{display:flex;flex-direction:column;gap:16px} .account-col .card-head h2{font-size:15px} .account-col .card-head .btn,.account-col .card-foot .btn{min-width:88px} /* 两张卡片的主按钮等宽 */ /* passkey 列表：一行一把，左边设备名和时间，右边删除 */ .pk-list{display:flex;flex-direction:column} .pk-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line)} .pk-row:first-child{border-top:0} .pk-info{display:flex;flex-direction:column;gap:2px;min-width:0} .pk-row .n{font-weight:600} .pk-meta{font-size:12.5px;color:var(--muted)} .pk-row form{margin-left:auto} .pk-empty{color:var(--muted);font-size:13.5px;padding:14px 20px;border-top:1px solid var(--line)} /* 使用指南：每一节一个颜色（左边一条色条 + 标题同色），顶上是目录 */ .guide{display:flex;flex-direction:column;gap:16px} .guide-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .guide-toc a{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;font-size:13.5px; border:1px solid var(--line);background:#fff;color:var(--ink-2)} .guide-toc a:hover{text-decoration:none;border-color:currentColor} .gsec{border-left:4px solid var(--g);scroll-margin-top:80px} .gsec .card-head{align-items:center;gap:10px} .gsec .card-head h2{color:var(--g)} .gtag{font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--g-soft);color:var(--g)} .guide-toc a.g-sheet,.gsec.g-sheet{--g:#0d6ea8;--g-soft:#eef6fb} .guide-toc a.g-customers,.gsec.g-customers{--g:#0e9384;--g-soft:#e8f6f4} .guide-toc a.g-prices,.gsec.g-prices{--g:#b54708;--g-soft:#fdf1e3} .guide-toc a.g-bills,.gsec.g-bills{--g:#7c3aed;--g-soft:#f4efff} .guide-toc a.g-stats,.gsec.g-stats{--g:#0369a1;--g-soft:#eaf4fb} .guide-toc a.g-faq,.gsec.g-faq{--g:#be123c;--g-soft:#fdeef1} .guide-toc a.g-flow,.gsec.g-flow{--g:#15803d;--g-soft:#ecf7ef} .guide-toc a.g-prod,.gsec.g-prod{--g:#0f766e;--g-soft:#e6f5f3} .guide-toc a.g-attend,.gsec.g-attend{--g:#4f46e5;--g-soft:#eef0fd} .guide-toc a.g-wages,.gsec.g-wages{--g:#a16207;--g-soft:#fbf3e1} .guide-toc a{color:var(--g)} .guide .card-body{display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.75;color:var(--ink)} .guide .card-body.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 32px} .guide .card-body h3{font-size:13px;font-weight:600;margin:10px 0 2px;color:var(--g);letter-spacing:.03em} .guide .card-body h3:first-child{margin-top:0} .guide .card-body ul,.guide .card-body ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px} .guide .card-body p{margin:0} .guide .card-body b{font-weight:600} .guide .flow ol{counter-reset:none} .guide table.data td:first-child{width:38%} @media (max-width:860px){ .guide .card-body.cols{grid-template-columns:minmax(0,1fr)} .guide-toc{gap:6px} .guide-toc a{height:28px;padding:0 11px;font-size:13px} } /* 客户排行页：三组标签页加筛选，窄屏自动换行 */ .card-head.rank-head{gap:8px 12px} td.ok-text{color:var(--ok)} td.warn-text{color:var(--warn)} /* 选文件：浏览器自带的按钮是英文的，藏起来换成自己的按钮，旁边显示选中的文件名 */ .file-pick{display:flex;align-items:center;gap:10px;min-width:0} .file-pick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .file-pick .btn{flex:none} .file-pick .file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:13px;color:var(--muted)} /* 合作状态：选中的一边用颜色区分，不只是白底 */ /* 开关行：一句话加一个开关，整行可点。比光秃秃的勾选框好认 */ .switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px; border:1px solid var(--line);border-radius:var(--r);background:#fcfcfd;cursor:pointer} .switch-row[hidden]{display:none} .switch-row .t{display:flex;flex-direction:column;gap:2px} .switch-row b{font-size:14px;font-weight:600} .switch-row em{font-style:normal;font-size:12px;color:var(--muted)} .switch-row:hover{border-color:#b9c0cb} .switch-row:has(input:checked){border-color:#a6e3bf;background:var(--ok-soft)} .switch-row:has(input:checked) b{color:var(--ok)} .pick-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} /* 收款方式那种大选项卡 */ .pick-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px; border:2px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;color:var(--ink)} .pick-opt input{position:absolute;opacity:0;pointer-events:none} .pick-opt i{font-style:normal;font-size:22px;line-height:1} .pick-opt b{font-size:15px;font-weight:600} .pick-opt span{font-size:12px;color:var(--muted)} .pick-opt:hover{border-color:var(--brand-100)} .pick-opt:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)} .pick-opt:has(input:checked) b{color:var(--brand-deep)} /* 布草台账：扣款和退款直接在表里填，输入框跟着列宽走，不然会被单元格裁掉 */ table.linen-list th,table.linen-list td{padding-left:8px;padding-right:8px} table.linen-list td:first-child,table.linen-list th:first-child{padding-left:16px} table.linen-list td input{width:100%;min-width:0;text-align:right} table.linen-list td.act2{white-space:nowrap} table.linen-list td.act2 .acts{display:flex;justify-content:flex-end;align-items:center;gap:6px} table.linen-list td.act2 .acts>span{flex:0 0 52px} /* 位置固定，撤销没有时留着空位，按钮不会左右挪 */ table.linen-list td.act2 .btn{width:100%;min-width:0;padding:0 6px} /* 已结清：按钮停用，看着就是按不动的样子（不用 .btn.primary:disabled 那套「正在提交」的灰） */ table.linen-list td.act2 .btn.primary:disabled{opacity:1;cursor:default;box-shadow:none; background:#eef1f5;border-color:var(--line);color:var(--muted)} table.linen-list td.act2 .btn.undo{color:var(--ink-2)} table.linen-list td.act2 .btn.undo:hover{border-color:var(--err-line);background:var(--err-soft);color:var(--err)} table.linen-periods td:first-child{white-space:nowrap} /* 截止日和「历史记录」始终在同一行，不要时而换行时而不换 */ table.linen-periods td:first-child .strong{font-variant-numeric:tabular-nums} /* 日期等宽，后面的「历史记录」才对得齐 */ /* 扣款一组、退款一组：中间画竖线，各自垫一层很淡的底色，一眼看得出是两组。 竖线两边留一样宽的空，数字不贴着线 */ table.linen-periods .gap{border-left:1px solid var(--line);padding-left:18px} table.linen-periods .gapl{padding-right:18px} table.linen-periods .gd{background:#fdf6f5} table.linen-periods .gr{background:#f4fbf7} table.linen-periods tbody tr:hover .gd{background:#fbeceb} table.linen-periods tbody tr:hover .gr{background:#eaf7f0} /* 内容会随选择变多变少的弹窗：顶在固定位置，只往下长，左上角不动 */ dialog.modal.grows{margin:12vh auto auto} /* 共享赔偿的通知文字：整段要一眼看全，弹窗放宽，文本框按内容高（全局 textarea 是 36px 的一行） */ dialog.modal.notice{width:min(640px,calc(100vw - 32px))} .notice-text{width:100%;height:auto;min-height:200px;padding:12px 14px;line-height:1.8;resize:vertical} .b-list.rank-list{display:block;column-count:2;column-gap:36px} /* 左边 1–15，右边 16–30 */ .rank-list .b-row{break-inside:avoid} .rank-list .idx{width:22px} .rank-list .n{display:flex;align-items:center;gap:6px} .rank-list .atag{font-size:11px;background:var(--line);color:var(--muted)} .rank-list .chg{width:52px;color:var(--muted)} .stepper{display:inline-flex;align-items:stretch;margin-left:auto;height:36px;background:#fff;border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow-card);overflow:hidden} .stepper a,.stepper span{width:36px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--ink-2)} .stepper a:hover{background:#f5f3ff;color:#7c3aed;text-decoration:none} .stepper span{color:var(--line-strong);cursor:default} .stepper select{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;height:auto;min-width:0; padding:0 14px;background:#fff;font:inherit;font-size:14px;font-weight:600;text-align:center;text-align-last:center; -webkit-appearance:none;appearance:none;cursor:pointer;box-shadow:none} .stepper select:hover{background:#f4f7fb} .stepper select:focus{outline:none;background:#f5f3ff} .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .kpi{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow-card);color:var(--ink);min-width:0;transition:border-color .12s} a.kpi:hover{border-color:var(--brand);text-decoration:none} .kpi .k-label{font-size:13px;color:var(--muted)} .kpi .k-num{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap} .kpi .k-num.ok{color:var(--ok)} .kpi .k-num.warn{color:var(--warn)} .kpi .k-num.bad{color:var(--err)} .kpi .k-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .board-grid{display:grid;gap:14px;align-items:stretch} .g-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .g-trend{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .bcard{display:flex;flex-direction:column;padding:16px 20px 12px;min-width:0} .bcard-head{display:flex;align-items:center;gap:8px 12px;min-height:32px;margin-bottom:6px;flex-wrap:wrap} .bcard-head h3{font-size:15px;font-weight:650;margin:0 auto 0 0} /* 标题里带口径（累计 / 2026年 / 2026年8月），宽度会变。这两张卡片标题后面紧跟着 切换按钮，所以给标题一个固定宽度、去掉撑开用的自动外边距，换口径时按钮不会左右挪 */ #board-rank .bcard-head h3{min-width:9.8em;margin-right:0} #rank .bcard-head h3{min-width:12em;margin-right:0} .bcard-head .cnt{font-size:12.5px;color:var(--muted)} .bcard-head a.more{font-size:13px;font-weight:500} .bcard-head .tabs a{padding:4px 10px;font-size:12.5px} .b-list{display:flex;flex-direction:column;flex:1} .b-row{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 10px;margin:0 -10px;border-radius:8px; border-top:1px solid var(--line);color:var(--ink);font-size:14px} .b-row:first-child{border-top-color:transparent} .b-row:hover{background:#f4f7fb;text-decoration:none} .b-row:hover+.b-row{border-top-color:transparent} .b-row .idx{flex:none;width:18px;text-align:right;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums} .b-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} .b-row .amt{flex:none;min-width:80px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums} .b-row .spark{flex:none;color:#8b5cf6} .b-row .chg{flex:none;width:58px;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums} .b-row .atext{flex:1;min-width:0;padding:10px 0;line-height:1.45} .b-row.tight{min-height:36px} button.b-row{width:calc(100% + 20px);border-left:0;border-right:0;border-bottom:0;background:none;font:inherit;text-align:left;cursor:pointer} .b-row.static:hover{background:none} .b-row.static:hover+.b-row{border-top-color:var(--line)} .b-row.total{font-weight:650} .b-row .n small{display:block;font-size:12px;font-weight:400;color:var(--muted);white-space:normal} /* 看板的弹窗：待收（账龄 + 所有欠款客户）、某个客户欠的月份、坏账 */ dialog.modal.board-dlg{width:min(560px,calc(100vw - 32px));max-height:86vh;margin:7vh auto auto} dialog.modal.board-dlg.narrow{width:min(420px,calc(100vw - 32px))} dialog.modal.board-dlg .modal-body{padding:8px 24px 20px;gap:10px} .dlg-aging{padding-bottom:6px} .dlg-aging .age-row{padding:8px 0} .b-empty{flex:1;display:flex;align-items:center;justify-content:center;min-height:120px;color:var(--muted);font-size:13px;text-align:center} .atag{flex:none;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap;background:var(--brand-50);color:var(--brand-deep)} .atag.debt{background:var(--err-soft);color:var(--err)} .atag.down,.atag.warn{background:var(--warn-soft);color:var(--warn)} .atag.up{background:var(--ok-soft);color:var(--ok)} /* 趋势图 */ .legend{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)} .legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px} .legend .sw.cur{background:var(--brand)} .legend .sw.last{background:#cfd6e0} .legend .sw.rate{height:2px;width:14px;background:#db2777} .board-chart{position:relative;flex:1;min-height:260px} .board-chart svg{display:block;position:absolute;left:0;top:0} /* 不撑高容器：容器多高由卡片定，图照着画 */ .board-chart .grid{stroke:var(--line);stroke-width:1} .board-chart .axis{font-size:11px;fill:var(--muted)} .board-chart .hit{fill:transparent} .board-chart .col{cursor:pointer} .board-chart .col:hover .hit,.board-chart .col.on .hit{fill:#f2f6fb} .board-chart .last{fill:#cfd6e0} .board-chart .cur{fill:var(--brand)} .board-chart .band{fill:#faf8ff} /* 紫粉渐变：按离最新一年多远上色（a0 最新、最深），两张图同一年同一个颜色； 年看板的去年同月用去年那个颜色、半透明；顶上珊瑚粉的一截是待收；回款率是玫红色的线 */ .board-chart .cur.a0,.legend .sw.a0,.board-chart .last.a0{fill:#7c3aed;background:#7c3aed} .board-chart .cur.a1,.legend .sw.a1,.board-chart .last.a1{fill:#a78bfa;background:#a78bfa} .board-chart .cur.a2,.legend .sw.a2,.board-chart .last.a2{fill:#c4b5fd;background:#c4b5fd} .board-chart .cur.a3,.legend .sw.a3,.board-chart .last.a3{fill:#ddd6fe;background:#ddd6fe} .board-chart .last,.legend .sw.last{opacity:.45} .board-chart .owed,.legend .sw.owed{fill:#fb7185;background:#fb7185} .board-chart .col:hover .cur,.board-chart .col:hover .owed{filter:brightness(.88)} .board-chart .col.on .cur,.board-chart .col.on .owed{filter:brightness(.78)} .board-chart .rate{fill:none;stroke:#db2777;stroke-width:1.8;stroke-linejoin:round} .board-chart .rate-dot{fill:#db2777} .board-chart .rate-text{font-size:11.5px;font-weight:600;fill:#be185d;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round} .board-tip{position:absolute;top:4px;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:#1d2433;color:#fff; font-size:12px;line-height:1.4;pointer-events:none;white-space:nowrap;z-index:5} .board-tip b{font-size:12.5px} /* 账龄、构成：一条分段横条 + 下面每一段的数 */ .age-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:2px;background:#eef1f5;margin:6px 0 2px} .age-bar i{display:block;min-width:4px} /* 构成条和账龄条跟柱状图同一个紫粉色系；账龄里拖久了的仍用橙、红提醒 */ .age-bar .now,.age-bar .s-wash,.age-bar .s-company{background:#7c3aed} .age-bar .recent{background:#f79009} .age-bar .old{background:var(--err)} .age-bar .s-shared{background:#c4b5fd} .age-bar .s-cash{background:#f472b6} .age-bar .s-other{background:#e2e8f0} .age-rows{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;margin-top:6px} .age-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;padding:12px 0;border-top:1px solid var(--line)} .age-row:first-child{border-top:0} .age-row .dot,.src-item .dot{width:10px;height:10px;border-radius:3px;background:#7c3aed} .age-row.recent .dot{background:#f79009} .age-row.old .dot{background:var(--err)} .age-row .lbl{font-size:13.5px;color:var(--ink-2)} .age-row b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums} .age-row.old b{color:var(--err)} .age-row .meta{grid-column:2/-1;font-size:12px;color:var(--muted)} .src-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:2px 0 8px} .src h4{font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px} .src-rows{display:flex;flex-direction:column;margin-top:8px} .src-item{display:flex;align-items:center;gap:10px;min-height:36px;border-top:1px solid var(--line);font-size:13.5px} .src-item:first-child{border-top:0} .src-item .lbl{flex:1;color:var(--ink-2)} .src-item b{font-weight:650;font-variant-numeric:tabular-nums} .src-item em{width:44px;text-align:right;color:var(--muted);font-size:12.5px} .src-item.s-shared .dot{background:#c4b5fd} .src-item.s-cash .dot{background:#f472b6} .src-item.s-other .dot{background:#cbd5e1} /* 手机底部菜单和「更多」面板：电脑上不显示 */ .tabbar{display:none} table .m-only{display:none} dialog.sheet{border:0;padding:6px 16px calc(18px + env(safe-area-inset-bottom));margin:auto 0 0;width:100vw;max-width:100vw;max-height:82vh; border-radius:18px 18px 0 0;background:#fff;color:var(--ink);overflow:auto;box-shadow:0 -10px 40px rgba(16,24,40,.18)} dialog.sheet::backdrop{background:rgba(16,24,40,.45)} dialog.sheet[open]{animation:sheet-up .22s cubic-bezier(.2,.8,.2,1)} @keyframes sheet-up{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}} .sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:4px auto 6px} dialog.sheet h3{margin:14px 2px 8px;font-size:12px;font-weight:600;color:var(--muted)} .sheet-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .sheet-links a,.sheet-links button,.sheet-pins a{display:flex;align-items:center;justify-content:center;height:46px;width:100%;border:1px solid var(--line); border-radius:12px;background:#fafbfc;color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer} .sheet-links a.on,.sheet-pins a.on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-deep);font-weight:600} .sheet-links form{display:contents} .sheet-links form button{color:var(--err)} .sheet-pins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px} .sheet-pins:empty{display:none} /* ================= 手机（≤720px） ================= 原则：页面本身不能左右滑（只有配送表、统计、现金账这种宽表在自己的框里滑）；顶栏自己横向滑； 列表类的表只留最要紧的几列，其余的点进去看。 */ @media (max-width:720px){ body{overflow-x:hidden} /* iPhone 上输入框字号小于 16px，点进去整个页面会被自动放大 */ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important} .topbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} /* 顶栏只剩标志；菜单全在底部那一排 */ .topbar .mainnav,.topbar>form.inline{display:none} .topbar .brand{font-size:15px;gap:8px} .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;z-index:60;left:0;right:0;bottom:0; height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.96); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)} .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none; font:inherit;font-size:11px;color:var(--muted);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .tabbar .on{color:var(--brand-deep);font-weight:600} body:has(.tabbar){padding-bottom:calc(56px + env(safe-area-inset-bottom))} /* 登录页没有底部菜单，不留这条空 */ /* 基础资料这类列表：手机上一行变一张卡片，上下滑动就能看完，不用左右拉 */ table.data.cards,table.data.cards tbody,table.data.cards tfoot, table.data.cards tr,table.data.cards td,table.data.cards th{display:block;width:auto;min-width:0} .table-wrap:has(table.data.cards){overflow-x:visible} table.data.cards thead,table.data.cards colgroup{display:none} table.data.cards tr{position:relative;display:flex;flex-direction:column;padding:12px 14px;border-bottom:1px solid var(--line)} table.data.cards td.card-title{order:-1;font-size:15px;margin-bottom:2px;padding-right:84px} table.data.cards tr:last-child{border-bottom:0} table.data.cards td,table.data.cards tfoot th{border:0;padding:1px 0;font-size:13.5px;text-align:left;white-space:normal} table.data.cards td:empty,table.data.cards tfoot th:empty{display:none} table.data.cards td:first-child{font-size:15px;margin-bottom:2px;padding-right:84px} table.data.cards td[data-label]::before,table.data.cards tfoot th[data-label]::before{content:attr(data-label) "：";color:var(--muted)} table.data.cards tfoot tr{background:#fcfcfd;border-top:1px solid var(--line);font-weight:600} /* 合计：一张小卡片 */ table.data.cards td.act{position:absolute;top:10px;right:12px;padding:0;text-align:right} table.data.cards td.act .btn{min-width:56px} table.data.cards .strong{white-space:normal} table th.m-only,table td.m-only{display:table-cell} table.bill-list th:nth-child(4),table.bill-list td:nth-child(4){display:none} table.bill-list td.m-only{padding-left:0;white-space:nowrap;width:1%} table.bill-list td.m-only .btn{padding:0 8px;font-size:12px} .topbar::-webkit-scrollbar{display:none} .mainnav,.fin-pins{flex:none} .topbar .spacer{min-width:8px} .navmenu{position:fixed;left:8px;right:8px;top:58px;min-width:0} /* 下拉菜单不能被顶栏的滚动框裁掉 */ main.page,main.page.wide{padding:14px 12px 40px} .page-head{flex-direction:column;align-items:stretch;gap:10px} .page-head h1{font-size:20px} .page-head .actions{flex-wrap:wrap} .page-head .actions .btn{flex:1;min-width:0} .card-head{padding:10px 14px;gap:8px} .card-head .toolbar{width:100%;flex-wrap:wrap} .card-head .toolbar select{flex:1;min-width:0} .card-head .toolbar .search{width:100%} .card-head .toolbar .search input{width:100%} /* 标签页：窄屏上把左右内边距和计数收一点，四个标签正好排一行，不会折成 3+1 */ .tabs a{padding:0 7px} .tabs a .n{margin-left:4px;font-size:12px} .tabs{flex-wrap:wrap} /* 配送表：只固定客户这一列，车辆列跟着滑走，不然数字没地方放 */ #grid .sticky-l{position:static} #grid .sticky-l2{left:0} .sheet-head{padding:8px 10px} /* 财务 · 月份总览：月份、应收、待收、按钮 */ table.data.fixed.fin-months,table.data.fixed.fin-list{table-layout:auto;min-width:0} table.fin-months colgroup,table.fin-list colgroup{display:none} table.fin-months th:nth-child(2),table.fin-months td:nth-child(2),table.fin-months th:nth-child(3),table.fin-months td:nth-child(3), table.fin-months th:nth-child(4),table.fin-months td:nth-child(4),table.fin-months th:nth-child(6),table.fin-months td:nth-child(6), table.fin-months th:nth-child(7),table.fin-months td:nth-child(7),table.fin-months th:nth-child(9),table.fin-months td:nth-child(9){display:none} table.fin-months th,table.fin-months td{padding:10px 4px;font-size:13px} table.fin-months td:last-child{padding-right:8px} table.fin-months td:first-child,table.fin-months th:first-child{padding-left:12px} table.fin-months .btn.sm{padding:0 6px;font-size:12px} /* 收入明细：手机上排成卡片，区域、营收、优惠、坏账、付款方式不显示（点开收款窗口里都有） */ table.fin-list th:nth-child(2),table.fin-list td:nth-child(2),table.fin-list th:nth-child(3),table.fin-list td:nth-child(3), table.fin-list th:nth-child(4),table.fin-list td:nth-child(4),table.fin-list th:nth-child(6),table.fin-list td:nth-child(6), table.fin-list th:nth-child(9),table.fin-list td:nth-child(9){display:none} table.fin-list tr.has-bad{background:var(--err-soft)} table.fin-list tr.has-bad td{background:none} table.fin-list .pill{padding:0 6px;font-size:11px} table.fin-list tfoot tr{font-weight:400} table.fin-list tfoot th:first-child{font-size:15px;font-weight:600;margin-bottom:2px} .fin-kpi{padding:10px 12px} .fin-kpi b{font-size:17px} .fin-kpi dl{font-size:11px;gap:2px 6px} /* 收款弹窗 */ dialog.modal.fin{width:calc(100vw - 16px);margin-top:2vh;max-height:96vh} .fin-box .modal-head{padding:16px 16px 4px} .receipt{margin:8px 14px 0} .rrow{height:42px;padding:0 12px} .rrow.edit input{width:120px} .rsub{padding:0 12px 0 16px;gap:8px} .rsub .d{width:auto} .fin-box .modal-body{padding:12px 14px 16px} .fin-confirm{padding:12px} .fc-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} .fc-label{grid-column:1/-1} .fc-row input{min-width:0;width:100%} /* iPhone 的日期框有自带的最小宽度，会撑出格子压到旁边的金额上：去掉系统外观，宽度才听话 */ input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;box-sizing:border-box} input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.2em} .fc-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .fc-row>*{min-width:0;overflow:hidden} .fc-options{gap:6px} .fc-opt{padding:10px 4px} .fc-opt span{display:none} .fin-extra{flex-wrap:wrap} .fin-extra input[name=note]{flex:1 1 100%} .fin-pop{max-width:calc(100vw - 24px);white-space:normal;border-radius:18px;flex-wrap:wrap;justify-content:center;text-align:center;padding:12px 14px} dialog.modal.confirm{width:calc(100vw - 32px)} /* 看板：指标两个一行，卡片一列；总看板里「要注意的事」提到趋势图前面，打开先看结论 */ .board{gap:24px} .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .kpi{padding:12px 14px;gap:4px} .kpi .k-num{font-size:19px} .kpi .k-sub{font-size:12px;white-space:normal} /* 窄了就换行，别把「环比」截成省略号 */ #board-overall .board-grid{display:contents} /* 手机上重新排过顺序：标题、四个数字、重点关注、趋势、客户排行、欠款排行。 漏掉任何一块，它都会按默认的 0 跑到最前面 */ #board-overall>.kpis{order:1} .bc-alerts{order:2} .bc-trend{order:3} #board-rank{order:4} .bc-debts{order:5} .g-2,.g-trend{grid-template-columns:minmax(0,1fr)} .b-list.rank-list{column-count:1} dialog.modal.board-dlg{width:calc(100vw - 16px);margin-top:3vh;max-height:94vh} dialog.modal.board-dlg .modal-head{padding:16px 16px 4px} dialog.modal.board-dlg .modal-body{padding:8px 16px 16px} .bcard{padding:14px 14px 10px} .board-chart{min-height:210px} .sec-head{flex-wrap:wrap} .stepper select{font-size:16px} /* iOS 上不到 16px 的下拉框一点就放大页面 */ .b-row{font-size:13.5px;gap:8px} .b-row .spark{width:56px} .b-row .amt{min-width:64px} .b-row .chg{width:48px} .src-grid{grid-template-columns:minmax(0,1fr);gap:18px} .tabbar a,.tabbar button{font-size:10.5px} /* 月结单 · 月份列表：月份、生成状态、按钮；配送客户数和件数点进去看 */ table.data.fixed.bill-months{table-layout:auto;min-width:0} table.bill-months colgroup,table.bill-months th:nth-child(2),table.bill-months td:nth-child(2), table.bill-months th:nth-child(3),table.bill-months td:nth-child(3),table.bill-months td .muted.small{display:none} table.bill-months th,table.bill-months td{padding:12px 6px;font-size:14px} table.bill-months td:first-child,table.bill-months th:first-child{padding-left:12px} table.bill-months td:last-child{padding-right:10px;width:1%} table.bill-months td .badge.warn{display:block;width:fit-content;margin-top:4px;white-space:normal} /* 月结单弹窗：全屏；抬头分四行——客户名+关闭 / 月份天数件数 / 金额+状态+翻页 / 两个导出大按钮 */ dialog.modal.embed{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0} .embed-head{flex-wrap:wrap;gap:8px 10px;padding:12px 14px !important} .embed-head h2{order:1;flex:1 1 0;min-width:0;flex-direction:column;align-items:flex-start;gap:2px;font-size:18px} .embed-head h2 .muted{font-size:13px} .embed-head > [data-close]{order:2} .embed-head::after{content:"";order:2;flex:0 0 100%;height:0} /* 强制换行 */ .embed-total{order:3;font-size:21px} .embed-head > .pill{order:3} .embed-head > .spacer{order:3} .embed-head .bill-nav{order:3;margin:0} .embed-head .embed-warn{order:4;flex:1 1 100%;max-width:none;white-space:normal;border-radius:10px} .embed-head > .btn:not([data-close]){order:5;flex:1 1 0;height:42px;font-size:15px;justify-content:center} .embed-scroll{margin:10px 10px 8px} .grid.billgrid.compact{--row:30px} /* 手机上输入框是 16px 的字，行太矮会切字；表格本来就能上下滑 */ .embed-bill .bill-foot{padding:8px 12px} .bill-foot input{width:100%;flex:1 1 100%} .bill-foot .spacer{display:none} /* 还没改成卡片、也没自己定过宽度的管理类表格：在自己的框里左右滑，宽一点免得字挤成两行 */ table.data.fixed{min-width:760px} table.data.fixed.cards{min-width:0} /* 卡片式的表格按屏幕宽度排，不横向滚动 */ table.data.fixed.perm-table{table-layout:auto;min-width:0} table.perm-table colgroup{display:none} table.perm-table th,table.perm-table td{padding:8px 4px;font-size:12px} table.perm-table td:first-child,table.perm-table th:first-child{padding-left:12px} /* 现金明细表：列多，留在自己的框里左右滑 */ .cash-kpis{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))} table.data.fixed.cash-list{table-layout:auto;min-width:0} table.cash-list colgroup,table.cash-list .c-cat,table.cash-list .c-more,table.cash-list .c-bal{display:none} table.cash-list th.m-only,table.cash-list td.m-only{display:table-cell} table.cash-list th,table.cash-list td{padding:9px 5px;font-size:13px} table.cash-list td:first-child,table.cash-list th:first-child{padding-left:10px;white-space:nowrap} table.cash-list td:nth-child(2){white-space:normal;word-break:break-all;width:99%} table.cash-list td:nth-child(2) .strong{white-space:normal} table.cash-list td.m-only{color:var(--ok);white-space:nowrap} table.cash-list td.m-only.out{color:var(--err)} table.cash-list td.m-only small{display:block;font-size:11px;font-weight:400;color:var(--muted)} table.cash-list td.m-only span{display:block} table.cash-list td.m-only span.out{color:var(--err)} table.cash-list th.act,table.cash-list td.act{width:1%;padding-right:8px} table.cash-list .act-row{flex-direction:column;gap:4px} .cash-head .sheet-date{flex-wrap:wrap} } /* 导入时发现的新客户：名字一行一个，多了自己滚动 */ .name-list{display:flex;flex-direction:column;gap:6px;max-height:min(46vh,340px);overflow:auto; margin:0;padding:10px 12px;list-style:none;border:1px solid var(--line);border-radius:var(--r);background:#fcfcfd} .name-list li{font-size:14px;color:var(--ink)} .modal-body>.hint{font-size:13px;color:var(--muted);line-height:1.6} .modal-foot form{display:contents} /* 按不动的按钮：不藏起来，灰着放在原位，点一下说明为什么不能按 */ .btn.off{opacity:.55;border-color:var(--line);color:var(--muted);background:#f7f8fa;box-shadow:none;cursor:not-allowed} .btn.off:hover{background:#f7f8fa;border-color:var(--line)} /* 全部通知：一行一家，只写名字和该收该退多少，四十多家一屏看得完 */ dialog.modal.notice-all{width:min(620px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 48px)); display:flex;flex-direction:column} dialog.modal.notice-all:not([open]){display:none} /* 不用 flex 的 gap 排版：吸顶的段标题上面留一条缝，行滚上去会从缝里露出来 */ .notice-all .modal-body{flex:1;min-height:0;overflow:auto;display:block;padding:0 24px 8px} .notice-all .one+.one,.notice-all .grp+.one{margin-top:6px} .notice-all .modal-foot{border-top:1px solid var(--line);align-items:center} .notice-all .modal-foot .hint{margin-right:auto;color:var(--muted);font-size:13px} .notice-all .one{display:flex;align-items:center;gap:10px;padding:8px 12px; border:1px solid var(--line);border-radius:var(--r);background:#fff} .notice-all .one.done{border-color:var(--ok-line);background:var(--ok-soft)} .notice-all .one b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .notice-all .one .sp{flex:1} .notice-all .one:not(.done) .tag{display:none} .notice-all .money{font-style:normal;font-size:13.5px;white-space:nowrap; font-variant-numeric:tabular-nums;color:var(--muted)} .notice-all .money.deduct{color:var(--err)} .notice-all .money.refund{color:var(--ok)} .notice-all .grp{position:sticky;top:0;z-index:1;display:flex;align-items:baseline;gap:8px; margin:0;padding:12px 2px 6px;background:var(--panel);font-size:13px;color:var(--muted);font-weight:600} .notice-all .one+.grp{margin-top:6px} .notice-all .grp span{font-weight:400;color:var(--faint)} /* 通知过的客户：按钮变绿。列表里不另外加标记，名字长短不一，标记排不齐 */ .modal-head .head-row{display:flex;align-items:center;gap:10px} .modal-head .head-row .badge[hidden]{display:none} .btn.done{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)} .btn.done:hover{background:#dcf5e6;border-color:#8fe0b3} /* 上传进度：传文件这段有百分比，服务器统计那段没有，让进度条来回跑表示还在做 */ .up-state{display:flex;flex-direction:column;gap:6px} .up-state[hidden]{display:none} .up-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden} .up-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand); transition:width .2s ease} .up-state.working .up-bar{position:relative;background:var(--brand-100)} .up-state.working .up-bar i{width:40%;animation:up-sweep 1.1s ease-in-out infinite} @keyframes up-sweep{0%{margin-left:-40%}100%{margin-left:100%}} .up-text{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums} .up-err{font-size:13px;color:var(--err);line-height:1.6;margin:0} .up-err[hidden]{display:none} @media (prefers-reduced-motion:reduce){.up-state.working .up-bar i{animation:none;width:100%}} /* 正在生成/下载的按钮：宽度按最长的那句定死，文字来回变也不会把旁边的按钮挤来挤去 */ .btn.busy{pointer-events:none;opacity:.75;min-width:9em;font-variant-numeric:tabular-nums} /* 公司账户第一次用：把今天的余额填进去 */ .opening-set{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)} .opening-set label{font-size:14px;color:var(--ink-2)} .opening-set input{width:140px} /* 月度损益九列，窄窗口下横向滚动，数字不要被截断 */ table.data.fixed.pl-list{min-width:1060px} table.pl-list .gs{border-left:1px solid var(--line);padding-left:16px} table.pl-list .ge{border-right:1px solid var(--line);padding-right:16px} table.pl-list .ge+th,table.pl-list .ge+td{padding-left:16px} /* 成本结构：一行一个大类，一列一个月。第一列钉住，横向滚动时还看得见是哪一行 */ table.matrix{min-width:100%} table.matrix th,table.matrix td{white-space:nowrap;padding-left:10px;padding-right:10px} table.matrix th.c-first,table.matrix td.c-first{position:sticky;left:0;z-index:2;background:#fff; font-weight:600;color:var(--ink);padding-left:16px} table.matrix thead th.c-first{background:var(--head);z-index:3} table.matrix tr.lead td,table.matrix tr.sum td{font-weight:600} table.matrix tr.sum td{background:#fafbfc} table.matrix tr.sum td.c-first{background:#f4f6f8} table.matrix tr.lead td{border-bottom:1px solid var(--line-strong)} table.matrix .ge2{border-left:1px solid var(--line-strong)} /* 共享押金 · 按客户：一个客户一行，点开是这个客户的每一笔（嵌在下面一行里的小表） */ table.dep-cust .gs,table.dep-txns .gs{border-left:1px solid var(--line);padding-left:16px} table.dep-cust .ge,table.dep-txns .ge{border-right:1px solid var(--line);padding-right:16px} table.dep-cust td,table.dep-cust th,table.dep-txns td,table.dep-txns th{white-space:nowrap} table.dep-cust td.wrap,table.dep-txns td.wrap{white-space:normal} table.dep-cust .dep-row{cursor:pointer} table.dep-cust .dep-row:hover td{background:#f9fafb} table.dep-cust .dep-group.open .dep-row td{background:var(--brand-50);border-bottom-color:transparent} table.dep-cust tr.off td{color:var(--muted)} .dep-toggle{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer} .dep-toggle i{width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent; transition:transform .15s} .dep-group.open .dep-toggle i{transform:rotate(90deg)} table.dep-cust td .auto-tag{margin-left:8px} table.dep-cust tr.dep-detail>td{padding:0 16px 14px 36px;background:var(--brand-50)} table.dep-lines{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} table.dep-lines th{background:#fafbfc} table.dep-lines th,table.dep-lines td{padding:7px 10px;font-size:13px} table.dep-lines td.num.in,table.dep-txns td.num.in{color:var(--ok)} table.dep-lines td.num.out,table.dep-txns td.num.out{color:var(--err)} /* 流水类型：缴纳绿、退款红、抵扣黄、转移蓝灰 */ .k-tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:500;background:#f2f4f7;color:var(--ink-2)} .k-tag[data-k="pay"]{background:#e6f6ed;color:#067647} .k-tag[data-k="refund"]{background:#fdecea;color:#b42318} .k-tag[data-k="offset"]{background:#fdf3e1;color:#93500a} .k-tag[data-k="out"],.k-tag[data-k="in"]{background:#eaf0f6;color:#40566d} /* 卡片里三个并排、一样大的数（应扣 / 已扣 / 未扣） */ .fin-kpis:has(.trio){grid-template-columns:1fr 1.7fr 1.7fr 1fr} /* 三个数的卡片宽一些，数字不用挤 */ .fin-kpi.trio .trio-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px} .fin-kpi.trio .trio-nums>div{min-width:0} .fin-kpi>b.date{white-space:nowrap;font-size:clamp(15px,1.5vw,20px)} .fin-kpi.trio .trio-nums small{display:block;font-size:12px;color:var(--muted);margin-bottom:2px} .fin-kpi.trio .trio-nums b.num{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap} .fin-kpi.trio .trio-nums .owe b{color:var(--err)} .fin-kpi.trio .trio-nums .ok-text b{color:var(--ok)} /* 成本结构里的占比条 */ .share-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:3px} .share-bar i{display:block;height:100%;border-radius:999px;background:var(--brand)} tr.off .share-bar i{background:var(--line-strong)} /* 资金总表借用布草首页那套分组底色（布草自己的规则更具体，不会被盖掉） */ table.data .gap{border-left:1px solid var(--line)} table.data .gd{background:#fdf6f5} table.data .gr{background:#f4fbf7} /* 记账弹窗：摘要下面的提示词；看不见但要跟着表单交上去的字段 */ .hint-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .hint-chips[hidden]{display:none} .hint-chips .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-only-field{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none} /* 快捷短语：一行一条，左边把手拖动排序 */ .phrase-list{list-style:none;margin:0;padding:8px 16px 4px;display:flex;flex-direction:column;gap:4px} .phrase-list li{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line); border-radius:var(--r);background:#fff} .phrase-list li b{flex:1;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .phrase-list .del{color:var(--muted);padding:0 8px} .phrase-list .del:hover{background:var(--err-soft);color:var(--err)} .phrase-add{display:flex;align-items:center;gap:8px} .phrase-add input{flex:1;max-width:320px} /* 拖动把手：列表和表格通用 */ .handle{cursor:grab;color:var(--faint);font-size:15px;line-height:1;user-select:none;flex:none} .handle:active{cursor:grabbing} td .handle{margin-right:8px} [data-sort-url].dragging [data-id]{transition:transform .12s ease} [data-sort-url] .drag-source{opacity:.4} .hint-chips .manage{color:var(--muted);border-style:dashed;text-decoration:none} .hint-chips .manage:hover{color:var(--brand);border-color:var(--brand)} /* 字段标题旁边的「管理…」：小字、不抢眼 */ .field>span .field-more{float:right;font-weight:400;font-size:12px;color:var(--muted);text-decoration:none} .field>span .field-more:hover{color:var(--brand)} /* 资金明细：摘要占满、不截断；对账单来的那几行弹窗里给一句说明 */ table.cash-list td.sum-cell{white-space:normal;overflow:hidden;text-overflow:clip;line-height:1.45; word-break:break-word;padding-top:9px;padding-bottom:9px} table.cash-list td.sum-cell .strong{white-space:normal} /* data 表里的 .strong 默认不换行，这里要换 */ table.cash-list td.sum-cell .auto-tag{margin-left:6px} table.cash-list td.subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 科目标签：颜色按大类分（原料、水电、人工……），收入单独一色 */ .s-tag{display:inline-block;max-width:100%;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500; line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle; background:var(--g-bg,#f2f4f7);color:var(--g-fg,var(--ink-2))} /* 一套颜色，按大类（支出）或类别（收入）分：明细表的科目标签、记支出的科目面板、科目表的大类都用它。 --g-bg 浅底，--g-fg 字色（也是选中时的实底），--g-line 边框 */ [data-g="material"]{--g-bg:#fdf0e3;--g-fg:#b54708;--g-line:#f7c99b} /* 原料辅料：橙 */ [data-g="utility"]{--g-bg:#e0f2fe;--g-fg:#026aa2;--g-line:#a5d8f7} /* 水电能耗：天蓝 */ [data-g="labor"]{--g-bg:#f1eafc;--g-fg:#6941c6;--g-line:#cfbdf4} /* 人工：紫 */ [data-g="operating"]{--g-bg:#e8eef8;--g-fg:#35518a;--g-line:#b7c7e3} /* 运营：灰蓝 */ [data-g="capital"]{--g-bg:#ddf5f1;--g-fg:#0f766e;--g-line:#99ddd3} /* 设备工程：青 */ [data-g="nonop"]{--g-bg:#fdecf4;--g-fg:#c11574;--g-line:#f5bcd8} /* 非经营：玫红 */ [data-g="other"]{--g-bg:#f2f4f7;--g-fg:#475467;--g-line:#d0d5dd} /* 其他：灰 */ [data-g="wash_bill"]{--g-bg:#e6f6ed;--g-fg:#067647;--g-line:#a6e0bf} /* 送洗布草：绿 */ [data-g="shared_topup"]{--g-bg:#eceffe;--g-fg:#3538cd;--g-line:#c1c6fb} /* 共享布草充值：靛蓝 */ [data-g="deposit"]{--g-bg:#fef6d8;--g-fg:#8a5a00;--g-line:#f4d98a} /* 共享布草押金：黄 */ [data-g="income_other"]{--g-bg:#f2f4f7;--g-fg:#475467;--g-line:#d0d5dd} /* 其他收入：灰 */ .locked-note{margin:0;padding:10px 12px;border:1px solid var(--info-line);border-radius:var(--r); background:var(--info-soft);color:#1a4a8a;font-size:13px;line-height:1.6} .locked-note[hidden]{display:none} /* 测试环境：顶栏右边点名字切换账号 */ .who-switch .navmenu{left:auto;right:0;min-width:200px} .who-switch .sw-role{padding:8px 12px 2px;font-size:12px;color:var(--muted)} .who-switch form{margin:0} .who-switch .navmenu button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;padding:7px 12px; border:0;border-radius:var(--r);background:none;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left} .who-switch .navmenu button span{font-size:12px;color:var(--faint)} .who-switch .navmenu button:hover{background:#f5f7fa} .who-switch .navmenu button.on{background:var(--brand-50);color:var(--brand-deep);font-weight:600} .who-switch .sw-pwd{margin-top:6px;border-top:1px solid var(--line);border-radius:0} @media (max-width:720px){.topbar .who-switch{display:none}} /* 共享押金：缴纳、退款和账对上了打绿勾（点了去账上那一行），没对上是红问号 */ .v-mark{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;border-radius:50%; font-size:11px;font-weight:700;line-height:1;vertical-align:middle} .v-mark.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-line)} a.v-mark.ok:hover{background:var(--ok);color:#fff;text-decoration:none} .v-mark.no{background:var(--err-soft);color:var(--err);border:1px solid var(--err-line);cursor:help} .tabs a .v-mark{margin:0 5px 0 0;cursor:pointer} /* 分组标签选择（select[data-chips]）：按钮像输入框，点开是按大类排好的小标签 */ select.chip-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .chip-pick{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:36px;padding:0 12px 0 10px; border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;font:inherit;color:var(--ink);cursor:pointer;text-align:left; transition:border-color .12s,box-shadow .12s} .chip-pick:hover{border-color:#b9c0cb} .chip-pick::after{content:"";width:8px;height:8px;margin-left:auto;border-right:1.6px solid #98a2b3;border-bottom:1.6px solid #98a2b3; transform:translateY(-2px) rotate(45deg);flex:none} .chip-pick[aria-expanded="true"],.chip-pick:focus-visible{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-100);outline:0} .chip-pick .ph{color:var(--faint)} .chip-pick .s-tag{font-size:13px;padding:2px 10px} .chip-pick:disabled{background:#f9fafb;cursor:default} .chip-panel{position:fixed;z-index:60;overflow:auto;padding:12px 14px 14px;background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:12px;animation:pop .12s ease-out} .chip-panel[hidden]{display:none} .chip-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;font-weight:500;color:var(--g-fg,var(--muted))} .chip-head::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor} .chip-row{display:flex;flex-wrap:wrap;gap:6px} /* 每个标签用它那一类的浅底色，选中的换成实底白字 */ .chip-opt{padding:5px 11px;border:1px solid var(--g-line,var(--line));border-radius:999px;background:var(--g-bg,#fff); font:inherit;font-size:13px;color:var(--g-fg,var(--ink));cursor:pointer;transition:box-shadow .1s} .chip-opt:hover{box-shadow:0 0 0 2px var(--g-line,var(--line))} .chip-opt.on{background:var(--g-fg);border-color:var(--g-fg);color:#fff} .chip-opt.on{font-weight:600} .chip-inline{padding-top:2px} .chip-inline .chip-opt{padding:6px 13px} /* ========================================================================== 新界面「玻璃」主题（/newdesign-1）：上面是旧界面的整套样式（结构、页面布局照旧）， 这里把配色、字体、圆角、阴影换掉，外壳换成左侧栏，卡片做成毛玻璃。 不加载外部字体：国内打开 Google 字体又慢又不稳，用系统的苹方 / 微软雅黑，数字统一等宽。 ========================================================================== */ :root{ --brand:#2f6feb; --brand-deep:#1d4ed8; --brand-cyan:#38bdf8; --brand-50:rgba(47,111,235,.08); --brand-100:rgba(47,111,235,.16); --accent:var(--brand); --accent-soft:rgba(47,111,235,.1); --bg:#e8edf4; --panel:rgba(255,255,255,.66); --ink:#0f172a; --ink-2:#334155; --muted:#5b6b82; --faint:#94a3b8; --line:rgba(15,23,42,.08); --line-strong:rgba(15,23,42,.14); --head:rgba(248,250,252,.55); --ok:#0b7a6e; --ok-soft:rgba(14,147,132,.1); --ok-line:rgba(14,147,132,.28); --err:#d92d20; --err-soft:rgba(217,45,32,.08); --err-line:rgba(217,45,32,.25); --warn:#b54708; --warn-soft:rgba(247,144,9,.1); --warn-line:rgba(247,144,9,.32); --info:#1d4ed8; --info-soft:rgba(47,111,235,.08); --info-line:rgba(47,111,235,.25); --r-sm:8px; --r:12px; --r-lg:18px; --glass:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.75); --glass-solid:rgba(255,255,255,.9); /* 不用模糊时卡片和侧栏的底色 */ --shadow-card:0 1px 1px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.06); --shadow-pop:0 24px 60px rgba(15,23,42,.22); --side:236px; } html{background:var(--bg)} body.nd{background:transparent;color:var(--ink); font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif; letter-spacing:.01em;font-feature-settings:"tnum" 1} /* 背景两团柔光：卡片是半透明的，底下要有点东西才看得出玻璃感 */ body.nd::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(640px 520px at 8% -6%,rgba(147,187,255,.55),transparent 70%), radial-gradient(760px 600px at 100% 110%,rgba(166,230,216,.5),transparent 70%),var(--bg)} .num,td.r,th.r,.fin-kpi b,.fin-kpi dd{font-variant-numeric:tabular-nums} a{color:var(--brand)} h1{font-size:24px;font-weight:650;letter-spacing:.01em} h2{font-size:15px;font-weight:600} /* ---------- 外壳：左侧栏（电脑）/ 顶条 + 底部一排（手机） ---------- */ .topbar{display:none} .nd-side{position:fixed;z-index:50;left:14px;top:14px;bottom:14px;width:var(--side);display:flex;flex-direction:column;gap:8px; padding:16px 12px 12px;background:var(--glass-solid);border:1px solid var(--glass-line);border-radius:20px;box-shadow:var(--shadow-card)} /* 侧栏和卡片不再用 backdrop-filter 毛玻璃：整屏固定的大块模糊每次滚动都要重算，普通电脑上整站都卡； 改成不透明一点的底色，看起来差不多。弹窗、下拉里的模糊保留（只在打开时才有） */ .nd-brand{display:flex;align-items:center;gap:10px;padding:0 8px;font-weight:700;font-size:16px;color:var(--ink);letter-spacing:.06em} .nd-brand:hover{text-decoration:none} .nd-brand img{width:28px;height:28px;object-fit:contain} .nd-side .env-tag{align-self:flex-start;margin:0 8px} .nd-search{display:flex;align-items:center;gap:8px;height:38px;margin:6px 2px 2px;padding:0 10px;border:1px solid var(--line);border-radius:12px; background:rgba(255,255,255,.7);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-align:left} .nd-search span{flex:1} .nd-search:hover{border-color:var(--line-strong);color:var(--ink-2)} kbd{font:600 11px/1 -apple-system,sans-serif;padding:3px 6px;border-radius:6px;background:rgba(15,23,42,.06);color:var(--muted)} .nd-nav{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.14) transparent;display:flex;flex-direction:column;gap:6px;margin:0 -4px;padding:0 4px} /* 菜单放不下时有一条细滚动条 */ .nd-glabel{font-size:11.5px;color:var(--faint);padding:10px 10px 4px;letter-spacing:.12em} .nd-group a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;color:var(--ink-2);font-size:14px; transition:background .15s,color .15s} .nd-group a:hover{background:rgba(255,255,255,.7);text-decoration:none;color:var(--ink)} .nd-group a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(15,23,42,.08)} .nd-group a.on svg{color:var(--brand)} .nd-group svg{color:var(--muted);flex:none} .nd-group .fin-pins{display:flex;flex-wrap:wrap;gap:6px;padding:2px 6px} .nd-group .fin-pins a{height:28px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.7);font-size:12.5px;color:var(--ink-2)} .nd-group .fin-pins a.on{background:var(--brand);color:#fff} .nd-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px} .nd-foot .save-state{padding:0 10px;margin:0;min-height:0} .nd-foot .save-state:empty{display:none} .nd-who,.nd-foot .who-switch>.navgroup-btn{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 8px;border-radius:10px; color:var(--ink-2);font:inherit;font-size:13px;background:none;border:0;cursor:pointer;text-align:left} .nd-who:hover,.nd-foot .who-switch>.navgroup-btn:hover{background:rgba(255,255,255,.7);text-decoration:none} .nd-avatar{width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none} .nd-foot .who-switch{position:relative} .nd-foot .who-switch .navmenu{left:0;right:auto;top:auto;bottom:calc(100% + 6px);min-width:220px;max-height:60vh;overflow:auto} .nd-footlinks{display:flex;gap:4px;padding:0 4px} .nd-footlinks a,.nd-iconbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--muted);background:none;border:0;cursor:pointer} .nd-footlinks a:hover,.nd-iconbtn:hover{background:rgba(255,255,255,.75);color:var(--ink)} .nd-footlinks form{margin-left:auto} .nd-mtop{display:none} body.nd main.page{margin-left:calc(var(--side) + 28px);margin-right:auto;max-width:1360px;padding:26px 28px 56px} body.nd main.page.wide{max-width:none;margin-right:0;padding:18px 18px 28px} body.nd main.page.narrow{max-width:800px} @media (min-width:1700px){body.nd main.page:not(.wide){margin-left:max(calc(var(--side) + 28px),calc((100vw - 1360px) / 2 + 120px))}} /* ---------- 页头、卡片 ---------- */ .page-head{margin-bottom:22px} .page-head h1{font-size:26px} .crumbs{font-size:13px} .card,.fin-kpi,.due-card{background:var(--glass-solid);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)} .card-head{border-bottom-color:var(--line);padding:14px 18px} .fin-kpis{gap:16px;margin-bottom:18px} .fin-kpi{padding:16px 18px;border-radius:18px} .fin-kpi>span{font-size:13px;color:var(--muted)} .fin-kpi b{font-size:24px;font-weight:650;letter-spacing:-.01em} .card-foot{border-top-color:var(--line)} /* ---------- 按钮、分段、表单 ---------- */ .btn{height:38px;border-radius:12px;border:1px solid rgba(15,23,42,.1);background:rgba(255,255,255,.85);color:var(--ink); box-shadow:0 1px 1px rgba(15,23,42,.04);transition:background .15s,box-shadow .15s,transform .1s} .btn:hover{background:#fff;text-decoration:none} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(47,111,235,.28)} .btn.primary:hover{background:var(--brand-deep);filter:none} .btn.primary.out{background:var(--err);border-color:var(--err);box-shadow:0 6px 16px rgba(217,45,32,.22)} .btn.sm{height:30px;border-radius:9px} .tabs{background:rgba(15,23,42,.05);border-radius:12px;padding:4px} .tabs a{height:28px;border-radius:9px;font-weight:500} .tabs a.on{background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.12)} input,select,textarea{border-radius:10px;border-color:rgba(15,23,42,.14);background:rgba(255,255,255,.9)} input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-100)} /* ---------- 表格 ---------- */ table.data th{background:transparent;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line)} table.data td{border-bottom-color:rgba(15,23,42,.05)} table.data tbody tr:hover td{background:rgba(255,255,255,.5)} .pill{border-radius:999px} .pill.ok{background:var(--ok-soft);color:var(--ok)} /* ---------- 对话框、气泡 ---------- */ dialog.modal{border-radius:22px;background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-pop)} dialog.modal::backdrop,dialog.sheet::backdrop{background:rgba(15,23,42,.28)} dialog.modal[open]{animation:nd-pop .2s cubic-bezier(.2,.8,.2,1)} @keyframes nd-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}} dialog.sheet{background:#fff} .flash{border-radius:14px} /* ---------- 全局搜索（⌘K） ---------- */ dialog.nd-cmd{border:1px solid rgba(255,255,255,.9);padding:0;width:min(640px,calc(100vw - 24px));margin:12vh auto auto;border-radius:22px; background:#fff;box-shadow:var(--shadow-pop);color:var(--ink);overflow:hidden} dialog.nd-cmd::backdrop{background:rgba(15,23,42,.28)} dialog.nd-cmd[open]{animation:nd-pop .18s cubic-bezier(.2,.8,.2,1)} .nd-cmd-q{display:flex;align-items:center;gap:12px;height:60px;padding:0 18px;border-bottom:1px solid var(--line);color:var(--muted)} .nd-cmd-q input{flex:1;border:0;background:none;font-size:17px;height:56px;padding:0;box-shadow:none;color:var(--ink)} .nd-cmd-q input:focus{box-shadow:none} .nd-cmd-list{max-height:min(60vh,480px);overflow:auto;padding:6px 0 10px} .nd-cmd-list .grp{font-size:12px;color:var(--muted);padding:10px 20px 4px} .nd-cmd-list a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;color:var(--ink);font-size:14px} .nd-cmd-list a:hover,.nd-cmd-list a.on{background:var(--brand-50);text-decoration:none} .nd-cmd-list a .r{margin-left:auto;font-size:12.5px;color:var(--muted)} .nd-cmd-list a svg{color:var(--muted);flex:none} .nd-cmd-list .empty{padding:24px 20px;color:var(--muted);text-align:center} /* ---------- 手机 ---------- */ @media (max-width:1023px){ :root{--side:0px} .nd-side{display:none} .nd-mtop{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:50;height:56px;padding:0 12px 0 16px; padding-top:env(safe-area-inset-top);background:rgba(232,237,244,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.6)} .nd-mtop .nd-brand{padding:0;font-size:16px} body.nd main.page,body.nd main.page.wide{margin-left:0;padding:16px 14px 24px} .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;z-index:60;left:10px;right:10px; bottom:calc(10px + env(safe-area-inset-bottom));height:62px;border-radius:22px;background:rgba(255,255,255,.72); backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.8); box-shadow:0 10px 30px rgba(15,23,42,.14)} .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none; font:inherit;font-size:11px;color:var(--muted);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .tabbar svg{width:22px;height:22px} .tabbar .on{color:var(--brand);font-weight:600} body.nd:has(.tabbar){padding-bottom:calc(84px + env(safe-area-inset-bottom))} .sheet-links a,.sheet-links button{gap:6px} .sheet-links svg{flex:none} } @media (max-width:720px){ .page-head h1{font-size:22px} .fin-kpi b{font-size:20px} } @media print{ body.nd::before,.nd-side,.nd-mtop,.tabbar{display:none !important} body.nd main.page{margin:0;padding:0} } /* 负数金额：红色（脚本按文字开头的负号加上这个类） */ .nd-neg{color:var(--err) !important} /* ---------- 待收账龄 ---------- */ .aging-sum{padding:18px 20px;margin-bottom:16px} .aging-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .aging-total span:first-child{font-size:13px;color:var(--muted)} .aging-total b{font-size:30px;font-weight:650;letter-spacing:-.01em} .aging-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin-top:14px;background:rgba(15,23,42,.06)} .aging-bar i{min-width:4px} .aging-kpis{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row} .aging-kpis a.fin-kpi{color:inherit;transition:box-shadow .15s,transform .15s} .aging-kpis a.fin-kpi:hover{text-decoration:none;box-shadow:0 12px 32px rgba(15,23,42,.1)} .aging-kpis a.fin-kpi.on{outline:2px solid var(--brand);outline-offset:-2px} .aging-kpis .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px} .aging-months{display:flex;flex-wrap:wrap;gap:6px;white-space:normal} .aging-chip{display:inline-flex;align-items:baseline;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(217,45,32,.07);color:var(--ink-2);font-size:12.5px} .aging-chip b{font-weight:600;color:var(--err)} .aging-chip:hover{background:rgba(217,45,32,.13);text-decoration:none} .aging-days{display:inline-flex;align-items:baseline;gap:3px;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);font-size:12.5px} .aging-days b{font-size:14px} table.aging-list td.act{width:236px} table.aging-list .acts{display:flex;gap:6px;justify-content:flex-end} @media (max-width:900px){.aging-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- 客户总览 ---------- */ .hub-meta{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 18px} .hub-meta span:not(.pill){padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--glass-line);font-size:13px;color:var(--ink-2)} .hub-co{font-size:15px !important;font-weight:600 !important;line-height:1.4;letter-spacing:0 !important} .hub-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px;align-items:start} .hub-bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding:18px 20px 6px} .hub-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px} .hub-bar i{display:block;width:100%;max-width:38px;border-radius:8px 8px 3px 3px;background:rgba(47,111,235,.28);min-height:3px;transition:height .4s} .hub-bar.open i{background:rgba(217,45,32,.55)} .hub-bar:last-child i{background:var(--brand)} .hub-bar.open:last-child i{background:var(--err)} .hub-bar span{font-size:11.5px;color:var(--muted)} table.hub-prices td{padding:9px 18px} @media (max-width:1100px){.hub-grid{grid-template-columns:1fr}} table.hub-months td,table.hub-months th{white-space:nowrap;padding-left:9px;padding-right:9px} table.hub-prices{width:100%} /* ---------- 配送数量和平时差太多：橙色（只提醒） ---------- */ #grid td.nd-odd{background:rgba(247,144,9,.14) !important;box-shadow:inset 0 0 0 2px rgba(247,144,9,.7)} #grid td.nd-odd input{color:#b54708;font-weight:700} /* ---------- 手机填配送表 ---------- */ body.m-deliv-on main.page.wide>.page-head,body.m-deliv-on .sheet-panel,body.m-deliv-on main>.flash.info{display:none} .m-deliv{display:flex;flex-direction:column;gap:12px} .m-date{display:flex;align-items:center;gap:6px} .m-nav{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.7);color:var(--ink);cursor:pointer;flex:none} .m-nav.off,.m-nav:disabled{opacity:.35;pointer-events:none} .m-dtitle{position:relative;display:flex;flex-direction:column;line-height:1.25;padding:0 4px;cursor:pointer} .m-dtitle b{font-size:18px}.m-dtitle span{font-size:12px;color:var(--muted)} .m-dtitle input{position:absolute;inset:0;opacity:0;width:100%;height:100%} .m-today{font-size:12.5px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.7);color:var(--brand)} .m-today.on{background:var(--brand-50)} .m-manifest{margin-left:auto} .m-vchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px} .m-vchips::-webkit-scrollbar{display:none} .m-vchip{flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:8px 14px;border-radius:14px;border:1px solid var(--glass-line); background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:inherit;color:var(--muted);font-size:12px;cursor:pointer} .m-vchip b{font-size:14.5px;color:var(--ink)} .m-vchip.on{background:var(--brand);border-color:var(--brand);color:rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(47,111,235,.3)} .m-vchip.on b{color:#fff} .m-card{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;box-shadow:var(--shadow-card); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .m-vsum{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px} .m-vsum b{display:block;font-size:15px}.m-vsum span{font-size:12.5px;color:var(--muted)} .m-clist{overflow:hidden} .m-crow{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 12px 0 10px;border:0;border-bottom:1px solid var(--line); background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer} .m-crow:last-child{border-bottom:0} .m-crow:active{background:rgba(255,255,255,.6)} .m-no{width:20px;text-align:right;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums} .m-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;flex:none}.m-dot.done{background:#0e9384} .m-nm{flex:1;font-size:15px}.m-nm em{font-style:normal;font-size:11px;margin-left:6px;padding:1px 6px;border-radius:6px;background:var(--warn-soft);color:var(--warn)} .m-qt{font-weight:650;font-variant-numeric:tabular-nums}.m-todo{font-size:13px;color:var(--faint)} .m-crow svg{color:var(--faint)} .m-empty{padding:28px 16px;text-align:center;color:var(--muted)} /* 逐项录入：整屏，底部是数字键盘 */ .m-entry{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--bg)} .m-entry::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(520px 420px at 0 0,rgba(147,187,255,.5),transparent 70%)} .m-ehead{display:flex;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 12px 6px} .m-etitle{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .m-etitle b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-etitle span{font-size:12px;color:var(--muted)} .m-esum{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px 6px;font-size:13px;color:var(--muted)} .m-esum b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums} .m-save{font-style:normal;color:var(--ok)}.m-save.saving{color:var(--warn)}.m-save.error{color:var(--err)} .m-warn{display:flex;gap:8px;margin:0 12px 8px;padding:10px 12px;border-radius:12px;background:rgba(247,144,9,.13);color:#93370d;font-size:13px;line-height:1.5} .m-warn svg{flex:none;margin-top:2px} .m-ilist{flex:1;overflow-y:auto;margin:0 12px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line); -webkit-overflow-scrolling:touch} .m-irow{display:grid;grid-template-columns:minmax(0,1fr) auto 100px;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 14px; border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer} .m-iname{font-size:15.5px;display:flex;align-items:center;gap:6px} .m-iname em{font-style:normal;font-size:11px;padding:1px 6px;border-radius:6px;background:var(--err-soft);color:var(--err)} .m-ref{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums} .m-val{height:42px;border-radius:12px;background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.1);display:flex;align-items:center;justify-content:flex-end; padding:0 12px;font-size:19px;font-weight:650;font-variant-numeric:tabular-nums} .m-irow.cur{background:rgba(47,111,235,.07)}.m-irow.cur .m-val{border:2px solid var(--brand);box-shadow:0 0 0 4px var(--brand-100)} .m-irow.warn .m-val{border:2px solid #f79009;color:#b54708} .m-caret{display:inline-block;width:2px;height:22px;background:var(--brand);margin-left:2px;animation:m-blink 1s steps(2) infinite} @keyframes m-blink{50%{opacity:0}} .m-more{width:100%;height:48px;border:0;background:none;color:var(--brand);font:inherit;font-size:14px;cursor:pointer} .m-entry.ro .m-ilist{margin-bottom:calc(12px + env(safe-area-inset-bottom))} .m-keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 10px calc(12px + env(safe-area-inset-bottom));margin-top:10px; background:rgba(232,237,244,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line)} .m-keypad button{height:52px;border:0;border-radius:13px;background:#fff;font:inherit;font-size:23px;font-weight:600;color:var(--ink); box-shadow:0 1px 1px rgba(15,23,42,.12);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .m-keypad button:active{background:#e2e8f0;transform:scale(.97)} .m-keypad button.fn{background:#dce3ee;font-size:15px;font-weight:500} .m-keypad button.go{grid-row:span 2;height:auto;background:var(--brand);color:#fff;font-size:16px} .m-keypad button.go:active{background:var(--brand-deep)} /* ---------- 打印：账单（A4 横向）。屏幕上的抬头、落款只在打印时出现 ---------- */ .nd-print-only{display:none} @media print{ @page{size:A4 landscape;margin:9mm 10mm} html,body.nd{background:#fff !important} body.nd{font-size:10pt;color:#000;padding:0 !important} body.nd::before,.nd-side,.nd-mtop,.tabbar,.test-watermark,dialog{display:none !important} body.nd main.page,body.nd main.page.wide{margin:0 !important;padding:0 !important;max-width:none} .nd-print-only{display:block} body.bill-print-page .page-head{display:none} .card,.panel,.fin-kpi{background:#fff !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} a{color:inherit !important;text-decoration:none !important} /* 抬头 */ .nd-print-head{margin-bottom:5mm} .ph-title{display:grid;grid-template-columns:40mm 1fr 40mm;align-items:center;border-bottom:1.2pt solid #000;padding-bottom:3mm} .ph-title img{height:10mm;width:auto} .ph-title h1{font-size:17pt;letter-spacing:.3em;text-align:center;margin:0} .ph-meta{display:flex;flex-wrap:wrap;gap:2mm 9mm;margin-top:3mm;font-size:9.5pt} .ph-meta span{color:#555;margin-right:2mm}.ph-meta b{font-weight:600} /* 账单表格：一页放下整个月 */ #bill .scroll{overflow:visible !important;max-height:none !important} #bill table.billgrid{min-width:0 !important;width:100%;font-size:8.5pt;border-collapse:collapse} #bill table.billgrid th,#bill table.billgrid td{position:static !important;border:.5pt solid #999 !important;padding:.6mm 1.2mm !important;height:auto !important;background:#fff !important;color:#000 !important} #bill table.billgrid th{background:#f0f0f0 !important;font-weight:600} #bill table.billgrid tr.sum-row td,#bill table.billgrid tr.fee-row td{font-weight:700} #bill table.billgrid input{border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important;font:inherit;text-align:right;width:100%} #bill .wd,#bill .bill-foot{display:none !important} .cell-flag,.set-price{display:none !important} /* 落款 */ .nd-print-foot{margin-top:4mm;font-size:9.5pt} .pf-total{display:flex;align-items:baseline;gap:5mm;flex-wrap:wrap;border:1pt solid #000;padding:2.5mm 4mm} .pf-total b{font-size:15pt}.pf-total em{font-style:normal;letter-spacing:.08em} .pf-note{margin-top:2mm}.pf-note span{color:#555;margin-right:3mm} .pf-bank{display:flex;gap:8mm;margin-top:2mm;color:#333} .pf-sign{display:grid;grid-template-columns:1fr 1fr;gap:20mm;margin-top:6mm} .pf-sign div{display:grid;grid-template-columns:auto 1fr auto;gap:3mm;align-items:end} .pf-sign i{border-bottom:.8pt solid #000;height:8mm} } @media print{ /* 一个月 31 天 + 单价、返洗、合计、洗涤费，要放进一页 A4 横向 */ #bill table.billgrid{font-size:7.8pt;line-height:1.15} #bill table.billgrid th,#bill table.billgrid td{padding:.25mm 1mm !important} .nd-print-head{margin-bottom:3mm} .ph-title{padding-bottom:2mm}.ph-title h1{font-size:15pt}.ph-title img{height:8mm} .ph-meta{margin-top:2mm;font-size:9pt} .nd-print-foot{margin-top:3mm;font-size:9pt;break-inside:avoid} .pf-total{padding:1.8mm 3mm}.pf-total b{font-size:13pt} .pf-sign{margin-top:4mm}.pf-sign i{height:6mm} } @media print{ #bill table.billgrid .pz{display:none !important} .pf-row{display:grid;grid-template-columns:1.4fr 1fr;gap:6mm;align-items:stretch} .pf-total{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:1.5mm 4mm} .pf-dx{width:100%}.pf-note{width:100%;color:#333} .pf-bank{display:flex;flex-direction:column;justify-content:center;gap:.8mm;margin:0;border:1pt solid #000;padding:1.8mm 3mm} .pf-sign div{grid-template-columns:auto 1fr auto 26mm} .pf-sign i.d{border-bottom:.8pt solid #000;height:6mm} } @media print{ #bill table.billgrid{font-size:7.6pt;line-height:1.08} #bill table.billgrid th,#bill table.billgrid td{padding:.1mm 1mm !important} #bill,.panel.bill{margin:0 !important;padding:0 !important} .nd-print-foot{margin-top:2.5mm} .pf-sign{margin-top:3mm} } /* ---------- 看板配色：紫色换成主色蓝一族；已收青绿、待收红（和全站一致） ---------- */ .seg a.on{background:var(--brand)} .stepper a:hover{background:var(--brand-50);color:var(--brand)} .stepper select:focus{background:var(--brand-50)} .b-row .spark{color:var(--brand)} .legend .sw.rate{background:#0e9384} .board-chart .band{fill:rgba(255,255,255,.55)} .board-chart .cur.a0,.legend .sw.a0,.board-chart .last.a0{fill:#2f6feb;background:#2f6feb} .board-chart .cur.a1,.legend .sw.a1,.board-chart .last.a1{fill:#6d9bf6;background:#6d9bf6} .board-chart .cur.a2,.legend .sw.a2,.board-chart .last.a2{fill:#a3c1fa;background:#a3c1fa} .board-chart .cur.a3,.legend .sw.a3,.board-chart .last.a3{fill:#d1e0fd;background:#d1e0fd} .board-chart .owed,.legend .sw.owed{fill:#f97066;background:#f97066} .board-chart .rate{stroke:#0e9384} .board-chart .rate-dot{fill:#0e9384} .board-chart .rate-text{fill:#0b7a6e} .age-bar .now,.age-bar .s-wash,.age-bar .s-company{background:#2f6feb} .age-bar .s-shared{background:#a3c1fa} .age-bar .s-cash{background:#38bdf8} .age-row .dot,.src-item .dot{background:#2f6feb} .src-item.s-shared .dot{background:#a3c1fa} .src-item.s-cash .dot{background:#38bdf8} .guide-toc a.g-bills,.gsec.g-bills{--g:#2f6feb;--g-soft:rgba(47,111,235,.08)} /* 手机：卡片列表不要桌面宽表的最小宽度；三个数的卡片独占一行 */ @media (max-width:720px){ table.data.cards.fixed{min-width:0!important} table.data.fixed.dep-cust{min-width:940px} /* 按客户：可以展开明细，不做卡片，左右滑动 */ main.bill-page .page-head{align-items:stretch} } @media (max-width:900px){ .fin-kpis:has(.trio){grid-template-columns:repeat(2,minmax(0,1fr))} .fin-kpi.trio{grid-column:1/-1;order:1} /* 两张单数卡片并排在上面 */ } @media (max-width:600px){.fin-kpi dd{white-space:normal}} /* 电脑上：新界面多了左侧栏，日期也写成「2026年9月23日」，按比例定死的列宽放不下。 改成按内容排：不截断，也不折行（备注这类长文字除外） */ @media (min-width:721px){ table.data.fixed,table.data.fixed[class]{table-layout:auto;min-width:0} /* 宽度由内容决定，放不下才左右滑动 */ table.data.fixed td{overflow:visible;text-overflow:clip} table.data.fixed td{white-space:nowrap} table.data.fixed td.wrap{white-space:normal} } /* 中等宽度（小笔记本、平板横放）：侧栏只留图标，表格多出一百多像素 */ @media (min-width:1024px) and (max-width:1365px){ :root{--side:72px} .nd-side{padding:14px 8px 10px;align-items:stretch} .nd-brand{justify-content:center;padding:0} .nd-brand span,.nd-side .env-tag,.nd-search span,.nd-search kbd,.nd-group a span,.nd-foot .nd-who span:not(.nd-avatar), .nd-foot .who-switch>.navgroup-btn span:not(.nd-avatar){display:none} .nd-search{justify-content:center;padding:0;margin:6px 0 2px} .nd-glabel{font-size:0;padding:0;margin:6px 10px;border-top:1px solid var(--line)} .nd-group a{justify-content:center;padding:0} .nd-group .fin-pins{flex-direction:column;padding:0} .nd-group .fin-pins a{justify-content:center;padding:0 2px;font-size:11px} .nd-who,.nd-foot .who-switch>.navgroup-btn{justify-content:center;padding:0} .nd-group a{height:34px} .nd-footlinks{display:grid;grid-template-columns:repeat(2,28px);justify-content:center;gap:4px;padding:0} .nd-footlinks a,.nd-footlinks .nd-iconbtn{width:28px;height:28px;border-radius:8px} .nd-footlinks form{margin-left:0} .nd-side .env-tag+.nd-search{margin-top:4px} } @media (max-width:1100px){.g-trend{grid-template-columns:minmax(0,1fr)}} /* 月度列表带「待收款」标签，窄栏放不下 */ /* ===================================================================== 视觉第二版：浅色极光底 + 真正的毛玻璃 + 动效 ===================================================================== */ :root{ --bg:#eef2f9; --glass:rgba(255,255,255,.8); /* 普通卡片：不用模糊了，透一点点就够 */ --glass-2:rgba(255,255,255,.9); /* 放表格的卡片：字要清楚，基本不透 */ --glass-line:rgba(255,255,255,.72); --glass-blur:blur(28px) saturate(185%); --shadow-card:0 0 0 .5px rgba(15,23,42,.06),0 2px 8px -2px rgba(15,23,42,.08); /* 轻阴影：大模糊、多层叠加的阴影每张卡片都要画，去掉 */ --shadow-lift:0 0 0 .5px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.9),0 26px 50px -20px rgba(30,64,175,.32),0 4px 10px -4px rgba(15,23,42,.08); --head:rgba(255,255,255,.55); --ease:cubic-bezier(.2,.8,.2,1); } /* 测试环境不再把底色压成深灰（旧界面的做法），靠左上角的标签和水印区分 */ body.nd.testenv{--bg:#eef2f9} body.nd.testenv .crumbs,body.nd.testenv .crumbs a{color:var(--muted)} /* 底：四团很淡的彩色光，固定不动（动起来会让每张玻璃卡片每一帧都重新模糊，卡顿） */ body.nd::before{ background: radial-gradient(48vw 44vw at 4% -6%,rgba(79,134,255,.62),transparent 64%), radial-gradient(40vw 38vw at 62% -14%,rgba(167,139,250,.34),transparent 64%), radial-gradient(44vw 40vw at 106% 8%,rgba(56,205,245,.5),transparent 62%), radial-gradient(50vw 46vw at -8% 104%,rgba(168,140,255,.42),transparent 64%), radial-gradient(46vw 42vw at 102% 106%,rgba(52,211,170,.42),transparent 62%), linear-gradient(160deg,#eaf0fd,#eef3f9 50%,#e8f4f4); } /* 玻璃：半透明 + 强模糊 + 提饱和，边上一圈亮边，顶上一道高光 */ /* 卡片和侧栏不用 backdrop-filter 毛玻璃：整页几十块大面积模糊每次滚动都要重算，普通电脑上整站都卡。 底色调得不透明一点，看起来差不多。弹窗、命令面板的模糊保留（只在打开时才有） */ .card,.fin-kpi,.due-card,.m-card,.m-ilist,.m-vchip,.hub-meta span:not(.pill){ background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 44%),var(--glass); border:1px solid var(--glass-line);box-shadow:var(--shadow-card)} .card:has(table),.card:has(.grid),.card:has(.b-list){background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 30%),var(--glass-2)} .nd-side{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.86));border:1px solid rgba(255,255,255,.75); box-shadow:var(--shadow-card)} .nd-group a.on{background:rgba(255,255,255,.92);box-shadow:0 0 0 .5px rgba(15,23,42,.06),0 4px 12px -4px rgba(30,64,175,.25)} .nd-search{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8)} .nd-mtop{background:rgba(243,246,252,.6)!important;backdrop-filter:blur(24px) saturate(180%)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important; border-bottom:1px solid rgba(255,255,255,.7)!important} .tabbar{background:rgba(255,255,255,.55)!important;backdrop-filter:blur(28px) saturate(190%)!important;-webkit-backdrop-filter:blur(28px) saturate(190%)!important} /* 按钮：主按钮是带高光的蓝色渐变，普通按钮是小块玻璃 */ .btn{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9); box-shadow:0 0 0 .5px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.05); transition:background .2s,box-shadow .2s,transform .15s var(--ease)} .btn:hover{background:rgba(255,255,255,.9);box-shadow:0 0 0 .5px rgba(15,23,42,.1),0 6px 16px -6px rgba(30,64,175,.25)} .btn:active{transform:scale(.97)} .btn.primary{background:linear-gradient(180deg,#4a8bff,#2563eb);border-color:rgba(37,99,235,.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -8px rgba(37,99,235,.6)} .btn.primary:hover{background:linear-gradient(180deg,#5b97ff,#1f5ae0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 24px -8px rgba(37,99,235,.65)} .btn.excel{background:linear-gradient(180deg,#22a06b,#15803d);border-color:#15803d;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -8px rgba(21,128,61,.55)} .btn.primary.out{background:linear-gradient(180deg,#f0564b,#d92d20);border-color:#d92d20} .tabs{background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 2px rgba(15,23,42,.05)} .tabs a{transition:color .2s} .tabs a.on{background:rgba(255,255,255,.95);box-shadow:0 0 0 .5px rgba(15,23,42,.06),0 2px 8px -2px rgba(30,64,175,.2)} input,select,textarea{background:rgba(255,255,255,.7);border-color:rgba(15,23,42,.1);transition:border-color .15s,box-shadow .2s,background .2s} input:focus,select:focus,textarea:focus{background:#fff} /* 表格：表头、行都是透明的，只留很淡的分隔线；鼠标移上去一行亮起来 */ table.data th{background:rgba(255,255,255,.35)} table.data tbody tr td{} table.data tbody tr:hover td{background:rgba(255,255,255,.65)} /* 配送表、账单表这类格子：录入的地方要实，底色用接近白的，不再透出灰 */ .grid td{background:rgba(255,255,255,.78)} .grid th,.grid thead .sticky-l,.grid thead .sticky-l2,.grid tfoot .sticky-l,.grid tfoot .sticky-l2{background:rgba(246,249,253,.96)} .grid .sticky-l,.grid .sticky-l2{background:rgba(252,253,255,.97)} .grid .c-total{background:rgba(244,247,252,.95)} .grid td.ro{background:rgba(241,244,249,.9)} .grid tbody.group>tr:first-child>td{border-top:2px solid rgba(47,111,235,.18)} /* 提醒条：用玻璃，不用一整块灰底 */ /* 提醒条：底色要清楚。淡色半透明叠在彩色底上会发灰发脏，这里用接近不透明的浅色，左边一道色条，字用深一档的同色 */ .flash{border:1px solid transparent;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 20px -12px rgba(15,23,42,.18);border-left-width:4px;font-weight:500} .flash.warn{background:#fff8ec;border-color:#fcd9a8;border-left-color:#f59e0b;color:#8a3a08} .flash.error{background:#fff3f2;border-color:#fcc9c4;border-left-color:#e5483a;color:#8f1f16} .flash.ok{background:#f0fbf6;border-color:#b6ead0;border-left-color:#12a371;color:#075c3c} .flash.info{background:#f2f7ff;border-color:#c5dafd;border-left-color:#3b82f6;color:#1a4aa3} .flash.warn::before{background:#f59e0b} .page-head .flash.inline-alerts{border-left-width:1px;background:#fff8ec;border-color:#fcd9a8} /* 对话框、弹层：不透明白底，不用 backdrop-filter 毛玻璃——一是慢；二是带 backdrop-filter 的弹窗会变成里面 position:fixed 元素（科目面板）的定位基准，面板按视口算的坐标会被推出弹窗外、被弹窗裁掉，点不到。背后的页面只压暗 */ dialog.modal,dialog.nd-cmd{background:#fff; border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 80px -24px rgba(15,23,42,.35)} dialog.sheet{background:#fff} dialog.modal::backdrop,dialog.sheet::backdrop,dialog.nd-cmd::backdrop{background:rgba(30,41,59,.28);backdrop-filter:none;-webkit-backdrop-filter:none} /* ---------- 动效 ---------- */ /* 1. 不用浏览器的跨页过渡（@view-transition）：实测切到每日配送这种大页面时，浏览器要先给旧页面拍快照、 等新页面整页就绪才开始，首屏晚 300 毫秒，还会冻住一帧。换页的感觉交给下面的进场动画 */ /* 2. 打开页面：卡片依次浮上来 */ @keyframes nd-rise{from{opacity:0;transform:translateY(10px)}} main.page .fin-kpis>*,main.page .kpis>*,main.page>.card,main.page>section.card,.hub-grid>*,.board-sec>*{animation:nd-rise .45s var(--ease) backwards} main.page .fin-kpis>:nth-child(2),main.page .kpis>:nth-child(2){animation-delay:.04s} main.page .fin-kpis>:nth-child(3),main.page .kpis>:nth-child(3){animation-delay:.08s} main.page .fin-kpis>:nth-child(4),main.page .kpis>:nth-child(4){animation-delay:.12s} /* 页面内保存后的刷新（nd.js 的 stillReload）不放进场动画：记一笔账、改一格回来，页面不该「跳」一下 */ html.nd-still :is(main.page .fin-kpis>*,main.page .kpis>*,main.page>.card,main.page>section.card,.hub-grid>*,.board-sec>*,.pay-strip){animation:none} main.page .fin-kpis>:nth-child(n+5),main.page .kpis>:nth-child(n+5){animation-delay:.16s} main.page>.card,main.page>section.card,.hub-grid>*,.board-sec>*{animation-delay:.1s} /* 3. 可点的卡片：鼠标移上去轻轻浮起 */ a.fin-kpi,a.kpi,.aging-kpis .fin-kpi{transition:transform .25s var(--ease),box-shadow .25s var(--ease)} a.fin-kpi:hover,a.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);text-decoration:none} /* 4. 进度条从 0 长到实际比例；看板柱子从底下长出来，回款率折线画出来 */ @keyframes nd-fill{from{transform:scaleX(0)}} .fin-progress i{transform-origin:left;animation:nd-fill .9s var(--ease) .15s both} @keyframes nd-grow{from{transform:scaleY(0)}} .board-chart.intro rect.cur,.board-chart.intro rect.last,.board-chart.intro rect.owed{transform-box:fill-box;transform-origin:bottom; animation:nd-grow .6s var(--ease) both;animation-delay:calc(var(--i,0) * 14ms)} @keyframes nd-draw{from{stroke-dashoffset:1}} .board-chart.intro polyline.rate{stroke-dasharray:1;animation:nd-draw 1s ease-out .35s both} .aging-bar i,.age-bar i{transform-origin:left;animation:nd-fill .8s var(--ease) both} /* 5. 对话框弹出、底部面板滑上来、提示条落下 */ dialog.modal[open],dialog.nd-cmd[open]{animation:nd-pop .26s var(--ease)} @keyframes nd-pop{from{opacity:0;transform:translateY(10px) scale(.96)}} dialog[open]::backdrop{animation:nd-fade .25s ease both} @keyframes nd-fade{from{opacity:0}} dialog.sheet[open]{animation:nd-up .32s var(--ease)} @keyframes nd-up{from{transform:translateY(100%)}} .toast:not([hidden]){animation:nd-drop .3s var(--ease)} @keyframes nd-drop{from{opacity:0;transform:translate(-50%,-10px)}} dialog .toast:not([hidden]){animation:nd-fade .2s ease} /* 6. 配送表：保存成功的格子闪一下绿，填得和平时差太多的格子轻轻跳一下 */ @keyframes nd-saved{from{background:rgba(34,197,94,.28)}} .grid td.nd-saved{animation:nd-saved .9s ease-out} @keyframes nd-nudge{0%,100%{transform:none}30%{transform:scale(1.06)}} #grid td.nd-odd input{animation:nd-nudge .35s var(--ease)} /* 7. 手机：底部按钮按下去有回弹，数字键盘按键也是 */ .tabbar a,.tabbar button,.m-key,.m-cust,.m-vchip{transition:transform .15s var(--ease)} .tabbar a:active,.tabbar button:active,.m-key:active,.m-cust:active,.m-vchip:active{transform:scale(.94)} /* 8. 数据加载中：柔和的流光占位 */ @keyframes nd-shimmer{to{background-position:-200% 0}} .board-part.loading,.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.3) 25%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.3) 75%); background-size:200% 100%;animation:nd-shimmer 1.4s linear infinite;border-radius:12px;min-height:120px} /* 系统里设了「减少动态效果」的，一律不动 */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;transition:none!important} } /* 手机：玻璃模糊半径小一点，老手机滚动不卡 */ @media (max-width:720px){ :root{--glass-blur:blur(18px) saturate(170%)} } @media print{ .card,.fin-kpi{animation:none!important;background:#fff!important} } @media (max-width:720px){.kpi .k-num{font-size:min(19px,4.9vw)}} /* 应收账款（每月）：收款进度是一条窄长条，放在四张指标卡上面 */ .pay-strip{display:flex;align-items:center;gap:16px;height:46px;padding:0 20px;margin-bottom:14px;border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 60%),var(--glass);border:1px solid var(--glass-line); box-shadow:var(--shadow-card);animation:nd-rise .45s var(--ease) backwards} .pay-strip .ps-label{font-size:13px;color:var(--muted);white-space:nowrap} .pay-strip .ps-bar{flex:1;height:8px;border-radius:999px;background:rgba(15,23,42,.07);overflow:hidden} .pay-strip .ps-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#14b8a6,#0b7a6e); box-shadow:0 0 12px rgba(20,184,166,.45);transform-origin:left;animation:nd-fill .9s var(--ease) .15s both} .pay-strip b{font-size:17px;font-weight:700;color:var(--ok);min-width:44px;text-align:right} .pay-strip .ps-sub{font-size:13px;color:var(--muted);white-space:nowrap} @media (max-width:720px){.pay-strip{gap:10px;padding:0 14px;height:42px}.pay-strip .ps-sub{display:none}} /* 记收款：收款账户是一排小按钮（图标 + 名称），不再是三张大卡片；确认按钮靠右 */ .fin-confirm .fc-options{display:flex;gap:8px;flex-wrap:wrap} .fin-confirm .fc-opt{flex:1;flex-direction:row;justify-content:center;gap:6px;height:40px;padding:0 12px;border-width:1px;border-radius:11px; background:rgba(255,255,255,.75);transition:border-color .15s,box-shadow .15s,background .15s} .fin-confirm .fc-opt i{font-size:15px} .fin-confirm .fc-opt b{font-size:13.5px;font-weight:600} .fin-confirm .fc-opt.on{box-shadow:0 0 0 3px var(--brand-100);background:#fff} .fin-confirm .fc-foot{justify-content:flex-end} /* 手机：底部菜单是浮起来的，下面到屏幕底边（包括 Safari 底部工具栏后面）原来会露出列表。 垫一层磨砂「底座」从菜单上方一点一直铺到屏幕外，上沿渐隐，列表滑到这里就柔和地消失 */ @media (max-width:1023px){ body.nd:has(.tabbar)::after{content:"";position:fixed;z-index:59;left:0;right:0;bottom:-160px;pointer-events:none; height:calc(160px + 100px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(238,242,249,0),rgba(238,242,249,.9) 38%,#eef2f9 58%); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);mask-image:linear-gradient(180deg,transparent,#000 34%)} body.m-entry-on::after,body.nd:has(dialog[open])::after{display:none} } /* ===================================================================== 深色版：html[data-theme="dark"]（跟随系统或手动选，见 base.html 最前面的小脚本） 思路和浅色一样：深蓝底 + 几团低亮度彩光，卡片是深色磨砂玻璃，边上一圈很淡的亮边 ===================================================================== */ html[data-theme="dark"]{color-scheme:dark; --bg:#08090e; --ink:#eceef4; --ink-2:#c3c7d3; --muted:#8a90a2; --faint:#5b6173; --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.13); --head:rgba(255,255,255,.03); --brand:#7c9cff; --brand-deep:#a9bbff; --brand-50:rgba(124,156,255,.12); --brand-100:rgba(124,156,255,.26); --accent:var(--brand); --accent-soft:rgba(124,156,255,.16); --ok:#3dd6a4; --ok-soft:rgba(52,199,154,.14); --ok-line:rgba(52,199,154,.35); --err:#ff7a6e; --err-soft:rgba(255,107,97,.13); --err-line:rgba(255,107,97,.35); --warn:#f7b955; --warn-soft:rgba(245,165,36,.13); --warn-line:rgba(245,165,36,.35); --info:#7aa2ff; --info-soft:rgba(124,156,255,.13); --info-line:rgba(124,156,255,.35); --glass:rgba(26,29,40,.88); --glass-2:rgba(17,19,27,.92); --glass-line:rgba(255,255,255,.075); --glass-solid:rgba(26,29,40,.94); --glass-blur:blur(32px) saturate(150%); --panel:rgba(20,22,31,.75); --shadow-card:0 0 0 .5px rgba(0,0,0,.35),0 2px 8px -2px rgba(0,0,0,.5); --shadow-lift:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 .5px rgba(0,0,0,.3),0 28px 56px -20px rgba(0,0,0,.8); --shadow-pop:0 30px 80px -20px rgba(0,0,0,.8); } html[data-theme="dark"],html[data-theme="dark"] body.nd{background:var(--bg)} html[data-theme="dark"] body.nd{color:var(--ink)} html[data-theme="dark"] body.nd.testenv{--bg:#08090e} html[data-theme="dark"] body.nd::before{ background: radial-gradient(46vw 42vw at 2% -8%,rgba(99,102,241,.26),transparent 64%), radial-gradient(36vw 32vw at 58% -16%,rgba(168,85,247,.12),transparent 64%), radial-gradient(42vw 38vw at 108% 6%,rgba(34,211,238,.13),transparent 62%), radial-gradient(48vw 44vw at -10% 108%,rgba(139,92,246,.14),transparent 64%), radial-gradient(44vw 40vw at 104% 108%,rgba(20,184,166,.12),transparent 62%), linear-gradient(165deg,#0c0e15,#08090e 55%,#07090c); } /* 换深浅时颜色一起过渡 */ html.theme-switching *,html.theme-switching *::before{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important} /* 玻璃 */ html[data-theme="dark"] .card,html[data-theme="dark"] .fin-kpi,html[data-theme="dark"] .due-card,html[data-theme="dark"] .m-card, html[data-theme="dark"] .m-ilist,html[data-theme="dark"] .m-vchip,html[data-theme="dark"] .pay-strip,html[data-theme="dark"] .kpi, html[data-theme="dark"] .hub-meta span:not(.pill){ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),var(--glass);border-color:var(--glass-line)} html[data-theme="dark"] .card:has(table),html[data-theme="dark"] .card:has(.grid),html[data-theme="dark"] .card:has(.b-list){ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 30%),var(--glass-2)} html[data-theme="dark"] .nd-side{background:linear-gradient(180deg,rgba(28,38,64,.6),rgba(16,23,40,.5));border-color:rgba(255,255,255,.08)} html[data-theme="dark"] .nd-group a{color:var(--ink-2)} html[data-theme="dark"] .nd-group a:hover{background:rgba(255,255,255,.06);color:var(--ink)} html[data-theme="dark"] .nd-group a.on{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px -8px rgba(0,0,0,.6)} html[data-theme="dark"] .nd-group a.on svg{color:#a9bbff} html[data-theme="dark"] .nd-group .fin-pins a{background:rgba(255,255,255,.06);color:var(--ink-2)} html[data-theme="dark"] .nd-search{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:var(--muted)} html[data-theme="dark"] kbd{background:rgba(255,255,255,.08);color:var(--muted)} html[data-theme="dark"] .nd-who:hover,html[data-theme="dark"] .nd-foot .who-switch>.navgroup-btn:hover, html[data-theme="dark"] .nd-footlinks a:hover,html[data-theme="dark"] .nd-iconbtn:hover{background:rgba(255,255,255,.07);color:var(--ink)} html[data-theme="dark"] .nd-brand{color:var(--ink)} html[data-theme="dark"] .nd-mtop{background:rgba(11,17,32,.62)!important;border-bottom-color:rgba(255,255,255,.07)!important} html[data-theme="dark"] .tabbar{background:rgba(18,25,43,.6)!important;border-color:rgba(255,255,255,.08)!important} html[data-theme="dark"] .tabbar .on{color:#a9bbff} /* 文字 */ html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] .strong{color:var(--ink)} html[data-theme="dark"] a{color:#a9bbff} html[data-theme="dark"] .crumbs,html[data-theme="dark"] .crumbs a,html[data-theme="dark"] .muted,html[data-theme="dark"] .sub{color:var(--muted)} html[data-theme="dark"] .num.owe,html[data-theme="dark"] .owe b,html[data-theme="dark"] td.owe,html[data-theme="dark"] .nd-neg,html[data-theme="dark"] .neg{color:var(--err)} /* 按钮、分段、表单 */ html[data-theme="dark"] .btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} html[data-theme="dark"] .btn:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px -8px rgba(0,0,0,.6)} html[data-theme="dark"] .btn.primary{background:linear-gradient(180deg,#4f86ff,#2f63e0);border-color:rgba(124,156,255,.6);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -10px rgba(59,108,255,.7)} html[data-theme="dark"] .btn.excel{background:linear-gradient(180deg,#1f9d68,#16784f);border-color:#1f9d68;color:#fff} html[data-theme="dark"] .btn[disabled],html[data-theme="dark"] .btn.disabled{opacity:.45} html[data-theme="dark"] .tabs{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07);box-shadow:none} html[data-theme="dark"] .tabs a{color:var(--muted)} html[data-theme="dark"] .tabs a.on{background:rgba(255,255,255,.12);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 8px -2px rgba(0,0,0,.5)} html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--ink)} html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{background:rgba(255,255,255,.09);border-color:var(--brand)} html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--faint)} html[data-theme="dark"] option{background:#141c30;color:var(--ink)} /* 表格 */ html[data-theme="dark"] table.data th{background:rgba(255,255,255,.03);color:var(--muted);border-bottom-color:var(--line)} html[data-theme="dark"] table.data td{border-bottom-color:rgba(255,255,255,.05)} html[data-theme="dark"] table.data tbody tr:hover td{background:rgba(255,255,255,.04)} html[data-theme="dark"] table.data tfoot td,html[data-theme="dark"] table.data tfoot th{background:rgba(255,255,255,.04)} html[data-theme="dark"] .grid td{background:rgba(16,23,40,.86);border-color:rgba(255,255,255,.06)} html[data-theme="dark"] .grid th,html[data-theme="dark"] .grid thead .sticky-l,html[data-theme="dark"] .grid thead .sticky-l2, html[data-theme="dark"] .grid tfoot .sticky-l,html[data-theme="dark"] .grid tfoot .sticky-l2,html[data-theme="dark"] .grid tfoot th{background:rgba(22,30,50,.97);color:var(--ink-2)} html[data-theme="dark"] .grid .sticky-l,html[data-theme="dark"] .grid .sticky-l2{background:rgba(17,24,41,.98)} html[data-theme="dark"] .grid .c-total{background:rgba(24,33,55,.96)} html[data-theme="dark"] .grid td.ro{background:rgba(255,255,255,.03);color:var(--muted)} html[data-theme="dark"] .grid tbody.group>tr:first-child>td{border-top-color:rgba(124,156,255,.3)} html[data-theme="dark"] .grid input,html[data-theme="dark"] .grid select{background:transparent;border-color:transparent;color:var(--ink)} html[data-theme="dark"] .grid input:focus{background:rgba(124,156,255,.16);border-color:var(--brand)} /* 标签、提醒条 */ html[data-theme="dark"] .pill{background:rgba(255,255,255,.07);color:var(--ink-2)} html[data-theme="dark"] .pill.ok{background:var(--ok-soft);color:#5fe0b5} html[data-theme="dark"] .pill.warn{background:var(--warn-soft);color:#f7c46c} html[data-theme="dark"] .pill.off{background:rgba(255,255,255,.06);color:var(--muted)} html[data-theme="dark"] .pill.err,html[data-theme="dark"] .pill.bad{background:var(--err-soft);color:#ff9b93} html[data-theme="dark"] .badge{background:rgba(255,255,255,.07);color:var(--muted);border-color:rgba(255,255,255,.08)} html[data-theme="dark"] .flash{box-shadow:none} html[data-theme="dark"] .flash.warn,html[data-theme="dark"] .page-head .flash.inline-alerts{background:rgba(245,165,36,.1);border-color:rgba(245,165,36,.28);border-left-color:#f5a524;color:#f7c877} html[data-theme="dark"] .flash.error{background:rgba(255,107,97,.1);border-color:rgba(255,107,97,.3);border-left-color:#ff6b61;color:#ffa29b} html[data-theme="dark"] .flash.ok{background:rgba(52,199,154,.1);border-color:rgba(52,199,154,.3);border-left-color:#34c79a;color:#7fe3c1} html[data-theme="dark"] .flash.info{background:rgba(124,156,255,.1);border-color:rgba(124,156,255,.3);border-left-color:#5b8cff;color:#b8c7ff} /* 对话框、弹层、搜索 */ html[data-theme="dark"] dialog.modal,html[data-theme="dark"] dialog.nd-cmd,html[data-theme="dark"] dialog.sheet{ background:rgba(20,28,48,.82);border-color:rgba(255,255,255,.1);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--shadow-pop)} html[data-theme="dark"] dialog::backdrop{background:rgba(2,6,16,.5)} html[data-theme="dark"] .navmenu{background:rgba(22,30,50,.95);border-color:rgba(255,255,255,.1);box-shadow:var(--shadow-pop)} html[data-theme="dark"] .navmenu button,html[data-theme="dark"] .navmenu a{color:var(--ink-2)} html[data-theme="dark"] .navmenu button:hover,html[data-theme="dark"] .navmenu a:hover{background:rgba(255,255,255,.07)} /* 进度条、图表 */ html[data-theme="dark"] .fin-progress,html[data-theme="dark"] .pay-strip .ps-bar{background:rgba(255,255,255,.08)} html[data-theme="dark"] .pay-strip b{color:#5fe0b5} html[data-theme="dark"] .board-chart .grid{stroke:rgba(255,255,255,.07)} html[data-theme="dark"] .board-chart .axis{fill:var(--muted)} html[data-theme="dark"] .board-chart .band{fill:rgba(255,255,255,.025)} html[data-theme="dark"] .board-tip{background:rgba(22,30,50,.95);color:var(--ink);border-color:rgba(255,255,255,.1)} /* 水印：深底上用浅字 */ html[data-theme="dark"] .test-watermark{filter:invert(1);opacity:.05} /* 外观按钮：按当前设定显示太阳、月亮或半圆 */ .theme-ico{display:none;line-height:0} html[data-theme-mode="auto"] .ti-auto,html[data-theme-mode="light"] .ti-light,html[data-theme-mode="dark"] .ti-dark{display:inline-block} .sheet-links [data-theme-toggle]{display:flex;align-items:center;gap:10px} /* 打印一律浅色 */ @media print{html[data-theme="dark"]{color-scheme:light}} html[data-theme="dark"] .fin-confirm .fc-opt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--ink)} html[data-theme="dark"] .fin-confirm .fc-opt.on{background:rgba(124,156,255,.16);border-color:var(--brand)} html[data-theme="dark"] .fin-confirm .fc-opt.on b{color:#b8c7ff} /* 深色版：旧样式里写死浅色的地方，逐个换成深色 */ html[data-theme="dark"] .card-foot,html[data-theme="dark"] .sheet-head,html[data-theme="dark"] .sheet-foot,html[data-theme="dark"] .bill-foot, html[data-theme="dark"] table.data.cards tfoot tr,html[data-theme="dark"] .phrase-list li{background:rgba(255,255,255,.03);border-color:var(--line)} html[data-theme="dark"] .panel{background:var(--glass-2);border-color:var(--glass-line)} /* 记收款的账目明细 */ html[data-theme="dark"] .receipt{background:rgba(255,255,255,.03);border-color:var(--line)} html[data-theme="dark"] .rrow{border-bottom-color:var(--line)} html[data-theme="dark"] .rrow.total{background:rgba(255,255,255,.05)} html[data-theme="dark"] .rrow.edit input:hover,html[data-theme="dark"] .rrow.edit input:focus{background:rgba(255,255,255,.07)} html[data-theme="dark"] .fin-confirm{background:rgba(124,156,255,.07);border-color:rgba(124,156,255,.2)} /* 每户账单、客户单价、利润矩阵、共享赔偿里的底色行、底色列 */ html[data-theme="dark"] .grid.billgrid tr.price-row td,html[data-theme="dark"] .grid.billgrid tr.sum-row td,html[data-theme="dark"] .grid.billgrid tr.fee-row td, html[data-theme="dark"] .grid.billgrid td.c-min,html[data-theme="dark"] .grid.prices td.c-min,html[data-theme="dark"] .grid.prices td.c-five{background:rgba(26,35,58,.95)} html[data-theme="dark"] .grid.billgrid tr.returns-row td{background:rgba(60,45,20,.55)} html[data-theme="dark"] table.matrix th.c-first,html[data-theme="dark"] table.matrix td.c-first{background:rgba(17,24,41,.98)} html[data-theme="dark"] table.matrix tr.sum td{background:rgba(255,255,255,.04)} html[data-theme="dark"] table.matrix tr.sum td.c-first{background:rgba(26,35,58,.98)} html[data-theme="dark"] table.linen-periods .gd{background:rgba(255,107,97,.06)} html[data-theme="dark"] table.linen-periods .gr{background:rgba(52,199,154,.06)} /* 标签：底是本色的淡透明，字是本色调亮 */ html[data-theme="dark"] .s-tag{background:color-mix(in srgb,var(--g-fg,#94a3b8) 26%,transparent);color:color-mix(in srgb,var(--g-fg,#94a3b8) 45%,#fff)} html[data-theme="dark"] .k-tag{background:rgba(255,255,255,.08);color:var(--ink-2)} html[data-theme="dark"] .k-tag[data-k="pay"]{background:rgba(52,199,154,.16);color:#6fe0b8} html[data-theme="dark"] .k-tag[data-k="refund"]{background:rgba(255,107,97,.16);color:#ff9d95} html[data-theme="dark"] .k-tag[data-k="offset"]{background:rgba(245,165,36,.16);color:#f7c46c} html[data-theme="dark"] .k-tag[data-k="out"],html[data-theme="dark"] .k-tag[data-k="in"]{background:rgba(148,163,184,.16);color:#b8c4d6} html[data-theme="dark"] .gtag,html[data-theme="dark"] .guide-toc a{background:color-mix(in srgb,var(--g) 22%,transparent);color:color-mix(in srgb,var(--g) 40%,#fff);border-color:transparent} html[data-theme="dark"] .gsec .card-head h2{color:color-mix(in srgb,var(--g) 40%,#fff)} html[data-theme="dark"] .aging-days{background:color-mix(in srgb,var(--c) 24%,transparent);color:color-mix(in srgb,var(--c) 55%,#fff)} html[data-theme="dark"] .chip-pick{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--ink)} html[data-theme="dark"] .chip-pick:disabled{background:rgba(255,255,255,.03)} /* 看板：分段、步进、说明小标签 */ html[data-theme="dark"] .seg,html[data-theme="dark"] .stepper,html[data-theme="dark"] .sec-note{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:var(--ink-2);box-shadow:none} html[data-theme="dark"] .seg a{color:var(--muted)} html[data-theme="dark"] .seg a:hover,html[data-theme="dark"] .stepper a:hover,html[data-theme="dark"] .stepper select:hover{background:rgba(255,255,255,.07);color:var(--ink)} html[data-theme="dark"] .seg a.on{background:#7c5cf0;color:#fff} html[data-theme="dark"] .stepper select{background:transparent;color:var(--ink)} /* 配送表：车辆那一格 */ html[data-theme="dark"] .grid .vbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--ink-2)} html[data-theme="dark"] .grid .vname{color:#a9bbff} html[data-theme="dark"] .grid td.c-vehicle{background:rgba(17,24,41,.98)} html[data-theme="dark"] .vehicle-alerts a.alert-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} html[data-theme="dark"] .vehicle-alerts a.alert-item.urgent,html[data-theme="dark"] .vehicle-alerts a.alert-item.expired{background:rgba(255,107,97,.14);border-color:rgba(255,107,97,.35);color:#ff9d95} html[data-theme="dark"] .m-nav,html[data-theme="dark"] .m-today{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--ink)} /* 页面标题下的一行字、登录页 */ html[data-theme="dark"] .page-head .desc{color:var(--muted)} html[data-theme="dark"] .auth-card{background:rgba(20,28,48,.82);border-color:rgba(255,255,255,.1);box-shadow:var(--shadow-pop)} html[data-theme="dark"] .auth-card .field{color:var(--ink-2)} html[data-theme="dark"] .auth-card .field input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink)} html[data-theme="dark"] .auth-card .field input:focus{background:rgba(255,255,255,.09)} html[data-theme="dark"] .page-head .actions .tabs{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);box-shadow:none} html[data-theme="dark"] .page-head .actions .tabs a.on{background:rgba(124,156,255,.2);color:#b8c7ff} html[data-theme="dark"] .seg input:checked+span{background:rgba(255,255,255,.14);color:var(--ink);box-shadow:none} html[data-theme="dark"] .btn:disabled,html[data-theme="dark"] .btn.primary:disabled{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:var(--faint);box-shadow:none} /* ---------- 表格：选中、悬停、正在填的格子（两种深浅都用，深色另调颜色） ---------- */ /* 配送表：正在填的那一格发亮，所在的行、列一起淡淡亮起，一眼知道填的是哪家、哪一类 */ .grid tbody tr:focus-within>td:not(.c-vehicle):not(.person){background-image:linear-gradient(rgba(47,111,235,.05),rgba(47,111,235,.05))} .grid thead th.col-on{color:var(--brand-deep);background-image:linear-gradient(rgba(47,111,235,.1),rgba(47,111,235,.1));box-shadow:inset 0 -2px 0 var(--brand)} .grid input.q:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--brand),0 0 0 3px rgba(47,111,235,.18);border-radius:4px;position:relative;z-index:1} html[data-theme="dark"] body.nd{-webkit-font-smoothing:antialiased} html[data-theme="dark"] .card,html[data-theme="dark"] .fin-kpi,html[data-theme="dark"] .panel,html[data-theme="dark"] .pay-strip{ box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.02),0 24px 48px -24px rgba(0,0,0,.85)} /* 一般表格 */ html[data-theme="dark"] table.data th{background:rgba(255,255,255,.025);color:var(--muted);font-weight:500;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.07)} html[data-theme="dark"] table.data td{border-bottom-color:rgba(255,255,255,.045)} html[data-theme="dark"] table.data tbody tr:hover td{background:rgba(124,156,255,.055)} html[data-theme="dark"] table.data tbody tr.on td,html[data-theme="dark"] table.data tbody tr.open td,html[data-theme="dark"] table.dep-cust .dep-group.open .dep-row td{ background:rgba(124,156,255,.1)} html[data-theme="dark"] table.data tbody tr.on td:first-child,html[data-theme="dark"] table.dep-cust .dep-group.open .dep-row td:first-child{box-shadow:inset 2px 0 0 var(--brand)} html[data-theme="dark"] table.dep-cust tr.dep-detail>td{background:rgba(124,156,255,.05)} html[data-theme="dark"] table.data tr.off td{color:var(--faint)} html[data-theme="dark"] table.cash-list tr.opening td{background:rgba(255,255,255,.03);color:var(--muted)} /* 格子表（配送、统计、账单、单价） */ html[data-theme="dark"] .grid td{background:rgba(14,16,23,.92);border-color:rgba(255,255,255,.055)} html[data-theme="dark"] .grid th,html[data-theme="dark"] .grid thead .sticky-l,html[data-theme="dark"] .grid thead .sticky-l2, html[data-theme="dark"] .grid tfoot .sticky-l,html[data-theme="dark"] .grid tfoot .sticky-l2,html[data-theme="dark"] .grid tfoot th{ background:rgba(24,27,38,.98);color:var(--ink-2);border-color:rgba(255,255,255,.07)} html[data-theme="dark"] .grid .sticky-l,html[data-theme="dark"] .grid .sticky-l2,html[data-theme="dark"] .grid td.c-vehicle{background:rgba(17,19,27,.99)} html[data-theme="dark"] .grid .c-total{background:rgba(22,25,35,.97);color:var(--ink)} html[data-theme="dark"] .grid tbody.group>tr:first-child>td{border-top:1px solid rgba(124,156,255,.28)} html[data-theme="dark"] .grid.stats.daily tr.blank td,html[data-theme="dark"] .grid.billgrid tr.blank td{background:rgba(10,11,16,.9);color:var(--faint)} html[data-theme="dark"] .grid tr.hit td:not(.c-vehicle){background:rgba(247,185,85,.16)!important} html[data-theme="dark"] .grid tbody tr:focus-within>td:not(.c-vehicle):not(.person){background-image:linear-gradient(rgba(124,156,255,.07),rgba(124,156,255,.07))} html[data-theme="dark"] .grid thead th.col-on{color:#fff;background-image:linear-gradient(rgba(124,156,255,.2),rgba(124,156,255,.2));box-shadow:inset 0 -2px 0 var(--brand)} html[data-theme="dark"] .grid input.q{color:var(--ink)} html[data-theme="dark"] .grid input.q:focus{background:rgba(124,156,255,.2);color:#fff;box-shadow:inset 0 0 0 1.5px #9db4ff,0 0 0 3px rgba(124,156,255,.25),0 0 18px rgba(124,156,255,.35)} html[data-theme="dark"] .grid td.nd-odd input,html[data-theme="dark"] #grid td.nd-odd{background:rgba(247,185,85,.14)} html[data-theme="dark"] .grid td.nd-saved{animation-name:nd-saved-dark} @keyframes nd-saved-dark{from{background:rgba(61,214,164,.3)}} /* 司机、跟车的人名色：深底上用暗色底 + 亮色字 */ html[data-theme="dark"] .grid td.person{background:color-mix(in srgb,var(--pbar) 16%,#0e1017);color:color-mix(in srgb,var(--pbar) 70%,#fff);box-shadow:inset 3px 0 0 var(--pbar)} html[data-theme="dark"] .grid tr.hit td.person{background:color-mix(in srgb,var(--pbar) 16%,#0e1017)!important} /* 手机录入：键盘、底座 */ html[data-theme="dark"] .m-entry{background:var(--bg)} html[data-theme="dark"] .m-keypad{background:rgba(14,16,23,.9)} html[data-theme="dark"] .m-keypad button{background:rgba(255,255,255,.08);color:var(--ink)} html[data-theme="dark"] .m-keypad button:active{background:rgba(255,255,255,.16)} html[data-theme="dark"] .m-keypad button.fn{background:rgba(255,255,255,.05)} html[data-theme="dark"] .m-keypad button.go{background:linear-gradient(180deg,#8aa6ff,#5f7ff0);color:#fff} @media (max-width:1023px){ html[data-theme="dark"] body.nd:has(.tabbar)::after{background:linear-gradient(180deg,rgba(8,9,14,0),rgba(8,9,14,.9) 38%,#08090e 58%)} } /* 记收款对话框：优惠/抵扣、坏账是可以改的格子，要看得出是输入框 */ .rrow.edit input{border:1px solid rgba(15,23,42,.1);background:rgba(255,255,255,.7);width:150px} .rrow.edit input:hover{border-color:rgba(15,23,42,.18)} /* 手机：对话框高度按「现在看得见的高度」（dvh）算，不会被 Safari 底部工具栏盖住；账户按钮不折行 */ @media (max-width:720px){ dialog.modal.fin{max-height:calc(100dvh - 20px);margin-top:10px;overflow-y:auto;overscroll-behavior:contain} dialog.modal:not(.embed){max-height:calc(100dvh - 20px)} .fin-confirm .fc-opt{padding:0 4px;gap:4px;min-width:0} .fin-confirm .fc-opt b{white-space:nowrap} .rrow.edit input{width:130px} } @media (max-width:400px){.fin-confirm .fc-opt i{display:none}} html[data-theme="dark"] table.linen-list td.act2 .btn.primary:disabled{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:var(--faint)} html[data-theme="dark"] .fin-progress i{background:linear-gradient(90deg,#2bb892,#3dd6a4)} /* 深色版：对话框、弹出面板里面的块 */ html[data-theme="dark"] .sheet-links a,html[data-theme="dark"] .sheet-links button,html[data-theme="dark"] .sheet-links form button{ background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:var(--ink-2)} html[data-theme="dark"] .sheet-links a.on{background:rgba(124,156,255,.14);border-color:var(--brand);color:#fff} html[data-theme="dark"] .modal-extra{background:rgba(255,255,255,.025);border-top-color:var(--line)} html[data-theme="dark"] .modal-extra.danger{background:rgba(255,122,110,.05)} html[data-theme="dark"] .modal-info,html[data-theme="dark"] .setlist,html[data-theme="dark"] .mf-drivers,html[data-theme="dark"] .switch-row, html[data-theme="dark"] .pick,html[data-theme="dark"] .pick-opt,html[data-theme="dark"] .modal-body>.one{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--ink-2)} html[data-theme="dark"] .mf-drivers button:hover{background:rgba(255,255,255,.06)} html[data-theme="dark"] .mf-drivers button.on,html[data-theme="dark"] .pick:has(input:checked){background:rgba(124,156,255,.16);border-color:var(--brand);color:#fff} html[data-theme="dark"] .pick-opt:has(input:checked){background:rgba(124,156,255,.14);border-color:var(--brand)} html[data-theme="dark"] .pick-opt:has(input:checked) b{color:#fff} html[data-theme="dark"] .switch-row:has(input:checked){background:rgba(61,214,164,.1);border-color:rgba(61,214,164,.35)} html[data-theme="dark"] .switch-row:has(input:checked) b{color:#7fe8c4} html[data-theme="dark"] .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--ink-2)} html[data-theme="dark"] .chip:hover{background:rgba(124,156,255,.14);border-color:var(--brand);color:#fff} html[data-theme="dark"] .chip.on{background:var(--brand);border-color:var(--brand);color:#fff} html[data-theme="dark"] .chip-opt{background:color-mix(in srgb,var(--g-fg,#94a3b8) 18%,transparent);border-color:color-mix(in srgb,var(--g-fg,#94a3b8) 40%,transparent); color:color-mix(in srgb,var(--g-fg,#94a3b8) 45%,#fff)} html[data-theme="dark"] .chip-opt.on{background:color-mix(in srgb,var(--g-fg,#94a3b8) 75%,#fff 0%);color:#fff} html[data-theme="dark"] .prefixed i{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--ink-2)} html[data-theme="dark"] .prefixed i.neg{color:var(--err)} html[data-theme="dark"] .rrow.edit input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} html[data-theme="dark"] .locked-note{background:rgba(124,156,255,.08);border-color:rgba(124,156,255,.3);color:#b8c7ff} /* ===================================================================== 登录页（新样式） ===================================================================== */ body.auth2{min-height:100dvh;background:#eef2f9;overflow-x:hidden} body.auth2::before{display:none} .auth2-page{min-height:100dvh;display:flex;flex-direction:column;padding:0!important;margin:0!important;max-width:none!important} .auth2-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(160deg,#eaf0fd,#eef3f9 50%,#e8f4f4)} .auth2-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;animation:auth2-drift 22s ease-in-out infinite alternate} .auth2-bg .b1{width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:#7aa5ff} .auth2-bg .b2{width:44vmax;height:44vmax;right:-12vmax;top:-10vmax;background:#6fd8f4;animation-delay:-6s} .auth2-bg .b3{width:46vmax;height:46vmax;left:-10vmax;bottom:-20vmax;background:#c3adff;animation-delay:-12s} .auth2-bg .b4{width:40vmax;height:40vmax;right:-8vmax;bottom:-16vmax;background:#7ee8c8;animation-delay:-3s} @keyframes auth2-drift{to{transform:translate(4vmax,3vmax) scale(1.08)}} .auth2-center{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:32px 16px} .auth2-card{width:min(400px,100%);padding:36px 32px 28px;border-radius:28px;display:flex;flex-direction:column;gap:14px; background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));border:1px solid rgba(255,255,255,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 80px -30px rgba(30,64,175,.45),0 2px 8px rgba(15,23,42,.05); backdrop-filter:blur(36px) saturate(190%);-webkit-backdrop-filter:blur(36px) saturate(190%);animation:auth2-in .6s cubic-bezier(.2,.8,.2,1)} @keyframes auth2-in{from{opacity:0;transform:translateY(16px) scale(.98)}} .auth2-brand{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:8px} .auth2-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;margin-bottom:8px;background:rgba(255,255,255,.8); box-shadow:inset 0 1px 0 #fff,0 10px 24px -8px rgba(30,64,175,.35)} .auth2-mark img{width:38px;height:38px;object-fit:contain} .auth2-brand b{font-size:24px;font-weight:700;letter-spacing:.1em;color:#0f172a} .auth2-brand span{font-size:14px;color:#5b6b82;letter-spacing:.06em} .auth2-msg{padding:10px 14px;border-radius:12px;font-size:14px;background:rgba(255,255,255,.7);color:#1e3a8a} .auth2-msg.error{background:rgba(254,226,226,.85);color:#b42318} .auth2-msg.ok{background:rgba(220,252,231,.85);color:#067647} .auth2-fields{border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.06);overflow:hidden} .auth2-field{position:relative;display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;margin:0} .auth2-field+.auth2-field{border-top:1px solid rgba(15,23,42,.07)} .auth2-field>span{flex:none;width:36px;font-size:15px;color:#334155} .auth2-field input{flex:1;min-width:0;height:100%;border:0!important;background:none!important;box-shadow:none!important;padding:0!important; font:inherit;font-size:16px;color:#0f172a;outline:0} .auth2-field input::placeholder{color:#94a3b8} .auth2-fields:focus-within{border-color:rgba(47,111,235,.45);box-shadow:0 0 0 4px rgba(47,111,235,.14)} .auth2-field .pw-toggle{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:none;color:#64748b;cursor:pointer} .auth2-field .pw-toggle:hover{background:rgba(15,23,42,.05)} .auth2-field .pw-toggle .slash{display:none} .auth2-field .pw-toggle[aria-pressed="true"] .slash{display:inline} .auth2-caps{margin:-6px 4px 0;font-size:13px;color:#b54708} .auth2-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border:0;border-radius:25px;cursor:pointer; font:inherit;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(180deg,#4a8bff,#2563eb); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 26px -10px rgba(37,99,235,.7);transition:transform .15s,box-shadow .2s,opacity .2s} .auth2-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 30px -10px rgba(37,99,235,.8)} .auth2-btn:active{transform:scale(.98)} .auth2-btn:disabled{opacity:.7} .auth2-btn.tinted{background:rgba(255,255,255,.7);color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(47,111,235,.22)} .auth2-copy{position:relative;z-index:1;text-align:center;padding:0 16px calc(18px + env(safe-area-inset-bottom));font-size:12px;color:#64748b} html[data-theme="dark"] body.auth2{background:#08090e} html[data-theme="dark"] .auth2-bg{background:linear-gradient(165deg,#0c0e15,#08090e 55%,#07090c)} html[data-theme="dark"] .auth2-bg i{opacity:.32} html[data-theme="dark"] .auth2-card{background:linear-gradient(180deg,rgba(30,33,46,.66),rgba(18,20,29,.6));border-color:rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px -30px rgba(0,0,0,.9)} html[data-theme="dark"] .auth2-mark{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} html[data-theme="dark"] .auth2-brand b{color:#eceef4} html[data-theme="dark"] .auth2-brand span,html[data-theme="dark"] .auth2-copy{color:#8a90a2} html[data-theme="dark"] .auth2-fields{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)} html[data-theme="dark"] .auth2-field+.auth2-field{border-top-color:rgba(255,255,255,.08)} html[data-theme="dark"] .auth2-field>span{color:#c3c7d3} html[data-theme="dark"] .auth2-field input{color:#eceef4} html[data-theme="dark"] .auth2-field input::placeholder{color:#5b6173} html[data-theme="dark"] .auth2-btn.tinted{background:rgba(124,156,255,.14);color:#b8c7ff;box-shadow:inset 0 0 0 1px rgba(124,156,255,.3)} html[data-theme="dark"] .auth2-msg{background:rgba(124,156,255,.12);color:#b8c7ff} html[data-theme="dark"] .auth2-msg.error{background:rgba(255,122,110,.14);color:#ffa29b} @media (prefers-reduced-motion:reduce){.auth2-bg i,.auth2-card{animation:none}} /* 手机：不要卡片，按 iOS 登录页排 */ @media (max-width:720px){ .auth2-center{place-items:start center;padding:calc(64px + env(safe-area-inset-top)) 20px 24px} .auth2-card{padding:0;border:0;border-radius:0;background:none!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;gap:16px} .auth2-brand{margin-bottom:18px} .auth2-mark{width:76px;height:76px;border-radius:20px} .auth2-mark img{width:46px;height:46px} .auth2-brand b{font-size:28px} .auth2-fields{border-radius:12px;background:rgba(255,255,255,.85)} .auth2-field input{font-size:17px} .auth2-bg i{opacity:.55} } .auth2-field .pw-toggle{position:static;transform:none;right:auto;top:auto} body.auth2.phone::after{display:none} /* 司机工资：月份切换是一行按钮，不放在卡片里；和下面的指标卡片隔开 */ .wage-month-bar{display:flex;align-items:center;gap:10px;margin:4px 0 20px} .wage-month-bar .wage-month{font-size:18px;font-weight:650;min-width:92px;text-align:center;font-variant-numeric:tabular-nums} /* 配送统计、客户单价：最左边一列（日期 / 客户名）离表格边缘留出空 */ .grid.stats th.sticky-l,.grid.stats td.sticky-l,.grid.prices th.c-name,.grid.prices td.c-name{padding-left:14px} /* 编辑页（page narrow，如车辆详情）：在侧栏右边的空间里居中，宽一点不挤 */ @media (min-width:1024px){ body.nd main.page.narrow{max-width:900px;margin-left:calc(var(--side) + 28px + max(0px, (100vw - var(--side) - 56px - 900px) / 2))} } /* 表单后面紧跟的卡片也要留缝；表单里的「自有 / 租赁」分段贴左，不跟看板的分段一样靠右 */ main.page>form.stack+.card,main.page>form+.card{margin-top:16px} .field>.seg{margin-left:0;align-self:flex-start} /* 司机工资：司机三列、跟车三列各成一组，组两边一条竖线 */ table.wage-list .gs{border-left:1px solid var(--line)} table.wage-list .ge{border-right:1px solid var(--line)} /* ---- 每日生产 */ /* 生产表：列宽和配送表一样——车辆 108、客户 176（最长的客户名 9 个字放得下）、合计 62，品类列按配送量定宽 */ .grid.prod .sticky-l2{width:176px;min-width:176px;max-width:176px} .grid.prod th.c-name{width:176px} .grid.prod th.c-total{width:62px} .grid.prod input.q{padding:0 5px} .grid.prod tbody.shared-group .vcell{padding:6px 8px} .grid.prod tbody.shared-group td.c-vehicle{background:var(--brand-50)} .grid.prod tbody.shared-group .vname{color:var(--brand-deep)} .grid.prod td.c-name{overflow:hidden;text-overflow:ellipsis} .grid.prod .handle.ghost{visibility:hidden;cursor:default} .grid.prod tr.shared td{background:var(--brand-50);font-weight:600} .grid.prod tr.shared td.sticky-l2{background:var(--brand-50);color:var(--brand-deep)} .grid.prod tr.off td{color:var(--muted)} .grid.prod tr.hit td{background:#fff8e6} .grid.prod tbody tr:hover td:not(.c-vehicle){background:#f5f9ff} html[data-theme="dark"] .grid.prod tr.shared td{background:rgba(20,185,236,.12)} html[data-theme="dark"] .grid.prod tbody tr:hover td,html[data-theme="dark"] .grid.prod tr.hit td{background:rgba(255,255,255,.06)} /* ---- 每日考勤 */ .wd-empty{display:flex;align-items:center;gap:14px;margin:12px 14px 0;padding:12px 16px;border:1px dashed var(--line-strong); border-radius:var(--r);color:var(--ink-2)} .wd-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:14px} .wd-group{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--panel);display:flex;flex-direction:column;gap:4px;min-width:0} .wd-group .wg-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px} .wd-group .wg-head>b{font-size:13.5px} .wd-group .wg-n{font-size:12px;color:var(--muted)} .wd-group .wg-n b{color:var(--ink);font-size:14px} .wd-group .wg-line{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)} .wd-group .wg-line b{color:var(--ink);font-weight:600} .wd-group .wg-fine{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:4px} .wd-group .wg-fine input{width:64px;height:26px;text-align:right} table.grid.wd-table{width:100%} .wd-table th,.wd-table td{height:40px} .wd-table .c-name{padding-left:14px;min-width:96px} .wd-table .c-name a{color:var(--ink);font-weight:600} .wd-table .c-status,.wd-table .c-groups,.wd-table .c-flip{padding:0 8px} .wd-table input{height:28px;text-align:right} .wd-table .c-hang input{width:72px} .wd-table .c-time select{width:88px;height:28px} .wd-table .c-fine input{width:64px} .wd-table .c-hours{min-width:64px;color:var(--ink-2)} .wd-table .c-pay{min-width:84px;font-weight:600;padding-right:14px} /* 没上班（还没记，或记了休）：整行灰底、名字变淡，一眼和上班的人分开 */ .wd-table tr.blank td,.wd-table tr[data-status="off"] td{background:#eef0f4} .wd-table tr.blank .c-name a,.wd-table tr[data-status="off"] .c-name a{color:var(--faint);font-weight:500} .wd-table tr.blank .c-name .badge,.wd-table tr[data-status="off"] .c-name .badge{opacity:.6} .wd-table tr.bad td{background:var(--err-soft)} .wd-table input.need{border-color:#f79009;background:var(--warn-soft)} .wd-table input:disabled{opacity:.35} /* 考勤：计件 / 计时 / 休 分开的三个按钮，选中各有颜色 */ .wd-seg{display:inline-flex;gap:8px} .wd-seg button{border:1px solid var(--line);background:var(--panel);font:inherit;font-size:13px;font-weight:600;color:var(--muted); height:28px;min-width:48px;padding:0 12px;border-radius:8px;cursor:pointer} .wd-seg button:hover{border-color:var(--line-strong);color:var(--ink)} .wd-seg button[data-status="piece"][aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff} .wd-seg button[data-status="hourly"][aria-pressed="true"]{background:#7c3aed;border-color:#7c3aed;color:#fff} .wd-seg button[data-status="off"][aria-pressed="true"]{background:#667085;border-color:#667085;color:#fff} /* 小组：每组一个颜色，同一人选了几个组一眼能分开；上面的小组卡片用同一个颜色 */ .wd-chips{display:inline-flex;flex-wrap:wrap;gap:4px} .wd-chips button{border:1px solid var(--line);background:var(--panel);font:inherit;font-size:12px;color:var(--muted);height:26px;padding:0 9px;border-radius:13px;cursor:pointer} [data-group="flip"]{--wg:#7c3aed} [data-group="sheet"]{--wg:#1570ef} [data-group="pillow"]{--wg:#0e9384} [data-group="hang"]{--wg:#dc6803} [data-group="receive"]{--wg:#c11574} [data-group="towel"]{--wg:#3f8a1c} .wd-chips button[aria-pressed="true"]{background:var(--wg);border-color:var(--wg);color:#fff} .wd-chips button:disabled{cursor:default;opacity:.35} .wd-chips button:disabled[aria-pressed="true"]{opacity:.55} .wd-group{border-top:3px solid var(--wg)} .wd-group .wg-head>b{color:var(--wg)} @keyframes wd-saved{from{background:rgba(34,197,94,.18)}} .wd-table tr.nd-saved td{animation:wd-saved .9s ease-out} @media (max-width:1200px){.wd-groups{grid-template-columns:repeat(3,minmax(0,1fr))}} html[data-theme="dark"] .wd-seg button,html[data-theme="dark"] .wd-chips button{background:transparent;border-color:rgba(255,255,255,.14)} html[data-theme="dark"] .wd-seg button[data-status="piece"][aria-pressed="true"]{background:var(--brand);border-color:var(--brand)} html[data-theme="dark"] .wd-seg button[data-status="hourly"][aria-pressed="true"]{background:#7c3aed;border-color:#7c3aed} html[data-theme="dark"] .wd-seg button[data-status="off"][aria-pressed="true"]{background:#667085;border-color:#667085} html[data-theme="dark"] .wd-chips button[aria-pressed="true"]{background:var(--wg);border-color:var(--wg)} html[data-theme="dark"] .wd-table tr.blank td,html[data-theme="dark"] .wd-table tr[data-status="off"] td{background:rgba(0,0,0,.22)} /* ---- 工人工资（月） */ table.ww-list th,table.ww-list td{white-space:nowrap} table.ww-list td.ww-in{padding:4px 6px} table.ww-list td.ww-in input{width:64px;height:28px;text-align:right;padding:0 6px} table.ww-list th,table.ww-list td{padding-left:8px;padding-right:8px} table.ww-list td.ww-in input.bad{border-color:var(--err)} table.ww-list .ge{border-right:1px solid var(--line)} table.ww-list td.nd-saved{animation:wd-saved .9s ease-out} /* ---- 工人计件单价 */ .wr-form{padding:18px 20px} .wr-from{max-width:220px} .wr-h{font-size:14px;margin:18px 0 10px} .wr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 14px} .wr-kinds{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:12px;color:var(--muted)} .wr-kinds b{color:var(--ink-2);margin-right:6px} /* ---- 配送表：待送提示（生产了还没送的那一批） */ .grid input.q::placeholder{color:#b8c2d0;font-style:italic} .grid .fill-prod{border:1px solid var(--brand-100);background:var(--brand-50);color:var(--brand);font:inherit;font-size:11px; height:20px;padding:0 6px;border-radius:10px;cursor:pointer;margin-left:4px;vertical-align:1px} .grid .fill-prod:hover{background:var(--brand);color:#fff;border-color:var(--brand)} html[data-theme="dark"] .grid input.q::placeholder{color:#5d6b85} html[data-theme="dark"] .grid .fill-prod{background:rgba(20,185,236,.12);border-color:rgba(20,185,236,.3);color:#7cd3f5} .wd-table tr.wd-sec th{position:static;height:34px;padding:0 14px;text-align:left;font-size:12.5px;font-weight:650;color:var(--ink-2); background:var(--head);border-top:1px solid var(--line-strong)} .wd-table tbody tr.wd-sec:first-child th{border-top:0} /* 考勤表跟着整页滚，不单独滚；表头滚动时贴在窗口顶上 */ .panel:has(> .wd-wrap){overflow:visible} .wd-wrap .wd-table thead th{top:0} .wd-wrap .wd-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg)} .wd-wrap .wd-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg)} .panel:has(> .wd-wrap) > .sheet-head{border-radius:var(--r-lg) var(--r-lg) 0 0} /* 每日考勤：顶上一条日期和合计，下面计时人员、生产人员各一块，每块有自己的标题栏和按钮 */ .panel.wd-bar{margin-bottom:16px} .wd-bar > .sheet-head{border-radius:var(--r-lg);border-bottom:0} .panel.wd-block{margin-top:16px} .wd-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px; border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0} .wd-block-head h2{margin:0;font-size:15px;font-weight:650;color:var(--ink)} .wd-block-n{margin-left:8px;font-size:12px;font-weight:400;color:var(--muted)} .wd-block-tools{display:flex;align-items:center;gap:8px} .wd-block .wd-groups{border-bottom:1px solid var(--line)} .wd-undo{display:inline-flex;gap:6px;margin-right:4px} .wd-undo .btn:disabled{opacity:.4;cursor:default} /* 司机工资、工人工资、每日考勤：姓名一列离卡片左边、最后一列离右边都是 16px，三页一致 */ table.ww-list th:first-child,table.ww-list td:first-child, .wd-table th.c-name,.wd-table td.c-name{padding-left:16px} table.ww-list th:last-child,table.ww-list td:last-child, .wd-table th.c-pay,.wd-table td.c-pay{padding-right:16px} .wr-fields{border:0;margin:0;padding:0;min-width:0} .wr-fields:disabled input{color:var(--ink-2);background:var(--head)} .wr-form + .card{margin-top:18px} /* 工作内容一列：计件只显示小组（选了挂单才有件数），计时只显示翻被套、下班时间、加班；休息、没记空着 */ .wd-table td.c-work{padding:6px 10px;white-space:normal} .wd-table .w-piece,.wd-table .w-hourly{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px} .wd-table tr:not([data-status="piece"]) .w-piece,.wd-table tr:not([data-status="hourly"]) .w-hourly{display:none} .wd-table .w-hang,.wd-table .w-time{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap} .wd-table .w-hang[hidden]{display:none} .wd-table .w-hang input{width:72px} .wd-table .w-time select{width:88px;height:28px} .wd-table .w-hours{font-size:12.5px;color:var(--ink-2);white-space:nowrap} .wd-table th.c-work{padding-left:10px} .wd-table tr.blank .c-fine input,.wd-table tr[data-status="off"] .c-fine input{visibility:hidden} .wd-table .c-money{min-width:76px;color:var(--ink-2)} .wd-table select.need{border-color:#f79009;background:var(--warn-soft)} /* 排序：按员工（档案顺序）/ 按分组（同一个组排在一起，组和组之间一条粗线） */ .wd-sort{display:inline-flex;margin-left:14px;background:#f1f3f6;border-radius:8px;padding:2px} .wd-sort button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);height:26px;padding:0 12px;border-radius:6px;cursor:pointer} .wd-sort button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.12)} .wd-table tr.g-start td{border-top:2px solid var(--line-strong)} .wd-table tr[data-g] td.c-name{box-shadow:inset 3px 0 0 var(--wg)} html[data-theme="dark"] .wd-sort{background:rgba(255,255,255,.06)} html[data-theme="dark"] .wd-sort button[aria-pressed="true"]{background:rgba(255,255,255,.14);box-shadow:none} tr[data-g="sheet"]{--wg:#1570ef} tr[data-g="pillow"]{--wg:#0e9384} tr[data-g="hang"]{--wg:#dc6803} tr[data-g="receive"]{--wg:#c11574} tr[data-g="towel"]{--wg:#3f8a1c} .wd-group .wg-sum{border-top:1px dashed var(--line);padding-top:4px;margin-top:2px} .wd-group .wg-sum b{color:var(--wg);font-size:13.5px} .sheet-head:has(.wd-sort) .sheet-tools{margin-left:auto} #wd-copy{margin-left:8px} /* 固定列宽：改了内容（加班几小时、挂单件数）列宽不跟着变；两张表同一套宽度，上下对齐 */ table.grid.wd-table{table-layout:fixed} .wd-table col.w-c-name{width:168px} .wd-table col.w-c-status{width:196px} .wd-table col.w-c-fine{width:76px} .wd-table col.w-c-money{width:84px} .wd-table col.w-c-pay{width:96px} .wd-table td.c-name{overflow:hidden;text-overflow:ellipsis} .wd-table td.c-status{padding:0 12px} .wd-table .c-fine input{width:60px} .wd-table .w-short{font-size:12.5px;color:var(--err);white-space:nowrap} .wd-table thead th.c-money{line-height:1.25;padding:6px 8px} /* 缺勤超过 3 天：全勤奖不发，格子划掉 */ table.ww-list td.ww-void input{text-decoration:line-through;color:var(--faint);border-color:var(--err-line);background:var(--err-soft)} /* 临时工的休息时间：和小组一样的按钮，单选 */ .wd-rest{display:inline-flex;gap:4px} .wd-rest button{border:1px solid var(--line);background:var(--panel);font:inherit;font-size:12px;color:var(--muted);height:26px;padding:0 9px;border-radius:13px;cursor:pointer} .wd-rest button[aria-pressed="true"]{background:#475467;border-color:#475467;color:#fff} /* 行高固定：挂单件数框、时间下拉出现或消失时行不跳 */ .wd-table tbody td{height:46px} .wd-table .w-hang input,.wd-table .w-time select{height:28px} /* 填了罚款（红）、奖励（绿）的格子上色 */ .wd-table input[data-f="fine"].has{color:var(--err);border-color:var(--err-line);background:var(--err-soft);font-weight:600} .wd-table input[data-f="bonus"].has{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft);font-weight:600} .wd-group input[data-fine].has{color:var(--err);border-color:var(--err-line);background:var(--err-soft);font-weight:600} /* 没记完的清单：一条一行 */ .flash.ww-todo{display:block} .flash.ww-todo ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px} .flash.ww-todo li{line-height:1.5} .flash.ww-todo li a{font-weight:600} .flash.ww-todo li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .flash.ww-todo ul{grid-template-columns:minmax(0,1fr)} /* 每日考勤的「没记完」：一行写完，多了省略号，鼠标停上去看全部 */ .flash.wd-oneline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .wd-table .w-day{font-size:12.5px;color:var(--muted)} .wd-table label.w-time[hidden]{display:none} /* 当天在配送表上开车跟车的人：没记考勤也不算没上班，不灰 */ .wd-table tr.blank.riding td{background:transparent} .wd-table tr.blank.riding .c-name > a:first-child{color:var(--ink)} /* 手填的几格：输入框靠右，和表头、上下的数字对齐 */ table.ww-list td.ww-in{text-align:right} table.ww-list td.ww-in input{display:block;margin-left:auto;width:72px} table.ww-list th:last-child,table.ww-list td:last-child{min-width:104px;padding-left:16px} table.ww-list td.ww-in{padding-right:8px} .flash.ww-todo details summary{cursor:pointer;margin-top:4px;font-weight:600;padding-left:18px} /* 车间工资表：两行表头（计时工资下分基本、加班），组和组之间一条竖线 */ table.ww-list thead th{vertical-align:middle} table.ww-list thead th.c{text-align:center;border-bottom:1px solid var(--line)} table.ww-list .gs{border-left:1px solid var(--line)} table.ww-list td.ww-in input.ww-minus:not(:placeholder-shown){color:var(--err)} .field-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .field-row[hidden]{display:none} /* 姓名后面的职位标签对齐：名字占固定宽度 */ .pname{display:inline-block;min-width:3.6em} /* 人员档案拖动排先后 */ td.drag-c{padding:0 4px;text-align:center} .drag{cursor:grab;color:var(--faint);font-size:15px;user-select:none;padding:4px} .drag:hover{color:var(--ink-2)} tr.dragging td{background:var(--brand-50);opacity:.8} /* 菜单里设了模块密码的几项：后面一把小锁 */ .nd-nav a .nd-lock{margin-left:auto;display:inline-flex;color:var(--faint)} .nd-nav a .nd-lock.open{color:var(--ok)} .inline-form{display:inline-flex;margin:0} .inline-form .btn svg{margin-right:4px} /* 应收账款月份表：十列，电脑上把列间距收窄一点，不用左右滑动 */ @media (min-width:721px){ table.fin-months th,table.fin-months td{padding-left:10px;padding-right:10px} table.fin-months th:first-child,table.fin-months td:first-child{padding-left:16px} table.fin-months th:last-child,table.fin-months td:last-child{padding-right:16px} } /* 车间工资：岗位补助手动改过的，格子标成橙色 */ #ww-list td.ww-in.edited input{background:#fff6e8;border-color:#f3b562;color:#b54708;font-weight:600} /* 总工资表：每块（车间、配送、办公室）一个标题行和小计行；备注格宽一点；现金发为负标红 */ table.pay-list tr.pay-gap td{height:28px;padding:0;border:0;background:transparent} table.pay-list tr.pay-sec th{border-top:2px solid var(--line);font-size:14px;background:var(--bg-soft,#f6f8fb);text-align:left;font-weight:600;color:var(--ink);padding-top:10px;padding-bottom:10px} table.pay-list tr.pay-sec th .pay-n{margin-left:8px;font-weight:400;color:var(--muted);font-size:12px} table.pay-list tr.pay-subtotal th,table.pay-list tr.pay-subtotal td{font-weight:600;border-bottom:1px solid var(--line)} table.pay-list tfoot th,table.pay-list tfoot td{font-weight:700} table.pay-list td.pay-note input{width:150px;text-align:left} table.pay-list td.bad{color:var(--err)} /* 表头第二行的小字说明（全勤奖：需上班多少天） */ th .th-sub{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap} .wd-table thead th.c-name{text-align:left} /* 生产表：「按配送填入」填进去的格子标绿，手改过就恢复白色 */ .grid.prod input.q.filled{background:#d7f3e1} html[data-theme="dark"] .grid.prod input.q.filled{background:rgba(34,197,94,.24)} /* 生产表：共享客户的共享品类不给填（记在共享行），灰底 */ .grid.prod td.c-qty.na{background:repeating-linear-gradient(135deg,#f1f3f6 0 6px,#e9ecf1 6px 8px);color:var(--muted);cursor:not-allowed;position:relative} /* 鼠标放上去马上出提示（原生 title 要等一秒多），显示在格子下方 */ .grid.prod td.c-qty.na:hover::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%); z-index:30;white-space:nowrap;padding:5px 9px;border-radius:6px;background:#1f2937;color:#fff;font-size:12px;line-height:1.3; font-weight:500;pointer-events:none;box-shadow:0 4px 12px rgba(15,23,42,.18)} .grid.prod td.c-qty.na:hover::before{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);z-index:30; border:5px solid transparent;border-bottom-color:#1f2937;border-top:0;margin-top:-1px;pointer-events:none} html[data-theme="dark"] .grid.prod td.c-qty.na{background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 6px,rgba(255,255,255,.08) 6px 8px)} /* 生产表：「按配送填入」按钮上的待填格数 */ #prod-fill .cnt,#prod-fill-more .cnt{display:inline-block;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px; background:var(--brand);color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:600} /* 工资锁定的月份：每日考勤整页的按钮、输入都不能动 */ .wd-locked .wd-table :is(button,input,select),.wd-locked .wd-groups input,.wd-locked .wd-block-tools :is(button,.wd-sort){pointer-events:none;opacity:.55} .wage-lock-badge{font-size:13px;padding:4px 10px} /* 生产表：底色图例 */ .prod-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:6px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--panel)} .prod-legend span{display:inline-flex;align-items:center;gap:6px} .prod-legend .sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--line)} .prod-legend .sw-green{background:#d7f3e1;border-color:#8fd6a9} .prod-legend .sw-gray{background:repeating-linear-gradient(135deg,#f1f3f6 0 4px,#e9ecf1 4px 6px)} .prod-legend .sw-white{background:#fff} /* 配送表、生产表合计行：「合计」和上面居中的车辆列对齐 */ .grid.sheet tfoot th.c-vehicle{text-align:center} /* 大表格的格子（td.cell）：平时是文字，点到才放输入框；脏 / 出错 / 自动填入的状态记在格子上 */ .grid td.c-qty.cell{padding:0 5px;text-align:right;cursor:text;white-space:nowrap;font-variant-numeric:tabular-nums} .grid td.c-qty.cell:focus{outline:0} .grid td.c-qty.cell.editing{padding:0} .grid td.c-qty.cell.dirty{background:var(--warn-soft)} .grid td.c-qty.cell.bad{background:var(--err);color:#fff;font-weight:700} .grid.prod td.c-qty.cell.filled{background:#d7f3e1} html[data-theme="dark"] .grid.prod td.c-qty.cell.filled{background:rgba(34,197,94,.24)}