/* Internal screen typography and spacing; report/PDF print layouts stay separate. */
@media screen {
 :root:has(body.qf-ui){font-size:15px;--ink:#262624;--muted:#5f5d58;--accent:#3f6c86;--line:#e7e5e0;--surface:#f7f7f5}
 body.qf-ui{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.6;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
 .qf-ui h1,.qf-ui h2,.qf-ui h3{color:var(--ink);letter-spacing:-.02em;overflow-wrap:anywhere}
 .qf-ui h1,.qf-ui .main .heading h1{font-size:26px;font-weight:650;line-height:1.35}
 .qf-ui h2{font-size:18px;font-weight:600;line-height:1.45}
 .qf-ui h3{font-size:15px;font-weight:600;line-height:1.5}
 .qf-ui p{line-height:1.65}.qf-ui .muted,.qf-ui .heading p{color:var(--muted);font-size:13px}
 .qf-ui small{font-size:12px;line-height:1.5}.qf-ui strong{font-weight:600}
 .qf-ui button,.qf-ui input,.qf-ui select,.qf-ui textarea{font-family:inherit;font-size:14px;line-height:1.5}
 .qf-ui button,.qf-ui .main button,.qf-ui dialog button{min-height:38px;padding:7px 14px;border-radius:9px;font-weight:500}
 .qf-ui button:disabled{cursor:not-allowed}
 .qf-ui input:not([type=checkbox]):not([type=radio]),.qf-ui select,.qf-ui textarea{min-height:38px;padding:7px 10px;border:1px solid #d8d5ce;border-radius:8px}
 .qf-ui label,.qf-ui .main label{font-size:13px;font-weight:500;line-height:1.55;margin-bottom:12px}
 .qf-ui label input,.qf-ui label select,.qf-ui label textarea{margin-top:5px}
 .qf-ui .topbar{min-height:56px;padding:8px 28px;font-size:13px;border-bottom:1px solid var(--line)}
 .qf-ui .topbar a{text-decoration:none}.qf-ui .topbar a:hover{text-decoration:underline}
 .qf-ui .main,.qf-ui .main.main-overview{padding:24px 28px 36px}
 .qf-ui .main .heading{gap:16px;margin-bottom:20px}.qf-ui .heading p{margin-top:6px}
 .qf-ui .main .panel{padding:18px 20px;border-radius:12px;border-color:var(--line);margin-bottom:16px}
 .qf-ui .main .stats{gap:12px;margin-bottom:16px}.qf-ui .main .stat{padding:14px 16px}
 .qf-ui .stat span{font-size:13px}.qf-ui .main .stat strong{font-size:26px;line-height:1.2;margin-top:6px}
 .qf-ui .main .toolbar{gap:10px;margin-bottom:14px}
 .qf-ui th{font-size:12px;font-weight:600;color:#5f5d58}.qf-ui td{font-size:14px}
 .qf-ui .main td,.qf-ui .main th{padding:10px 12px}.qf-ui .pill{font-size:12px;padding:4px 8px;border-radius:6px}
 .qf-ui .sidebar .nav-group-title{font-size:11px}.qf-ui .sidebar .nav-links button,.qf-ui .sidebar .nav-links a{font-size:13px}
 .qf-ui .sidebar .nav-links button{padding:8px 10px;border-radius:8px}
 .qf-ui dialog{padding:24px;border-radius:16px;box-shadow:0 20px 80px #26262426}
 .qf-ui dialog h2{font-size:20px;margin:0 0 18px}.qf-ui dialog::backdrop{background:rgb(38 38 36 / 30%)}
 .qf-ui .studio-greeting h1{font-size:28px;font-weight:600}.qf-ui .main .studio-greeting>p{font-size:21px;line-height:1.5}
 /* Standalone report tools use the same readable content column. */
 body.qf-ui>main:not(.login-card){max-width:1240px;margin:24px auto;padding:24px 28px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:none}
 body.qf-ui>main>h1{margin:14px 0 6px}body.qf-ui>main>p{font-size:13px;color:var(--muted);margin:6px 0 16px}
 body.qf-ui>main h2{margin:20px 0 10px}.qf-ui .qf-tool-home{margin-bottom:4px}
 .qf-ui .qf-tool-home .qf-symbol{width:48px;height:48px}
 .qf-ui .scroll{margin:14px 0;border-radius:10px}.qf-ui .scroll td,.qf-ui .scroll th{padding:9px 10px}
 .qf-ui .hint,.qf-ui .print{padding:12px 16px;border-radius:10px;font-size:13px;background:#edf1f3}
 .qf-ui .drop{border-width:1px;padding:22px;border-radius:12px}.qf-ui legend{font-size:16px}
 .qf-ui .options{gap:16px}.qf-ui .options label{font-size:13px}
 .qf-ui .back{font-size:13px}.qf-ui header>img{width:52px;height:52px}
 .qf-ui .login-card h1,.qf-ui .login-form h2{font-size:24px}.qf-ui .login-card{border-radius:16px}
 body.qf-ui.internal-publication-manage .pub-header{min-height:64px;padding:10px max(24px,calc((100vw - 1184px)/2));border-bottom:1px solid var(--line)}
 body.qf-ui.internal-publication-manage>main{padding:20px 24px}
 body.qf-ui.internal-publication-manage h1{font-size:26px;font-weight:650;color:var(--ink)}
 .qf-ui :focus-visible{outline:2px solid #3f6c86;outline-offset:3px}
}
@media screen and (max-width:700px){.qf-usage>summary{min-height:44px}
 .qf-ui h1,.qf-ui .main .heading h1,body.qf-ui.internal-publication-manage h1{font-size:23px}
 .qf-ui .main,.qf-ui .main.main-overview{padding:18px 16px 28px}.qf-ui .topbar{padding:8px 16px}
 body.qf-ui>main:not(.login-card){margin:12px;padding:18px 16px;border-radius:12px}
 .qf-ui .main .panel{padding:14px}.qf-ui .main .stats{gap:8px}.qf-ui .main .stat{padding:12px}
 .qf-ui button,.qf-ui .main button,.qf-ui dialog button,.qf-ui select,.qf-ui input:not([type=checkbox]):not([type=radio]){min-height:44px}
 .qf-ui input,.qf-ui select,.qf-ui textarea{font-size:16px}.qf-ui dialog{padding:20px}
 .qf-ui .main .studio-search button{min-height:32px;padding:7px}
 .qf-ui .main .studio-greeting>p{font-size:19px}.qf-ui .studio-greeting h1{font-size:25px}
}
@media screen and (prefers-contrast:more){body.qf-ui{--muted:#5f5d58;--line:#a9a69f}.qf-ui .muted,.qf-ui small{color:#5f5d58}}
@media screen{
 .qf-ui .studio-tasks{background:#fff}
 .qf-ui .studio-search input:not([type=checkbox]){border:0;background:transparent;padding:4px 0;box-shadow:none;min-height:32px}
 .qf-ui .main .studio-search button{width:32px;height:32px;min-height:32px;border-radius:50%;padding:7px}
}

@media screen{.qf-ui .studio-empty,.qf-ui .studio-date,.qf-ui .row-context,.qf-ui .seal-empty p{color:var(--muted)}}

/* 2026-09-30 navigation: foldable groups fit a laptop screen; phones get a menu button and a bottom tab bar. */
@media screen{
 .qf-ui .sidebar{gap:1rem;padding-top:1.2rem}
 .qf-ui .sidebar details.nav-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:1.9rem;border-radius:8px}
 .qf-ui .sidebar details.nav-group>summary::-webkit-details-marker{display:none}
 .qf-ui .sidebar details.nav-group>summary::after{content:'›';font-size:15px;line-height:1;transform:rotate(0)}
 .qf-ui .sidebar details.nav-group[open]>summary::after{transform:rotate(90deg)}
 .qf-ui .sidebar details.nav-group>summary:hover{background:#f7f7f5;color:#3f6c86}
 .qf-ui .sidebar details.nav-group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
 .qf-ui .sidebar .nav-group{margin-bottom:.45rem}
 .qf-ui .sidebar .nav-links button,.qf-ui .sidebar .nav-links .publication-nav{min-height:2.25rem;padding:6px 10px}
 .qf-ui .sidebar .nav-links .publication-nav:first-of-type{margin-top:0}
 .qf-ui .nav-toggle,.qf-ui .nav-account,.qf-ui .tabbar{display:none}
 /* Count of what waits on a menu's page; a group title carries the sum only while the group is folded. */
 .qf-ui .nav-count{flex:none;margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#edf1f3;color:#3f6c86;font-size:12px;font-weight:600;line-height:20px;letter-spacing:0;text-align:center}
 .qf-ui .nav-count.late{background:#f8eceb;color:#ad3f3b}
 .qf-ui .sidebar .nav-links .active .nav-count:not(.late){background:#fff}
 .qf-ui .sidebar details.nav-group>summary .nav-count{margin-right:8px}
 .qf-ui .sidebar details.nav-group[open]>summary .nav-count{display:none}
 .qf-ui .reference-empty-line{margin:4px 0 0;color:var(--qf-ink-3);font-size:14px}
}
@media screen and (max-width:700px){
 .qf-ui .shell{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
 .qf-ui .sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:10px 16px;gap:8px}
 .qf-ui .sidebar .brand{min-height:2.2rem}
 .qf-ui .sidebar .nav-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;background:#f3f2ef;border:0;color:#3f6c86;font-size:15px}
 .qf-ui .sidebar .nav-panel{display:none;flex-basis:100%}
 .qf-ui .shell.nav-open .sidebar .nav-panel{display:block}
 .qf-ui .shell.nav-open .sidebar .nav-links{flex-direction:column}
 .qf-ui .shell.nav-open .sidebar .nav-links button,.qf-ui .shell.nav-open .sidebar .nav-links .publication-nav{width:100%;min-height:44px;margin:0}
 .qf-ui .shell.nav-open .sidebar .nav-account{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid #e7e5e0;padding-top:10px;margin-top:6px;color:#5f5d58}
 .qf-ui .topbar .account-name,.qf-ui .topbar [data-action=password],.qf-ui .topbar [data-action=logout]{display:none}
 .qf-ui .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid #e7e5e0;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
 .qf-ui .tabbar button,.qf-ui .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px;border:0;border-radius:10px;background:transparent;color:var(--qf-ink-3);font-size:11px;text-decoration:none}
 .qf-ui .tabbar .active{color:#3f6c86;background:#edf1f3;font-weight:600}
 .qf-ui .tabbar button,.qf-ui .tabbar a{position:relative}.qf-ui .tabbar .nav-count{position:absolute;top:3px;left:calc(50% + 6px);margin:0;min-width:18px;height:18px;padding:0 4px;line-height:18px}
 .qf-ui .tabbar button:active,.qf-ui .tabbar a:active,.qf-ui .sidebar .nav-toggle:active{transform:scale(.97)}
}
@media screen and (prefers-contrast:more){
 .qf-ui .tabbar{border-top-color:var(--qf-ink-3)}.qf-ui .tabbar button,.qf-ui .tabbar a{color:#262624}
}

/* 2026-10 layout pass 2: search first, calmer project page, account menu, clearer ledger and finance figures. */
@media screen{
 .qf-ui .studio-actions{display:flex;gap:10px;align-items:center;margin:.9rem 0 1.1rem}
 .qf-ui .studio-actions .studio-search{flex:1;margin-top:0}
 .qf-ui .studio-actions .studio-new{flex-shrink:0;min-height:44px;border-radius:9px;padding:0 1.2rem}
 .qf-ui .studio-features{align-items:start}
 .qf-ui .studio-note{padding:.9rem 1rem}
 .qf-ui .studio-note .studio-file{padding:.35rem 0}
 .qf-ui .studio-focus .work-row{padding:.55rem 0}
 .qf-ui .topbar{position:relative}
 .qf-ui .topbar>span:first-child{flex:1}
 .qf-ui .topbar .qf-security-entry{order:1;font-size:12px;color:var(--qf-ink-3)}
 .qf-ui .account-menu{order:2;position:relative}
 .qf-ui .account-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:2.5rem;padding:0 .6rem;border-radius:8px;color:#5f5d58;font-size:.8rem}
 .qf-ui .account-menu>summary::-webkit-details-marker{display:none}
 .qf-ui .account-menu>summary::after{content:'▾';font-size:12px;color:var(--qf-ink-3)}
 .qf-ui .account-menu>summary:hover{background:#f3f2ef}
 .qf-ui .account-menu>summary:focus-visible,.qf-ui .more-actions>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .qf-ui .account-menu-list,.qf-ui .more-actions-list{position:absolute;right:0;top:calc(100% + 4px);z-index:25;display:flex;flex-direction:column;min-width:12.5rem;padding:6px;background:#fff;border:1px solid #e7e5e0;border-radius:12px;box-shadow:0 10px 28px #26262414}
 .qf-ui .account-menu-list button,.qf-ui .more-actions-list button{justify-content:flex-start;text-align:left;width:100%;border:0;background:transparent;border-radius:8px;min-height:2.5rem;padding:.4rem .75rem;color:#5f5d58}
 .qf-ui .account-menu-list button:hover,.qf-ui .more-actions-list button:hover{background:#edf1f3}
 .qf-ui .more-actions-list .danger{color:#ad3f3b}
 .qf-ui .more-actions{position:relative;display:inline-block}
 .qf-ui .more-actions>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:2.5rem;padding:.4rem .9rem;border:1px solid #e7e5e0;border-radius:10px;background:#fff;color:#5f5d58;font-size:13px}
 .qf-ui .more-actions>summary::-webkit-details-marker{display:none}
 .qf-ui .more-actions>summary::after{content:'▾';font-size:12px;color:var(--qf-ink-3)}
 .qf-ui .more-actions-list{left:0;right:auto}
 .qf-ui .more-actions>summary:active,.qf-ui .account-menu>summary:active,.qf-ui .button-link:active{transform:scale(.97)}
 .qf-ui td.overdue{color:#ad3f3b}
 .qf-ui .progress-cell{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
 .qf-ui .progress-bar{appearance:none;-webkit-appearance:none;display:inline-block;width:64px;height:6px;border:0;border-radius:3px;background:#e7e5e0;overflow:hidden;vertical-align:middle}
 .qf-ui .progress-bar::-webkit-progress-bar{background:#e7e5e0;border-radius:3px}
 .qf-ui .progress-bar::-webkit-progress-value{background:#3f6c86;border-radius:3px}
 .qf-ui .progress-bar::-moz-progress-bar{background:#3f6c86;border-radius:3px}
 .qf-ui .progress-cell small{color:var(--qf-ink-3);font-size:12px}
 .qf-ui .finance-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:.6rem 0}
 .qf-ui .finance-figure{background:#f7f7f5;border-radius:10px;padding:.7rem .85rem;min-width:0}
 .qf-ui .finance-figure small{display:block;color:var(--qf-ink-3);font-size:12px}
 .qf-ui .finance-figure strong{display:block;font-size:17px;color:#262624;margin-top:2px;overflow-wrap:anywhere}
 /* The settled and the provisional profit of the profit table, side by side on phones too; the search beside the status choice. */
 .qf-ui .finance-figures.finance-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* The project's own four - contract, costs, profit, received - in one row; two by two on a phone. */
 .qf-ui .finance-figures.finance-four{grid-template-columns:repeat(4,minmax(0,1fr))}
 .qf-ui .finance-pair .finance-figure strong{font-size:20px;margin:4px 0 2px}
 .qf-ui .control-row label.profit-find{flex:1 1 18rem;max-width:28rem}
 /* A figure that opens what it is made of (the costs, how the profit comes about): a button that keeps the look of the figure,
    told apart by the word at its corner; the list it opens stands under the three figures. */
 .qf-ui button.finance-figure,.qf-ui .main button.finance-figure{display:block;width:100%;height:auto;padding:.7rem .85rem;border:0;border-radius:10px;font-size:inherit;font-weight:400;line-height:inherit;text-align:left;cursor:pointer}
 .qf-ui button.finance-figure:hover,.qf-ui button.finance-figure[aria-expanded=true]{background:#efeeea}
 .qf-ui button.finance-figure small span{float:right;color:#3f6c86}
 .qf-ui .finance-breakdown{list-style:none;margin:0 0 .6rem;padding:.15rem .85rem;border:1px solid #e7e5e0;border-radius:10px}
 .qf-ui .finance-breakdown[hidden]{display:none}
 .qf-ui .finance-breakdown li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:.45rem 0;border-top:1px solid #f0efeb;font-size:13px}
 .qf-ui .finance-breakdown li:first-child{border-top:0}
 .qf-ui .finance-breakdown li>span:first-child{min-width:0;overflow-wrap:anywhere}
 .qf-ui .finance-breakdown li>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
 .qf-ui .finance-breakdown li small{display:block;color:var(--qf-ink-3);white-space:pre-wrap}
 .qf-ui .finance-breakdown li.total{font-weight:600}
 /* In the table of 经营财务 the sum of the costs opens the same list in a row of its own under the project's. */
 .qf-ui button.finance-open,.qf-ui .main button.finance-open{min-height:0;padding:6px 0;margin:-6px 0;border:0;background:none;color:#3f6c86;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
 .qf-ui tr.finance-detail[hidden]{display:none}
 /* 确认 and 作废 at a line of a project's costs or receipts: small words after the line's name, as 删除 after a file's name. */
 .qf-ui button.finance-line-act,.qf-ui .main button.finance-line-act{min-height:0;height:auto;margin:0 0 0 10px;padding:0;border:0;background:none;box-shadow:none;color:var(--qf-ink-3);font:inherit;font-size:13px;font-weight:400;cursor:pointer}
 .qf-ui button.finance-line-act:hover{color:#ad3f3b}
 .qf-ui button.finance-line-act[data-finance=confirm]:hover{color:#3f6c86}
 .qf-ui button.finance-line-act[data-figure],.qf-ui .main button.finance-line-act[data-figure]{color:#3f6c86}
 /* The way down 经营财务 to its long parts, at the end of the year's row; each part stops a little under the top of the window. */
 .qf-ui .finance-jump{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
/* The number beside 经营财务, told where it is (asked for on 2026-10-17: "打开后看不到1是对应哪个"): 项目利润 the projects to settle, 应付佣金 the commissions. */
.qf-ui .finance-jump .nav-count{margin-left:8px}
 .qf-ui #finance-profit,.qf-ui #finance-costs,.qf-ui #finance-ledger{scroll-margin-top:16px}
 @media(max-width:700px){.qf-ui .finance-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-left:0}.qf-ui .finance-jump button{width:100%}}
 /* 应付佣金 on a phone: a card for each project, not a row to be dragged sideways - the project, the three sums side by side, the button. */
 @media(max-width:700px){.qf-ui .commission-due{overflow:visible}.qf-ui .commission-due table,.qf-ui .commission-due tbody{display:block;min-width:0}.qf-ui .commission-due thead{display:none}.qf-ui .commission-due tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px;padding:14px 0;border-bottom:1px solid #f0efeb}.qf-ui .commission-due tbody tr:last-child{border-bottom:0}.qf-ui .main .commission-due tbody td{display:block;width:auto;min-width:0;max-width:none;padding:0;border:0}.qf-ui .commission-due tbody td.project-name-cell,.qf-ui .commission-due tbody td.acts{grid-column:1/-1}.qf-ui .commission-due tbody td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--qf-ink-3)}.qf-ui .commission-due tbody td.acts button{width:100%}}
 .qf-ui tr.finance-detail>td{white-space:normal;background:#fbfaf8}
 .qf-ui tr.finance-detail .finance-breakdown{position:sticky;left:12px;margin:0;max-width:min(44rem,calc(100vw - 5.5rem));background:#fff}  /* stays in sight where the table is wider than the screen */
 .qf-ui .finance-invoice{color:#5f5d58;font-size:13px;margin:.3rem 0}
 /* The owner's remark on a project (a fee that gets no invoice, say): set apart, its own line breaks kept. */
 .qf-ui .finance-remark{background:#f7f0e2;color:#6f5021;border-radius:10px;padding:.6rem .85rem;margin:.6rem 0;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
 .qf-ui .button-link{display:inline-flex;align-items:center;min-height:2.5rem;padding:.4rem .9rem;border:1px solid #e7e5e0;border-radius:10px;background:#fff;color:#3f6c86;text-decoration:none;font-size:14px;font-weight:500}
 .qf-ui .button-link:hover{background:#f3f2ef}
 .qf-ui .audit-more>summary{cursor:pointer;color:#3f6c86;font-size:13px;padding:.6rem 0}
}
@media screen and (max-width:700px){
 .qf-ui .topbar .account-menu{display:none}
 .qf-ui .studio-actions{flex-wrap:wrap}
 .qf-ui .studio-actions .studio-new{width:100%}
 .qf-ui .finance-figures{grid-template-columns:1fr}
 .qf-ui .finance-figures.finance-four{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Side by side on a phone a figure is some 150px wide: a sum of eight figures (14,373,529.13) is to stand on one line - 17px from 375 up, 15px from 360. */
 .qf-ui .finance-pair .finance-figure strong{font-size:17px}
 .qf-ui .more-actions-list{position:static;margin-top:6px;box-shadow:none}
 .qf-ui .progress-bar{width:44px}
}
@media screen and (max-width:374px){.qf-ui .finance-pair .finance-figure strong{font-size:15px}}
/* Narrower still (320) the two figures go one above the other. */
@media screen and (max-width:359px){.qf-ui .finance-figures.finance-pair{grid-template-columns:1fr}.qf-ui .finance-pair .finance-figure strong{font-size:17px}}
@media screen and (prefers-contrast:more){
 .qf-ui .account-menu-list,.qf-ui .more-actions-list,.qf-ui .more-actions>summary,.qf-ui .button-link{border-color:var(--qf-ink-3)}
 .qf-ui .progress-bar,.qf-ui .progress-bar::-webkit-progress-bar{background:#d8d5ce}.qf-ui .progress-bar::-webkit-progress-value{background:#325a71}.qf-ui .progress-bar::-moz-progress-bar{background:#325a71}
}
.qf-ui .customer-cell{white-space:normal;min-width:18rem}.qf-ui .customer-cell>strong{display:block;font-weight:600}
.qf-ui .customer-projects{margin-top:.4rem}.qf-ui .customer-projects>summary{cursor:pointer;color:#3f6c86;font-size:12px;min-height:1.75rem;display:inline-flex;align-items:center}
.qf-ui .customer-project{padding:.45rem 0 .45rem .75rem;border-left:2px solid #e7e5e0;margin-top:.35rem}.qf-ui .customer-project .title{white-space:normal;overflow-wrap:anywhere;text-align:left;font-weight:500}.qf-ui .customer-project small{display:block;margin-top:.2rem;overflow-wrap:anywhere}
@media(max-width:700px){.qf-ui .customer-cell{min-width:14rem}.qf-ui .customer-projects>summary{min-height:2.75rem}}
.qf-ui .due-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem;max-height:46vh;overflow:auto;padding-right:.25rem;margin:.75rem 0 1rem}.qf-ui .due-list label{overflow-wrap:anywhere}
@media(max-width:700px){.qf-ui .due-list{grid-template-columns:1fr}}
.qf-ui dialog h3{margin:1rem 0 .35rem;font-size:14px}
.qf-ui .main .project-filters{grid-template-columns:minmax(14rem,2fr) repeat(4,minmax(0,1fr));gap:10px;align-items:center}
.qf-ui .main .project-filters.with-mode{grid-template-columns:minmax(14rem,2fr) repeat(5,minmax(0,1fr))}
.qf-ui .main .project-filters input,.qf-ui .main .project-filters select{height:42px;min-height:42px;padding-top:0;padding-bottom:0;border-radius:10px}
@media(max-width:1200px){.qf-ui .main .project-filters,.qf-ui .main .project-filters.with-mode{grid-template-columns:repeat(3,minmax(0,1fr))}.qf-ui .main .project-filters input{grid-column:1/-1}}
@media(max-width:700px){.qf-ui .main .project-filters,.qf-ui .main .project-filters.with-mode{grid-template-columns:repeat(2,minmax(0,1fr))}.qf-ui .main .project-filters input,.qf-ui .main .project-filters select{height:44px;min-height:44px}}
@media(max-width:400px){.qf-ui .main .project-filters,.qf-ui .main .project-filters.with-mode{grid-template-columns:minmax(0,1fr)}}
/* Controls that share a row share one height: 42px on desktop, 44px on phones. */
.qf-ui .toolbar input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .toolbar select,.qf-ui .toolbar button,.qf-ui .filters input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .filters select,.qf-ui .filters button,.qf-ui .control-row input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .control-row select,.qf-ui .control-row button,.qf-ui .renew-tools input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .renew-tools button{height:42px;min-height:42px;padding-top:0;padding-bottom:0}
.qf-ui .control-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:.75rem 0}.qf-ui .control-row label{margin:0;flex:0 1 13rem}
.qf-ui .renew-tools{align-items:flex-end}
.qf-ui dialog p+label{margin-top:.75rem}
.qf-ui .customer-projects>summary{min-height:0;padding:.1rem 0}
@media(max-width:700px){.qf-ui .toolbar input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .toolbar select,.qf-ui .toolbar button,.qf-ui .filters input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .filters select,.qf-ui .filters button,.qf-ui .control-row input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .control-row select,.qf-ui .control-row button,.qf-ui .renew-tools input:not([type=checkbox]):not([type=radio]):not([type=file]),.qf-ui .renew-tools button{height:44px;min-height:44px}.qf-ui .control-row label{flex:1 1 100%}.qf-ui .customer-projects>summary{min-height:2.75rem}}
/* Searchable picker built by search-match.js over <select data-qf-search>. */
.qf-ui .qf-picker{position:relative;width:100%;min-width:min(26rem,calc(100vw - 48px))}.qf-ui .qf-picker-input{width:100%}/* In a dialog the search field takes the width of its place in the form and sits where the fields beside it sit. */
.qf-ui dialog .qf-picker{min-width:0}
/* A searchable field of a two-column form in a dialog takes the whole row (记录收支), so its list of long project names stays inside the dialog. */
.qf-ui .form-grid>.span-all{grid-column:1/-1}.qf-ui dialog label>.qf-picker>.qf-picker-input{display:block;margin-top:6px}
.qf-ui .qf-picker-list{position:absolute;top:100%;left:0;min-width:100%;width:max-content;max-width:min(36rem,calc(100vw - 32px));z-index:30;margin-top:4px;max-height:min(360px,55vh);overflow:auto;background:#fff;border:1px solid #d8d5ce;border-radius:12px;box-shadow:0 12px 30px #2626241f;padding:6px;font-weight:400}
.qf-ui .qf-picker-list button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 10px;min-height:44px;height:auto;font-weight:400;color:#262624}.qf-ui .qf-picker-list button strong{display:block;font-weight:600;overflow-wrap:anywhere}.qf-ui .qf-picker-list button small{display:block;color:var(--qf-ink-3);margin-top:3px;overflow-wrap:anywhere}
.qf-ui .qf-picker-list button[aria-selected=true],.qf-ui .qf-picker-list button:hover{background:#edf1f3}.qf-ui .qf-picker-list p{margin:8px 10px;color:var(--qf-ink-3)}
@media(max-width:700px){.qf-ui .qf-picker-list{right:0;width:auto;max-width:none}}
/* In a dialog the list is as wide as its field, long names wrapping, so it never runs past the dialog's edge (2026-10-27: names with their numbers). */
.qf-ui dialog .qf-picker-list{right:0;width:auto;max-width:none}
.qf-ui .paused-todo .actions{margin-top:.6rem}
.qf-ui .paused-row{cursor:default}.qf-ui .paused-row .title{background:none;border:0;padding:0;min-height:0;height:auto;text-align:left;font-weight:600;color:inherit;overflow-wrap:anywhere}.qf-ui .paused-row .row-end button{min-height:34px;height:34px;padding:0 12px}
/* Text link back to the workplace on every standalone tool page. */
.qf-ui .qf-back{display:block;width:fit-content;margin:0 0 10px;color:#3f6c86;text-decoration:none;font-size:13px}.qf-ui .qf-back:hover{text-decoration:underline}

/* Project nodes read as a pipeline: the state sits beside the name, a one-line brief at the right, one strip shows the whole flow. */
@media screen{
 .qf-ui .pipeline{display:flex;gap:3px;margin:0 0 12px}
 .qf-ui .main .pipeline>button{position:relative;flex:1;min-width:0;height:6px;min-height:0;padding:0;border:0;border-radius:3px;background:#e7e5e0;box-shadow:none}
 .qf-ui .main .pipeline>button::after{content:'';position:absolute;inset:-9px 0}
 .qf-ui .main .pipeline>button.done{background:#3b7553}.qf-ui .main .pipeline>button.pending,.qf-ui .main .pipeline>button.working{background:#3f6c86}.qf-ui .main .pipeline>button.review{background:var(--qf-amber)}.qf-ui .main .pipeline>button.late{background:#ad3f3b}
 .qf-ui .main .pipeline>button:hover{filter:brightness(.9)}
 .qf-ui .project-nodes :is(.compact-node,.node){scroll-margin-top:12px}
 .qf-ui .project-nodes .jump-target{background:var(--qf-accent-soft);box-shadow:-12px 0 0 var(--qf-accent-soft),12px 0 0 var(--qf-accent-soft)}
 .qf-ui .compact-node>summary,.qf-ui .project-nodes .node-head{justify-content:flex-start;flex-wrap:wrap;gap:4px 12px}
 .qf-ui .project-nodes .compact-node>.node>.node-head{display:none}
 .qf-ui .node-brief{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;color:var(--qf-ink-3);font-size:13px}
 .qf-ui .node-brief>span+span::before{content:'·';margin:0 7px;color:#d8d5ce}
 .qf-ui .node-brief>.late{color:#ad3f3b}.qf-ui .node-brief>.returned{color:var(--qf-amber)}
 .qf-ui .node-history{margin-top:12px;padding-top:10px;border-top:1px dashed #e7e5e0}
 .qf-ui .node-history>h4{margin:0 0 8px;color:var(--qf-ink-3);font-size:13px;font-weight:500}
 .qf-ui .node-history dl{display:grid;gap:4px;margin:10px 0 0;font-size:13px}
 .qf-ui .node-history dl>div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:10px}
 .qf-ui .node-history dt{color:var(--qf-ink-3)}.qf-ui .node-history dd{margin:0;color:#5f5d58;overflow-wrap:anywhere;white-space:pre-wrap}
 .qf-ui .history-archive>details>summary{cursor:pointer;color:#5f5d58;font-size:14px}
}
@media screen and (max-width:700px){
 .qf-ui .node-brief{flex-basis:100%;justify-content:flex-start;margin-left:0;gap:2px 14px}
 .qf-ui .node-brief>span+span::before{content:none}
 .qf-ui .compact-node>summary>.node-brief{padding-left:20px}
 .qf-ui .main .pipeline>button::after{inset:-26px 0 -12px}
}
@media print{.qf-ui .pipeline{display:none}}

/* The project's action row: the main button and the 更多操作 menu are one height and one text size, and the menu's
   own top margin no longer stretches the row. */
@media screen{
 .qf-ui .main>.actions{align-items:center}
 .qf-ui .main>.actions>.more-actions{margin:0}
 .qf-ui .main>.actions>button,.qf-ui .main>.actions>.more-actions>summary{height:42px;min-height:42px;padding-top:0;padding-bottom:0;font-size:14px}
 /* The overview's search bar is as tall as the button beside it. */
 .qf-ui .main .studio-search{box-sizing:border-box;min-height:44px;padding-top:0;padding-bottom:0}
 /* Members: the project names of the work column are left-aligned links, as in the project ledger, so a long name wraps
    as text and not as a tall button beside the row's buttons. The padding keeps a one-line name as tall as those buttons. */
 .qf-ui .main td.member-work button[data-project]{display:block;width:100%;height:auto;min-height:0;padding:9px 0;border:0;background:none;box-shadow:none;text-align:left}
 .qf-ui .main td.member-work button[data-project]:hover{color:var(--qf-accent)}
 /* Members: a system-made account name wraps in its own column instead of stretching it. */
 .qf-ui .main td.member-account{min-width:12rem}
 .qf-ui .main td.member-account small{white-space:normal;overflow-wrap:anywhere}
 /* The column keeps a readable width however long the account names beside it are; the table scrolls sideways instead. */
 .qf-ui .main td.member-work{min-width:min(16rem,60vw)}
 /* Members: the work folded to one line, as tall as the row's buttons, its words on the line of the row's other words (the
    padding given back by as much margin), and opened under it to the projects. */
 .qf-ui .main td.member-work details{margin:0}
 .qf-ui .main td.member-work summary{padding:8px 0;margin:-8px 0;cursor:pointer;color:var(--qf-ink)}
 .qf-ui .main td.member-work details[open]>summary{margin-bottom:0}
 .qf-ui .main td.member-work summary:hover{color:var(--qf-accent)}
 /* That a review would come to the project's own writer (a hand-over, a release, an approval, 离职交接): told in the window, not refused. */
 .qf-ui .self-review-note{margin:10px 0;padding:8px 12px;border-radius:8px;background:var(--qf-amber-soft,#f7f0e2);color:#6f5021;font-size:13px;line-height:1.6}
 /* 离职交接: project by project, a node to a line beside the one who takes it. */
 .qf-ui .handover-all{margin-bottom:4px}
 .qf-ui .handover-project{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--qf-line,#e7e5e0)}
 .qf-ui .handover-project h3{margin:0 0 6px;font-size:14px;line-height:1.5}
 .qf-ui .handover-project h3 small{display:inline;margin-left:6px;color:var(--qf-ink-3,var(--qf-ink-3));font-size:12px;font-weight:400}
 .qf-ui .handover-node{display:grid;grid-template-columns:minmax(0,1fr) 12rem;align-items:center;gap:6px 12px;margin:6px 0;font-size:13px}
 .qf-ui .handover-node>span{min-width:0;overflow-wrap:anywhere}
 .qf-ui .handover-close{display:flex;margin:4px 0 14px}
}
@media screen and (max-width:700px){
 .qf-ui .handover-node{grid-template-columns:minmax(0,1fr)}
 .qf-ui .main>.actions>button,.qf-ui .main>.actions>.more-actions>summary{height:44px;min-height:44px}
 /* Members: on a phone a one-line name is 44px to touch. */
 .qf-ui .main td.member-work button[data-project]{padding:12px 0}
 .qf-ui .main td.member-work summary{padding:11px 0;margin:-11px 0}
 .qf-ui .main td.member-work details[open]>summary{margin-bottom:0}
}

/* The overview's two summary cards are one height and their lists one size of text: a name at 14px, its second line at 13px. */
@media screen{
 .qf-ui .studio-features{align-items:stretch}
 .qf-ui .studio-focus .work-row strong{font-size:14px;line-height:1.45}
 .qf-ui .studio-focus .row-context{line-height:1.45;margin-top:2px}
 .qf-ui .studio-note .studio-file small{font-size:13px}
 /* A row's dividing line is straight: the general button radius would curve its ends. */
 .qf-ui .main .work-row{border-radius:0}
 /* Finance table: a row's buttons stand apart, two or three to a line and the rest under them instead of running off the card;
    the links among them (to the invoice request and the ledger) are sized as the buttons are. */
 .qf-ui .main td.finance-actions{white-space:normal;min-width:16.5rem}
 /* Beside that many buttons the name gives up some of the width it keeps elsewhere, so the table of 经营财务 stays within the page.
    (2026-10-17, the owner: "表格宽度也改一下" - at 1440 the project table ran 29px past its card, 189 at 1280, the 开票台账 button half
    hidden: the buttons now stand two to a line (16.5rem, was 19.5) and the name keeps 12rem (was 16); measured on the real data, it is
    within its card from 1366 up, its figures each on one line.) */
 .qf-ui .main tr:has(>td.finance-actions)>td.project-name-cell{min-width:min(12rem,60vw)}
 /* Narrower than that the figures under a sum may break at their space ("青枫已开票" over "13,000.00"), never inside a word or a number:
    the tables of 经营财务 then stay within the page from 1280 up. Wider, they do not, for the name would take all the room left. */
 @media(max-width:1365px){.qf-ui .main:has(#finance-profit) td:not(.project-name-cell){white-space:normal;word-break:keep-all}}
 .qf-ui .main td.finance-actions>.row-actions{display:flex;flex-wrap:wrap;gap:6px}
 .qf-ui .main td.finance-actions .button-link{font-size:14px;white-space:nowrap}
}
/* How to use a tool page, kept off the page until asked for: a button at the top right of the sheet, the steps in a panel
   beneath it. While the panel is open the button spreads an unseen sheet under it, so a click anywhere else folds it away. */
@media screen{
 body.qf-ui>main{position:relative}
 .qf-ui .qf-usage{position:absolute;top:24px;right:28px;z-index:5;margin:0;font-size:13px}.qf-ui .heading>.qf-usage,.qf-ui .iw-heading>.qf-usage{position:relative;top:auto;right:auto;margin-left:auto;flex-shrink:0}.qf-ui .heading>.qf-usage~*{margin-left:0}.qf-ui .heading,.qf-ui .iw-heading{align-items:center}
 .qf-ui .qf-usage>summary{display:flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid #d8d5ce;border-radius:9px;background:#fff;color:#3f6c86;list-style:none;cursor:pointer;white-space:nowrap}
 .qf-ui .qf-usage>summary::-webkit-details-marker{display:none}
 .qf-ui .qf-usage[open]>summary{background:#edf1f3}
 .qf-ui .qf-usage[open]>summary::before{content:'';position:fixed;inset:0;cursor:default}
 .qf-ui .qf-usage>ol{position:absolute;top:calc(100% + 6px);right:0;width:min(31rem,calc(100vw - 2rem));max-height:70vh;overflow:auto;margin:0;padding:12px 16px 12px 34px;border:1px solid #e7e5e0;border-radius:11px;background:#fff;box-shadow:0 8px 28px #26262414;color:#5f5d58;font-weight:400;line-height:1.6;text-align:left;white-space:normal}
 .qf-ui .qf-usage li+li{margin-top:5px}
 .qf-ui .qf-usage a{color:#3f6c86}
 /* Where a page has a heading row of its own, the button takes the end of that row. */
 .qf-ui :is(.tool-heading,.pub-header)>.qf-usage{position:relative;top:auto;right:auto}
 .qf-ui .tool-heading>#account,.qf-ui .pub-header>a:nth-child(2){margin-left:auto}
}
@media screen and (max-width:700px){.qf-ui .qf-usage{top:18px;right:16px}.qf-ui .qf-usage>summary{min-height:44px}}
@media print{.qf-usage{display:none!important}}
/* What has changed in the system: a plain list in the shared dialog, read once on opening the system and kept under the account menu. */
.qf-ui dialog .updates-list{max-height:calc(90dvh - 190px);overflow-y:auto;padding-right:8px}
.qf-ui dialog .updates-list:focus-visible{outline:none}
.qf-ui dialog .updates h3{margin:0;font-size:15px;font-weight:600;color:#262624}
.qf-ui dialog .updates h4{margin:16px 0 4px;font-size:13px;font-weight:600;color:#3f6c86}
.qf-ui dialog .updates h4:first-child{margin-top:0}
.qf-ui dialog .updates ul{margin:0;padding-left:1.25em;color:#5f5d58;font-size:14px;line-height:1.65}
.qf-ui dialog .updates ul+ul{margin-top:14px}
.qf-ui dialog .updates li+li{margin-top:3px}
.qf-ui dialog .updates section+section{margin-top:20px;padding-top:18px;border-top:1px solid #e7e5e0}
/* Settings the owner keeps: the permissions table, the calendar rows and the project types take the heights of every other row of controls. */
.qf-ui :is(.settings-permissions,.settings-kinds) :is(th,td):nth-child(n+3){text-align:center}
.qf-ui :is(.settings-permissions,.settings-kinds) td{vertical-align:middle}
.qf-ui .settings-permissions td select{width:auto;min-width:7rem}
.qf-ui :is(.settings-permissions,.settings-kinds) td input[type=checkbox]{width:18px;height:18px;min-height:0;vertical-align:middle}
.qf-ui .settings-kinds td input[data-kind-field=code]{width:6.5rem;text-transform:uppercase}
.qf-ui .settings-kinds td input[data-kind-field=name]{min-width:12rem}
.qf-ui .settings-kinds td :is(input:not([type=checkbox]),button){height:42px;min-height:42px;padding-top:0;padding-bottom:0}
/* On a phone each type is two lines: code and name, then what rests on it, whether it is open, and its removal. */
@media(max-width:700px){
.qf-ui .settings-kinds .table-wrap{overflow:visible}
.qf-ui .settings-kinds :is(table,tbody){display:block;width:100%;min-width:0}
.qf-ui .settings-kinds thead{display:none}
.qf-ui .settings-kinds tbody tr{display:grid;grid-template-columns:5.5rem auto 1fr 3.75rem;gap:.5rem .9rem;align-items:center;padding:.75rem 0;border-bottom:1px solid #e7e5e0}
.qf-ui .settings-kinds tbody td:nth-child(n){display:block;min-width:0;padding:0;border:0;text-align:left}
.qf-ui .settings-kinds tbody td:nth-child(2){grid-column:2/-1}
.qf-ui .settings-kinds tbody td:nth-child(5){text-align:right}
.qf-ui .settings-kinds tbody td:nth-child(3):not(:empty)::before{content:"项目 "}
.qf-ui .settings-kinds tbody td:nth-child(4):not(:empty)::before{content:"模板 "}
.qf-ui .settings-kinds tbody td:nth-child(5)::before{content:"启用 "}
.qf-ui .settings-kinds td :is(input[data-kind-field=code],input[data-kind-field=name]){width:100%;min-width:0}
.qf-ui .settings-kinds td :is(input:not([type=checkbox]),button){height:44px;min-height:44px}
}
/* The order of the types: two buttons at the end of each row; on a phone they take a line of their own under it. */
.qf-ui .settings-kinds td.kind-move{white-space:nowrap}
.qf-ui .settings-kinds td.kind-move button+button{margin-left:8px}
@media(max-width:700px){.qf-ui .settings-kinds tbody td.kind-move{grid-column:1/-1;display:flex;gap:8px}.qf-ui .settings-kinds td.kind-move button+button{margin-left:0}}
.qf-ui .settings-save label[hidden]{display:none}
.qf-ui .settings-calendar h3{margin:1.1rem 0 0;font-size:14px;font-weight:500;color:var(--qf-ink-2)}
.qf-ui .settings-calendar .calendar-row{align-items:center;margin:.5rem 0}
.qf-ui .settings-calendar .calendar-row input{width:11rem}
.qf-ui :is(.settings-calendar,.settings-kinds) .actions{margin-top:.5rem}
/* The cycles of the project types (到期修编周期): a number of years each, so several to a row, two on a phone; the boxes of a row stand on one line when a name runs to two. */
.qf-ui .settings-revisions .form-grid{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));align-items:end}
@media(max-width:700px){.qf-ui .settings-revisions .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qf-ui .settings-save{margin-top:1rem}
/* Template editor: on a phone the four buttons under a node sit two by two, none left alone on a line. */
@media(max-width:700px){.qf-ui dialog .template-node>.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}}
/* A dialog with a way of use of its own: the button takes the end of the heading row, and its list stays within the dialog. */
.qf-ui dialog .dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qf-ui dialog .dialog-heading>h2{min-width:0;margin-top:0}
.qf-ui dialog .dialog-heading>.qf-usage{position:relative;top:auto;right:auto;flex-shrink:0}
.qf-ui dialog .dialog-heading>.qf-usage>ol{width:min(31rem,calc(100vw - 4.5rem))}
/* An older version of a template, with its removal where nothing rests on it. */
.qf-ui .template-card .history-version{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0}
/* Settings: a category of public notices is one row of controls; its checkbox carries its own word. */
.qf-ui .settings-categories .category-row{align-items:center;margin:.5rem 0}
.qf-ui .settings-categories .category-row input[data-category-field=name]{width:14rem}
.qf-ui .settings-categories .category-row>.muted{min-width:4.5rem}
/* A checkbox with its own word, wherever the settings page has one: the pair stays together and pairs wrap as a line fills. */
.qf-ui .settings-check{display:inline-flex;align-items:center;gap:6px}
.qf-ui .settings-check input{flex:none;width:18px;min-width:18px;height:18px;min-height:0;padding:0}
.qf-ui .settings-check label{margin:0}
.qf-ui .settings-checks{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:.5rem 0}
.qf-ui .settings-wecom h3{margin:1.1rem 0 0;font-size:14px;font-weight:500;color:var(--qf-ink-2)}
.qf-ui :is(.settings-categories,.settings-limits,.settings-regions,.settings-wecom,.settings-tabs) .actions{margin-top:.5rem}
/* 页面标签顺序 (2026-10-24): a row for each group, its tabs as chips with a button either side to move them. */
/* A page of the workplace with a way of use of its own: the button sits in the heading row, before the page's own button. */
.qf-ui .heading>.qf-usage{position:relative;top:auto;right:auto;flex-shrink:0}
/* It takes the height of the button beside it (38 in the workplace, 40 on the pages with a bar of their own, 44 on a phone). */
.qf-ui .heading>.qf-usage>summary{min-height:38px}
.qf-ui .topbar~main:not(.main) .heading>.qf-usage>summary{min-height:40px}
/* A link drawn as a button is as tall as the buttons beside it on a phone too. */
@media(max-width:700px){.qf-ui .button-link{min-height:44px}}
/* On a phone the heading stacks and the button stands at the left: its list opens from the left edge, not off the screen. */
@media(max-width:700px){.qf-ui .heading>.qf-usage>summary,.qf-ui .topbar~main:not(.main) .heading>.qf-usage>summary{min-height:44px}.qf-ui .heading>.qf-usage{align-self:flex-start}.qf-ui .heading>.qf-usage>ol{left:0;right:auto}}
/* Under a customer, an annual testing record is a link to its place in the testing ledger: it reads like the project names above it. */
.qf-ui .customer-project a.title{display:inline-block;text-decoration:none}
.qf-ui .customer-project a.title:hover,.qf-ui .customer-project a.title:focus-visible{text-decoration:underline}
@media(max-width:700px){.qf-ui .customer-project a.title{display:inline-flex;align-items:center;min-height:2.75rem}}

/* A project the owner keeps to himself (private_projects.py) is marked after its name in the list of projects, and beside its state on its own page,
   the two marks keeping together where the line folds; in the form that makes a project the tick stands by itself between two fields. */
.qf-ui .title .pill{margin-left:8px;vertical-align:1px}
.qf-ui .pill-group{display:inline-flex;align-items:center;gap:8px}
.qf-ui .project-private{display:flex;margin:4px 0 14px}
/* 佣金待付提醒 (finance.js alertMark): a project's money in and its commission not paid, in amber as money waiting to be paid; one put off, in grey. */
.qf-ui .commission-alert,.qf-ui .settle-alert{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:7px;background:var(--qf-amber-soft,#f7f0e2);color:var(--qf-amber,var(--qf-amber));font-size:12px;line-height:1.6;white-space:nowrap}
.qf-ui .commission-alert.snoozed{background:#e7e5e0;color:#5f5d58}
.qf-ui .project-name-cell .commission-alert,.qf-ui .project-name-cell .settle-alert,.qf-ui td.vendor>.commission-alert{margin:4px 0 0}
.qf-ui .commission-due td.acts button+button{margin-left:8px}
@media(max-width:700px){.qf-ui .main .commission-due tbody td.acts{display:flex;gap:8px}.qf-ui .commission-due tbody td.acts button{flex:1 1 0;min-width:0}.qf-ui .commission-due td.acts button+button{margin-left:0}}
/* 经营管理 in five entries (2026-10-17): at the top of each page of a group, a row of tabs to the others of it, each with its own
   number (web/page-tabs.js); the one open is underlined. 40 high as the workplace's controls, 44 on a phone. */
.qf-ui .page-tabs{display:flex;flex-wrap:wrap;gap:0 28px;margin:18px 0 0;border-bottom:1px solid #e7e5e0}
.qf-ui .page-tabs a{display:inline-flex;align-items:center;min-height:40px;margin-bottom:-1px;border-bottom:2px solid transparent;color:#5f5d58;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.qf-ui .page-tabs a:hover{color:#262624}
.qf-ui .page-tabs a[aria-current=page]{border-bottom-color:#3f6c86;color:#3f6c86;font-weight:600}
.qf-ui .page-tabs .nav-count{margin-left:8px}
.qf-ui .page-tabs+.heading{margin-top:18px}
@media(max-width:700px){.qf-ui .page-tabs{gap:0 20px;margin-top:12px}.qf-ui .page-tabs a{min-height:44px}}
/* "需要处理" (2026-10-17, of the numbers on the left): a row above a list - all, and those the number counts - as on 用章申请; for the lists
   with no row of figures (开票, 经营财务's 应付佣金). */
.qf-ui .todo-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 12px;margin:0 0 4px;border-bottom:1px solid #e7e5e0}
.qf-ui .todo-tabs button{display:inline-flex;align-items:center;gap:8px;height:38px;min-height:38px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:#5f5d58;font-size:14px;font-weight:500;box-shadow:none}
.qf-ui .todo-tabs button:hover:not(:disabled){background:#edf1f3}
.qf-ui .todo-tabs button[aria-pressed=true]{background:#e7e5e0;color:#3f6c86}
.qf-ui .todo-tabs button:disabled{color:#b5b2ab;cursor:default}
.qf-ui .todo-tabs span{font-size:12px;min-width:20px;text-align:center;padding:0 5px;border-radius:5px;background:#e7e5e0;color:#3f6c86;font-variant-numeric:tabular-nums}
.qf-ui .todo-tabs button.wait:not(:disabled) span{background:#f6e7d3;color:var(--qf-amber)}
@media(max-width:650px){.qf-ui .todo-tabs button{height:44px;min-height:44px;font-size:13px;padding:0 10px}}
/* 项目台账's "需要处理" (2026-10-17): the projects with a handoff or a pause waiting for an administrator, first of the figures, as on the ledgers. */
.qf-ui .main .stats.with-todo{grid-template-columns:repeat(5,minmax(0,1fr))}
.qf-ui .main .stats .todo-stat strong{color:var(--qf-amber,#a7631a)}
.qf-ui .main .stats .todo-stat small{display:block;margin-top:4px;font-size:13px;color:#3f6c86}
.qf-ui .main .stats .todo-stat[aria-pressed=true]{border-color:#3f6c86;box-shadow:inset 0 0 0 1px #3f6c86;background:#f3f6f8}
.qf-ui .project-name-cell small.asking{display:block;margin-top:2px;color:var(--qf-amber,#a7631a);font-size:13px}
@media(max-width:700px){.qf-ui .main .stats.with-todo{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sums in the long tables (2026-10-17, style A, of the research): right-aligned, the figures of one width, so that they are read down a
   column; the header of 经营财务's projects and 开票台账 stays at the top while the table is scrolled, where the table is wide enough not to
   be scrolled across (1280 and wider; narrower, the frame scrolls across as before and the header goes with the page). */
.qf-ui td.num,.qf-ui th.num{text-align:right;font-variant-numeric:tabular-nums}
.qf-ui td.num small{text-align:right}
@media(min-width:1280px){
 .qf-ui .table-wrap.sticky-head{overflow-x:clip;overflow-y:visible}   /* not a box that scrolls, so that the header can stay */
 .qf-ui .table-wrap.sticky-head thead th{position:sticky;top:0;z-index:2;background:var(--qf-card,#fff);box-shadow:0 1px 0 var(--qf-line,#e7e5e0)}
}
/* One head for the pages outside the workplace (2026-10-17, N5 of the界面 research; the ledgers had it, the tools and 公示管理 get it): a row "← 工作台 … name" with a line under it, then the title with 使用方法 and the page's buttons beside it; no logo - the sidebar has it. */
.qf-ui .tool-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:14px 0;margin:0 0 22px;border-bottom:1px solid #e7e5e0;font-size:13px}
.qf-ui .tool-top>.qf-back{margin:0}
.qf-ui .tool-top>span{color:#5f5d58}
.qf-ui .tool-top+.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0 0 18px}
.qf-ui .tool-top+.heading>h1{margin:0}
.qf-ui .tool-top+.heading>.qf-usage>summary{min-height:40px}
@media(max-width:700px){.qf-ui .tool-top+.heading>.qf-usage>summary{min-height:44px}}
body.qf-ui.internal-publication-manage .pub-header>a:first-child{font-weight:400;font-size:13px;color:#3f6c86;text-decoration:none;margin:0}
body.qf-ui.internal-publication-manage .pub-header>.qf-usage>summary{min-height:40px}
.qf-ui :is(.iw-top,.pf-top,.sr-top){height:auto;min-height:50px;padding:14px 0;font-size:13px}
.qf-ui :is(.iw-heading,.pf-heading,.sr-heading) h1{font-size:26px;line-height:1.35}
/* Empty states (N8): the same quiet block everywhere - a faint mark, one short fact, a button only where there is something to do. */
.qf-ui .empty{padding:36px 16px;text-align:center;color:#5f5d58;font-size:14px}
.qf-ui .empty::before{content:'';display:block;width:30px;height:30px;margin:0 auto 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c6bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l2.5-6h13L21 12v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M3 12h5l1.5 2.5h5L16 12h5'/%3E%3C/svg%3E") center/contain no-repeat}
.qf-ui .empty h2{font-size:14px;font-weight:500;color:#5f5d58;margin:0}
.qf-ui .empty p{margin:6px 0 0;font-size:13px}
.qf-ui .empty button{margin-top:16px}
/* 佣金统计 (2026-10-19): on a phone each group and each item is a card, as 未付清 (.commission-due) is: the name across, the three sums side by side under it. */
@media(max-width:700px){.qf-ui .commission-stat{overflow:visible}.qf-ui .commission-stat table,.qf-ui .commission-stat tbody{display:block;min-width:0}.qf-ui .commission-stat thead{display:none}.qf-ui .commission-stat tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px;padding:14px 0;border-bottom:1px solid #f0efeb}.qf-ui .commission-stat tbody tr:last-child{border-bottom:0}.qf-ui .main .commission-stat tbody td{display:block;width:auto;min-width:0;max-width:none;padding:0;border:0;text-align:left}.qf-ui .commission-stat tbody td.project-name-cell,.qf-ui .commission-stat tbody td.wide{grid-column:1/-1}.qf-ui .commission-stat tbody td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--qf-ink-3)}.qf-ui .commission-stat td>details .commission-stat tbody tr{padding:10px 0}}
/* Multi-choice filter (multi-pick.js): a button that looks like the page's selects, a list of checkboxes under it; phones give the list the filter bar's whole width. */
.qf-ui .mp{position:relative;display:block;min-width:0;margin:0}.qf-ui label>.mp{margin-top:5px}
.qf-ui .mp .mp-btn{display:block;width:100%;min-width:0;max-width:none;height:42px;min-height:42px;margin:0;padding:0 32px 0 12px!important;border:1px solid var(--form-line,#d8d5ce);border-radius:10px;background-color:#fff;background-image:linear-gradient(45deg,transparent 50%,var(--qf-ink-2,#5f5d58) 50%),linear-gradient(135deg,var(--qf-ink-2,#5f5d58) 50%,transparent 50%);background-position:right 16px center,right 11px center;background-size:5px 5px;background-repeat:no-repeat;color:var(--qf-ink,#262624);font-size:14px;font-weight:400;line-height:1.45;text-align:left;box-shadow:0 1px 2px #26262406}
.qf-ui .mp .mp-btn:hover:not(:disabled){border-color:var(--form-line-hover,#b9b5ac)}
.qf-ui .mp .mp-btn:focus-visible,.qf-ui .mp.mp-open .mp-btn{border-color:var(--form-focus,#3f6c86)}.qf-ui .mp .mp-btn:focus-visible{outline:3px solid var(--form-focus-ring,#dde7ed);outline-offset:1px}
.qf-ui .mp .mp-btn:disabled{background-color:#f3f2ef;color:#5f5d58;box-shadow:none;cursor:default}
.qf-ui .mp .mp-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-ui .mp .mp-pop{position:absolute;top:100%;left:0;z-index:30;box-sizing:border-box;min-width:100%;width:max-content;max-width:min(24rem,calc(100vw - 32px));max-height:min(360px,55vh);overflow:auto;margin-top:4px;padding:6px;background:#fff;border:1px solid var(--qf-line-2,#d8d5ce);border-radius:12px;box-shadow:0 12px 30px #2626241f;font-weight:400;text-align:left}
.qf-ui .mp .mp-pop[hidden]{display:none}
.qf-ui .mp .mp-row{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:8px;cursor:pointer;color:var(--qf-ink,#262624);font-size:14px;line-height:1.45}
.qf-ui .mp .mp-row:hover{background:var(--qf-accent-soft,#edf1f3)}
.qf-ui .mp .mp-all{margin-bottom:4px;border-bottom:1px solid var(--qf-line,#e7e5e0);border-radius:8px 8px 0 0}
.qf-ui .mp .mp-row input{flex:none;width:16px;height:16px;min-height:0;margin:0;padding:0;accent-color:var(--qf-accent,#3f6c86)}
.qf-ui .mp .mp-lab{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){
 .qf-ui .mp .mp-btn{height:44px;min-height:44px;font-size:16px}
 .qf-ui .mp{position:static}.qf-ui .main .project-filters:has(.mp),.qf-ui .filters:has(.mp),.qf-ui .control-row:has(.mp){position:relative}
 .qf-ui .mp .mp-pop{left:0;right:0;width:auto;max-width:none;max-height:min(320px,50vh);scroll-margin-bottom:84px}   /* clear of the tab bar at the foot of the window */
 .qf-ui .mp .mp-row{min-height:44px}
}
/* A file chosen in a small window (file-drop.js, data-file-pick): the button is what is seen, the box behind it is out of sight. 删除 after the box stays only where .keep-clear says the choice lasts on the page. */
.qf-ui label.pick-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:42px;min-height:42px;margin:0;padding:0 .9rem;line-height:1.2;white-space:nowrap;cursor:pointer}
.qf-ui input[type=file].file-hidden{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;overflow:hidden;opacity:0;pointer-events:none}
.qf-ui input[type=file].file-hidden+.file-clear{display:none!important}
.qf-ui input[type=file].file-hidden.keep-clear:not(:disabled)+.file-clear:not(:disabled){display:inline-block!important}
.qf-ui label.pick-button:has(+input:disabled){opacity:.5;cursor:default;pointer-events:none}
.qf-ui label.pick-button:has(+input:focus-visible){outline:2px solid #3f6c86;outline-offset:1px}
@media(max-width:700px){.qf-ui label.pick-button{height:44px;min-height:44px}}
/* A small action under a field, such as 新建客户档案 under the project form's customer (2026-10-25). */
.qf-ui label>.button-link.form-aside{display:inline-block;margin-top:6px;padding:4px 10px;font-size:13px;align-self:flex-start}
.qf-ui details.project-terms-fields{margin:8px 0}
.qf-ui details.project-terms-fields>summary{cursor:pointer;font-weight:600;padding:6px 0}
/* 最近打开 (2026-10-25): flat tabs under the top bar, a line under the current one, thin dividers; none on a phone. */
.qf-ui .qf-recent{display:flex;align-items:stretch;gap:0;padding:0 20px;background:#fff;border-bottom:1px solid var(--qf-line);overflow-x:auto;white-space:nowrap;font-size:13px;scrollbar-width:none}
.qf-ui .qf-recent::-webkit-scrollbar{display:none}
.qf-ui .qf-recent-tab{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:10px 14px;border-right:1px solid var(--qf-line);border-bottom:2px solid transparent;color:var(--qf-ink-2);text-decoration:none;line-height:1.4;flex:none}
.qf-ui .qf-recent-tab:first-child{padding-left:4px}
.qf-ui .qf-recent-tab span{overflow:hidden;text-overflow:ellipsis}
.qf-ui .qf-recent-tab:hover{color:var(--qf-ink);background:var(--qf-soft)}
.qf-ui .qf-recent-tab.is-current{border-bottom-color:var(--qf-accent);color:var(--qf-ink);font-weight:500}
.qf-ui .qf-recent-tab .x{border:0;background:none;color:inherit;opacity:.5;padding:0 2px;min-height:0;height:auto;line-height:1;font-size:15px;border-radius:4px;cursor:pointer}
.qf-ui .qf-recent-tab .x:hover{opacity:1;background:var(--qf-line)}
@media(max-width:700px){.qf-ui .qf-recent{display:none}}
.qf-ui .settings-date{display:flex;align-items:center;gap:10px;margin:.25rem 0 .75rem}
.qf-ui .settings-date input{width:auto;min-width:0;flex:none}
/* 拖动排序 (2026-10-30): 左栏顺序, 页面标签顺序, 项目类型, 公示分类 - a row held by its handle, a line where it will go, a step up and down beside */
.qf-ui .sort-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 20px;margin-top:10px}
.qf-ui .sort-group h3{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--qf-ink-3)}
.qf-ui .sort-list{list-style:none;margin:0;padding:0}
.qf-ui li.sort-row{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 2px 0 0;border:1px solid #e7e5e0;border-radius:10px;background:#fff;margin:0 0 6px}
.qf-ui .sort-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}
.qf-ui .sort-handle{flex:none;width:30px;height:36px;min-height:36px;padding:0;margin:0;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--qf-ink-3);font-size:16px;letter-spacing:-3px;line-height:1;cursor:grab;touch-action:none}
.qf-ui .sort-handle:hover{color:#3f6c86;background:#f3f2ef}
.qf-ui .sorting,.qf-ui .sorting *{cursor:grabbing!important;user-select:none}
.qf-ui .sort-moves{display:inline-flex;gap:0;flex:none}
.qf-ui .sort-moves button{width:32px;height:32px;min-height:32px;padding:0;margin:0;border:0;background:none;box-shadow:none;color:#3f6c86;font-size:15px}
.qf-ui .sort-moves button:disabled{color:#d8d5ce}
.qf-ui .sort-row.dragging{opacity:.4}
.qf-ui li.sort-row.drop-before,.qf-ui div.sort-row.drop-before{box-shadow:0 -3px 0 #3f6c86}
.qf-ui li.sort-row.drop-after,.qf-ui div.sort-row.drop-after{box-shadow:0 3px 0 #3f6c86}
.qf-ui tr.sort-row.drop-before td{box-shadow:inset 0 3px 0 #3f6c86}
.qf-ui tr.sort-row.drop-after td{box-shadow:inset 0 -3px 0 #3f6c86}
.qf-ui td.sort-cell{width:34px;padding-left:4px;padding-right:0}
@media(max-width:700px){.qf-ui .sort-moves button{width:40px;height:40px;min-height:40px}.qf-ui .settings-kinds tbody td.sort-cell{grid-column:1/-1}}