/* Procurement Hub styles. Layout started from the HTML prototype; colors follow one rule (Andre, 2026-10-20):
   ONE COLOR, ONE MEANING. Use these and nothing else; no inline hex colors in templates.
     blue   (.b-blue,  var(--blue))   links, the main button, Open status, Primary contact
     green  (.b-green, .text-good)    a good outcome: Awarded, Won, Lowest, Bid received, Qualified, Active, Full qty
     amber  (.b-amber, .panel-attn)   needs attention: Awaiting response, No bids yet, New vendor, Not in BC yet,
                                      Not in master, Override, active (negotiated) pricing, warnings
     red    (.b-red, .b-rush, .text-danger, .req-mark)  urgent or a problem: RUSH, required fields, no email, Short, errors
     purple (.b-purple)               Quotes only (status and expiry)
     gray   (.b-gray, .chip-neutral)  plain facts: RFQ reason, product group, pricing type, source, SO number,
                                      International, Added manually, Cloned, requestors, Cancelled, Inactive
   Money and prices are normal text (totals bold). Price changes: .price-up red, .price-down green; activity
   counts: .count-up green, .count-down red. Badges are all one size (11px). */
*{box-sizing:border-box;margin:0;padding:0}
:root{--focus:#378ADD;--bg:#f5f4f0;--card:#fff;--line:#e5e3dc;--line2:#d0cec7;--text:#2c2c2a;--muted:#666;--blue:#185FA5;--blue-d:#0C447C;--green:#1D9E75;--amber:#EF9F27;--red:#E24B4A;--purple:#534AB7}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;color:var(--text);background:var(--bg);min-height:100vh}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.topbar{background:var(--card);border-bottom:0.5px solid var(--line);padding:0 16px;display:flex;align-items:center;height:48px;position:sticky;top:0;z-index:50}
.brand{font-size:15px;font-weight:600;margin-right:20px;white-space:nowrap;color:var(--text)}
.nav-tab{padding:0 11px;height:48px;display:flex;align-items:center;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap}
.nav-tab.active{color:#111;border-bottom-color:#111}.nav-tab:hover{color:#111;text-decoration:none}
.nav-tab.disabled{color:#b4b2a9;cursor:default}
.user-pill{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.uav{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.content{padding:20px;max-width:1100px;margin:0 auto}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.pt{font-size:18px;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border:0.5px solid var(--line2);border-radius:6px;background:var(--card);color:#111;font-size:13px;cursor:pointer;font-family:inherit;line-height:1.3;text-decoration:none}
.btn:hover{background:var(--bg);text-decoration:none}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-d)}
.btn-sm{padding:4px 9px;font-size:12px}
.btn-danger{background:#FCEBEB;border-color:var(--red);color:#791F1F}
.btn-link{background:none;border:none;color:var(--blue);cursor:pointer;padding:0;font-size:inherit;font-family:inherit}
.card{background:var(--card);border:0.5px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:12px}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:0.5px solid var(--line);gap:8px;flex-wrap:wrap}
.ct{font-size:14px;font-weight:600}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--bg);border-radius:8px;padding:14px 16px;cursor:pointer;display:block;color:inherit}
.stat:hover{opacity:.85;text-decoration:none}
.sl{font-size:12px;color:var(--muted);margin-bottom:4px}.sv{font-size:22px;font-weight:600}
input,select,textarea{width:100%;padding:7px 10px;border:0.5px solid var(--line2);border-radius:6px;background:var(--card);color:#111;font-size:13px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:#378ADD}
input[type=checkbox],input[type=radio]{width:auto}
input.invalid,select.invalid,textarea.invalid{border:2px solid #E24B4A}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px;margin-top:10px}
label.inline{display:flex;align-items:center;gap:8px;margin-top:0;font-size:13px;color:var(--text)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap}
.b-blue{background:#E6F1FB;color:#0C447C}.b-green{background:#EAF3DE;color:#27500A}.b-amber{background:#FAEEDA;color:#633806}
.b-gray{background:#F1EFE8;color:#444441}.b-red{background:#FCEBEB;color:#791F1F}
.b-purple{background:#EEEDFE;color:#3C3489}
.b-rush{background:#FCEBEB;color:#791F1F;border:1px solid #E24B4A;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px 12px;font-size:11px;font-weight:600;color:var(--muted);border-bottom:0.5px solid var(--line);text-transform:uppercase;letter-spacing:.04em}
td{padding:9px 12px;border-bottom:0.5px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--bg)}
.tab2{display:flex;gap:2px;background:var(--bg);padding:3px;border-radius:8px;width:fit-content}
.t2i{padding:5px 14px;border-radius:6px;font-size:13px;cursor:pointer;color:var(--muted)}
.t2i.active{background:var(--card);color:#111;font-weight:600}.t2i:hover{text-decoration:none}
.search-wrap{position:relative}.search-wrap input{padding-left:34px}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:14px;color:#999;pointer-events:none}
.req-card{background:var(--card);border:0.5px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px}
.req-card:hover{border-color:var(--line2)}
.req-card.open-card{border-left:3px solid var(--blue)}
.req-card.rush-card{border-left:4px solid var(--red);background:#fff9f9}
.req-card.awarded-card{border-left:3px solid var(--green)}
.req-card.quote-card{border-left:3px solid var(--purple)}
.req-card.cancelled-card{border-left:3px solid #B4B2A9}
.new-req-btn{width:100%;padding:14px;border:1.5px dashed var(--line2);border-radius:10px;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.new-req-btn:hover{background:var(--bg);border-color:#378ADD;color:var(--blue);text-decoration:none}
.clone-banner{background:#F1EFE8;border:0.5px solid var(--line2);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;display:flex;align-items:center;gap:10px}
.notice{background:#FAEEDA;border:0.5px solid var(--amber);border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.notice-info{background:#E6F1FB;border:0.5px solid #85B7EB;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.notice-warn{background:#FAEEDA;color:#633806;border:0.5px solid #E5B567;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.notice-ok{background:#EAF3DE;border:0.5px solid var(--green);border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px;color:#27500A}
.error-box{background:#FCEBEB;border:1px solid var(--red);border-radius:8px;padding:10px 14px;font-size:13px;margin:12px 0;color:#791F1F}
.bc-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--bg);padding:2px 6px;border-radius:4px;color:var(--muted);border:0.5px solid var(--line);white-space:nowrap}
.line-num{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.last-price-tag{font-weight:600;display:inline-block}
.conv-note{font-size:11px;color:#444441;background:#F1EFE8;border-radius:4px;padding:1px 6px;display:inline-flex;align-items:center;gap:3px}
.chip-index{font-size:11px;color:#444441;background:#F1EFE8;border-radius:4px;padding:2px 7px;display:inline-block;margin-top:3px}
.chip-active{font-size:11px;color:#633806;background:#FAEEDA;border-radius:4px;padding:2px 7px;display:inline-block;margin-top:3px}
.bid-vendor-card{border:0.5px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
.bid-vendor-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg);border-bottom:0.5px solid var(--line)}
.bid-vendor-header.awarded-hdr{background:#EAF3DE;border-color:var(--green)}
.bid-grid-head{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr 1fr;gap:8px;padding:6px 16px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;border-bottom:0.5px solid var(--line)}
.bid-line-row{padding:10px 16px;border-bottom:0.5px solid var(--line);display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr 1fr;gap:8px;align-items:start}
.bid-line-row:last-child{border-bottom:none}
.bid-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg);border-top:0.5px solid var(--line);font-size:13px;gap:8px;flex-wrap:wrap}
.modal-line-item{background:var(--bg);border-radius:8px;padding:12px;margin-bottom:8px;border:0.5px solid var(--line)}
.modal-bid-line{background:var(--bg);border-radius:8px;padding:10px 12px;margin-bottom:6px;border-left:3px solid var(--line2)}

.item-search-wrap{position:relative}
.item-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--card);border:0.5px solid var(--line2);border-top:none;border-radius:0 0 8px 8px;z-index:100;max-height:240px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.item-dropdown-row{padding:10px 12px;cursor:pointer;border-bottom:0.5px solid var(--line);display:flex;align-items:center;gap:10px}
.item-dropdown-row:last-child{border-bottom:none}
.item-dropdown-row:hover,.item-dropdown-row.kbd-active{background:var(--bg)}
.item-selected-pill{display:flex;align-items:center;gap:8px;background:#E6F1FB;border:0.5px solid #85B7EB;border-radius:6px;padding:6px 10px;font-size:13px;flex:1}
.item-selected-pill .clr{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;padding:0;margin-left:auto}
.avatar{width:32px;height:32px;border-radius:50%;background:#E6F1FB;color:#0C447C;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.avatar.sm{width:18px;height:18px;font-size:8px}
.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.bold{font-weight:600}.mono{font-family:ui-monospace,Menlo,monospace}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Buttons at the end of a table row: a flex <td> stops being a table cell and its border breaks off from the row's */
td.row{display:table-cell;text-align:right;white-space:nowrap}
td.row>*{display:inline-block;vertical-align:middle;margin:0}
td.row>*+*{margin-left:6px}
.right{margin-left:auto}
.nowrap{white-space:nowrap}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;z-index:500;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.sol-vendor{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:0.5px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--card)}
.sol-vendor.solicited{border-color:var(--green);background:#F6FAF0}
.sol-results{border:0.5px solid var(--line);border-top:none;border-radius:0 0 8px 8px;background:var(--card);max-height:220px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.sol-result{padding:10px 14px;cursor:pointer;border-bottom:0.5px solid var(--line);display:flex;align-items:center;gap:10px}
.sol-result:hover{background:var(--bg)}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:10px 12px;background:var(--bg);border-radius:8px;align-items:center}
.filterbar select,.filterbar input{width:auto;font-size:12px;padding:4px 8px}
.login-wrap{max-width:420px;margin:80px auto}
.user-card{display:flex;align-items:center;gap:12px;padding:14px;border:0.5px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:8px;width:100%;cursor:pointer;text-align:left;font-family:inherit}
.user-card:hover{border-color:#378ADD;background:#f9fbff}
/* margin:auto puts modal dialogs back in the centre (the * reset above zeroes the browser default) */
dialog{border:0.5px solid var(--line);border-radius:10px;padding:22px;width:calc(100% - 32px);max-width:520px;margin:auto}
dialog::backdrop{background:rgba(0,0,0,.4)}
.pb-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:8px;align-items:end;margin-top:6px}
.pill-list{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:0.5px solid var(--line);border-radius:20px;padding:3px 10px;font-size:12px}
.pill button{background:none;border:none;cursor:pointer;color:#999;line-height:1;padding:0;font-size:14px}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;font-size:13px;color:var(--muted)}
@media (max-width:820px){.g3,.g4,.fr3{grid-template-columns:1fr 1fr}.g2,.fr{grid-template-columns:1fr}.bid-grid-head,.bid-line-row{grid-template-columns:2fr 1fr 1fr}}

[hidden]{display:none!important}

/* ---- Dashboard (spec 4.1, 4.9) ---- */
.bar-row{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(90px,auto);gap:10px;align-items:center;padding:6px 0}
/* the code tag is an inline box with padding: give it real height so it can't overlap the bar below */
.bar-row .bc-tag{display:inline-block;line-height:1.3}
.bar-row .bar-track{margin-top:6px}
.bar-row .rank{font-size:11px;color:var(--muted);text-align:right}
.bar-track{background:var(--bg);border-radius:4px;height:7px;overflow:hidden}
.bar-fill{height:100%;background:var(--blue);border-radius:4px}
.bar-fill.green{background:var(--green)}
.bar-val{font-size:12px;text-align:right;white-space:nowrap}
.price-up{color:#A32D2D}.price-down{color:#27500A}.count-up{color:#27500A}.count-down{color:#A32D2D}
.trend-arrow{font-size:11px}
.chart-wrap{padding:8px 0}
.chart-wrap svg{width:100%;height:120px;display:block}
.chart-pt{fill:var(--blue)}
.chart-line{fill:none;stroke:var(--blue);stroke-width:2}
.inflation-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:0.5px solid var(--line);font-size:13px}
.inflation-row:last-child{border-bottom:none}
.changes{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}
.changes th{font-size:11.5px;font-weight:600;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:0.5px solid var(--line)}
.changes td{padding:7px 6px;border-bottom:0.5px solid var(--line);vertical-align:top}
.changes tr:last-child td{border-bottom:none}
.changes .num{text-align:right;white-space:nowrap}
.changes .item-cell{overflow-wrap:anywhere;line-height:1.35}
.changes .item-cell .bc-tag{display:inline-block;margin-top:3px}
.mkpi-note{font-size:11px;color:var(--muted);margin-top:2px}
.mobile-kpi{background:var(--card);border:0.5px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px}
.mobile-nav-hint{font-size:11px;color:var(--muted);text-align:center;padding:10px 0}
@media (max-width:820px){.bar-row{grid-template-columns:16px minmax(0,1fr) minmax(70px,auto)}}
/* panels whose values carry two figures ("$33,450 · 100% win"): room for both, so bars still line up */
.bars-wide .bar-row{grid-template-columns:20px minmax(0,1fr) minmax(140px,auto)}
/* tables inside half-width cards: tighter columns, and scroll sideways rather than spill out of the card */
.table-fit{overflow-x:auto}
.table-fit th,.table-fit td{padding-left:6px;padding-right:6px}
.table-fit th.num{text-align:right}
.table-fit td.num{text-align:right;white-space:nowrap}

tr[data-href]{cursor:pointer}

@media (max-width:1100px){.nav-tab{padding:0 7px;font-size:12.5px}.user-pill>span:first-child{display:none}}

/* Sortable column headers (vendors list, Andre 2026-10-20) */
th.sortable a{color:inherit;text-decoration:none;cursor:pointer;display:inline-block}
th.sortable a:hover{color:var(--text,#111)}
th.sortable .sort-arrow{font-size:9px}
/* Keep card contents inside the card in narrow grid columns (Andre, 2026-10-20) */
.g2>*,.g3>*{min-width:0}
.g2 .card,.g3 .card{overflow-wrap:anywhere}   /* long emails and subjects wrap instead of spilling out */
th{overflow-wrap:normal}
.email-row{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;margin:0 -8px;border-bottom:0.5px solid var(--line);border-radius:6px;cursor:pointer}
.email-row:last-child{border-bottom:none}
.email-row:hover{background:var(--bg)}
.email-dir{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;margin-top:1px}
.email-dir.in{background:#E6F1FB;color:var(--blue-d)}.email-dir.out{background:#F1EFE8;color:#5F5E5A}
.email-row-main{flex:1;min-width:0}
.email-row-top{display:flex;align-items:baseline;gap:10px}
.email-row-subject{flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-row-date{flex:none;font-size:11px;color:var(--muted);white-space:nowrap}
.email-row-who{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.email-row-who .badge{font-size:10px;padding:1px 5px;margin-right:2px}
.email-row-preview{font-size:12px;color:#8a8984;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-empty{padding:10px 0}
.email-note{display:flex;gap:6px;align-items:flex-start;margin-top:12px;padding:8px 10px;background:var(--bg);border-radius:6px;font-size:11px;color:var(--muted);line-height:1.45}
.email-note svg{flex:none;margin-top:1px}
/* PO Lines: striped rows and the price-trend bars, as in the prototype (Andre, 2026-10-20) */
.po-table tbody tr:nth-child(even){background:var(--bg)}
.po-trend{display:flex;align-items:flex-end;gap:4px;height:110px;margin-bottom:6px;overflow-x:auto}
.po-trend-col{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:1px;height:100%}
.po-trend-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}
.po-trend-bar{width:100%;background:#93c5fd;border-radius:2px 2px 0 0}
.po-trend-bar.conv{background:#B4B2A9}
.po-trend-bar.last{background:var(--blue)}

/* Shared text and panel styles (see the color rules at the top) */
.req-mark{color:var(--red)}
.text-danger{color:#A32D2D}
.text-good{color:#27500A}
.chip-neutral{background:#F1EFE8;color:#444441;border-radius:4px;padding:3px 7px}
.panel-attn{background:#FAEEDA;border-radius:6px;padding:8px 10px}
.num,td.num{font-variant-numeric:tabular-nums}
th.num,td.num{text-align:right}   /* every table: number columns line up on the right */
/* Manager dashboard: agent table with two period groups (Andre, 2026-10-20) */
.agent-table th.grp{text-align:center;border-left:0.5px solid var(--line);color:var(--text)}
.agent-table .grp-start{border-left:0.5px solid var(--line)}
.agent-table thead tr:first-child th{border-bottom:none;padding-bottom:2px}
/* View as: a manager seeing the app as a purchaser (amber = needs attention; Andre, 2026-10-21) */
.view-as-bar{background:#FAEEDA;color:#633806;border-bottom:0.5px solid #E5B567;padding:8px 20px;font-size:13px;display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
/* One email (emails/detail.html) */
.email{max-width:860px;padding:22px 28px}
.email-subject{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:16px;overflow-wrap:anywhere}
.email-head{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:0.5px solid var(--line)}
.email-head .avatar{width:36px;height:36px;font-size:12px}
.email-who{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.5}
.email-when{text-align:right;white-space:nowrap}
.email-attach{display:flex;align-items:center;gap:6px;margin-top:12px;padding:8px 12px;background:var(--bg);border:0.5px solid var(--line);border-radius:8px;color:var(--muted)}
.email-body{font-size:14px;line-height:1.6;padding:18px 0 6px;max-width:680px;overflow-wrap:anywhere}
.email-body p{margin:0 0 12px}
.email-quoted{margin-top:8px;color:var(--muted)}
.email-quoted summary{cursor:pointer;font-size:12px;color:var(--blue);margin-bottom:10px;list-style:none}
.email-quoted summary::-webkit-details-marker{display:none}
.email-quoted[open]{border-left:2px solid var(--line2);padding-left:12px}
.email-foot{margin-top:10px;padding-top:12px;border-top:0.5px solid var(--line)}

/* Test site cue (Andre, 2026-11-06): only where PH_ENVIRONMENT=test. */
.env-test-bar{background:#EF9F27;color:#3D2200;padding:6px 16px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.env-test-bar b{font-size:20px;letter-spacing:.14em}
.env-test-badge{background:#EF9F27;color:#3D2200;font-weight:800;font-size:13px;letter-spacing:.12em;padding:2px 8px;border-radius:6px;margin:0 12px 0 -4px}

/* Sync results (Settings › SharePoint, Outlook email): one heading per kind of change, one bullet per index (Andre, 11/6) */
.sync-msg .mt4{margin-top:4px}
.sync-msg .sync-h{font-weight:600;font-size:13px;margin-top:10px}
.sync-msg .sync-list{margin:4px 0 0 18px;padding:0;font-size:12.5px;line-height:1.6;columns:2 340px;column-gap:28px}
.sync-msg .sync-list li{break-inside:avoid}