/* 2026-10-17 我的项目(样子照 App member/projects.vue / project.vue) */
.pj-page { max-width: 720px; margin: 0 auto; padding: 20px 16px 48px; }
.pj-h1 { margin: 0 0 14px; font-size: 24px; font-weight: 800; color: #111; }
.pj-loading, .pj-empty { padding: 48px 0; text-align: center; color: #999; font-size: 17px; }
.pj-empty a { display: inline-block; margin-top: 16px; min-height: 44px; line-height: 44px; padding: 0 26px; border-radius: 22px; background: #FF6E30; color: #fff; font-weight: 800; text-decoration: none; }
.pj-card { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.05); color: inherit; text-decoration: none; }
.pj-cover { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 10px; object-fit: cover; background: #f2f2f2; display: flex; align-items: center; justify-content: center; color: #b5b5b5; }
.pj-cover svg { width: 34px; height: 34px; }
.pj-body { flex: 1; min-width: 0; }
.pj-t { font-size: 17px; font-weight: 800; color: #222; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pj-meta { margin-top: 4px; font-size: 14px; color: #888; }
.pj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.pj-state { font-size: 13px; color: #999; background: #f2f2f2; border-radius: 5px; padding: 1px 8px; }
.pj-state.on { color: #FF6E30; background: #FFF1EA; }
.pj-sum { font-size: 14px; color: #444; }
.pj-head { margin-bottom: 14px; padding: 16px; background: #fff; border-radius: 14px; }
.pj-head .pj-t { font-size: 20px; -webkit-line-clamp: unset; display: block; }
.pj-item { margin-bottom: 12px; padding: 14px 16px; background: #fff; border-radius: 14px; }
.pj-it-top { display: flex; align-items: center; gap: 10px; }
.pj-logo { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; object-fit: cover; background: #f2f2f2; }
.pj-it-main { flex: 1; min-width: 0; }
.pj-it-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pj-kind { flex: 0 0 auto; font-size: 13px; color: #FF6E30; border: 1px solid #FFC9AE; border-radius: 5px; padding: 0 6px; }
.pj-store { font-size: 16px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.pj-time { margin-top: 2px; font-size: 13px; color: #999; }
.pj-dots { position: relative; }
.pj-dots > button { width: 40px; height: 40px; border: 0; background: none; font-size: 20px; color: #999; cursor: pointer; }
.pj-menu { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 150px; background: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.16); overflow: hidden; }
.pj-menu[hidden] { display: none; }
.pj-menu button { display: block; width: 100%; min-height: 46px; padding: 0 16px; border: 0; background: #fff; font-size: 16px; color: #333; text-align: left; cursor: pointer; white-space: nowrap; }
.pj-text { margin-top: 10px; font-size: 16px; line-height: 1.5; color: #333; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-quote { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #FFF6F0; color: inherit; text-decoration: none; }
.pj-quote b { font-size: 18px; color: #222; }
.pj-quote span { font-size: 15px; font-weight: 700; color: #D9661C; }
.pj-btns { display: flex; gap: 10px; margin-top: 12px; }
.pj-btns a, .pj-btns button { flex: 1 1 0; font-family: inherit; background: #fff; cursor: pointer; padding: 0 6px; white-space: nowrap; min-height: 42px; line-height: 42px; border: 1.5px solid #ddd; border-radius: 21px; text-align: center; font-size: 15px; font-weight: 700; color: #333; text-decoration: none; }

/* 10-19 需求那条的「删除」用灰色(同 App pd_btn_del);按钮多了换行 */
.pj-btns { flex-wrap: wrap; }
.pj-btns .pj-btn-del { color: #999; border-color: #ddd; }
.pj-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.pj-modal-box { width: 100%; max-width: 360px; padding: 22px 18px 16px; border-radius: 14px; background: #fff; }
.pj-modal-box p { margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: #222; }
.pj-modal-btns { display: flex; gap: 10px; }
.pj-modal-btns button { flex: 1 1 0; min-height: 44px; border: 1.5px solid #ddd; border-radius: 22px; background: #fff; font: inherit; font-size: 16px; font-weight: 700; color: #333; cursor: pointer; }
.pj-modal-btns .pj-modal-ok { border-color: #FF6E30; background: #FF6E30; color: #fff; }

/* ===== 10-25 项目预算(projects.js loadBudget;按钮用 common.css 的 .bb-btn-*) ===== */
#pjBg:empty { display: none; }
#pjBg { margin-bottom: 18px; }
.bg-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 14px; background: #f0f0f2; }
@media (min-width: 600px) { .bg-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 没填预算(没有「还剩」)只有三格:手机上「预算」占一整行,下面两格并排,不留空格子;电脑上三格一排 */
@media (max-width: 599px) { .bg-sum.is-3 .bg-cell-b { grid-column: 1 / -1; } }
@media (min-width: 600px) { .bg-sum.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bg-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: #fff; text-align: left; }
.bg-cell span { font-size: 13px; color: #888; }
.bg-cell b { font-size: 18px; font-weight: 700; color: #222; overflow-wrap: anywhere; }
.bg-cell-b { border: 0; font: inherit; cursor: pointer; }
.bg-cell-b:hover { background: #fafafb; }
.bg-cell-b b::after { content: ' ›'; color: #c8ccd2; font-weight: 400; }
.bg-cell b.bg-set { font-size: 15px; font-weight: 600; color: #FF6E30; }
.bg-h2 { margin: 18px 0 10px; font-size: 17px; font-weight: 800; color: #222; }
.bg-none { margin: 0; padding: 14px 16px; border-radius: 12px; background: #fff; font-size: 15px; color: #999; }

.bg-store { margin-bottom: 10px; padding: 12px 14px; background: #fff; border-radius: 14px; }
.bg-st-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bg-st-logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; background: #f2f2f2; }
.bg-st-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; color: #222; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-tg { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.bg-caret { display: inline-block; font-size: 16px; line-height: 1; transform: rotate(90deg); transition: transform .15s; }
.bg-caret.on { transform: rotate(-90deg); }
.bg-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 14px; color: #888; }
.bg-nums b { font-size: 15px; color: #222; }
.bg-det { margin-top: 10px; padding-top: 4px; border-top: 1px solid #f2f2f2; }
.bg-doc { display: block; padding: 10px 0; border-bottom: 1px solid #f5f5f5; color: inherit; text-decoration: none; }
.bg-doc-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: #888; }
.bg-doc-k { color: #FF6E30; border: 1px solid #FFC9AE; border-radius: 5px; padding: 0 6px; line-height: 20px; }
.bg-tag { line-height: 20px; padding: 0 7px; border-radius: 5px; background: #f2f3f5; color: #888; }
.bg-tag.on { background: #E9F8EF; color: #1F9D55; }
.bg-doc-r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; font-size: 15px; color: #333; }
.bg-doc-r span { min-width: 0; overflow-wrap: anywhere; }
.bg-doc-r b { flex: 0 0 auto; font-size: 16px; color: #222; }
.bg-pay { padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.bg-pay:last-child { border-bottom: 0; padding-bottom: 2px; }
.bg-pay-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; color: #444; }
.bg-pay-l b { flex: 0 0 auto; font-size: 16px; color: #222; }
.bg-pay-m { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 3px; font-size: 13px; color: #999; }
.bg-pay-m span { min-width: 0; overflow-wrap: anywhere; }
.bg-pay-m a { position: relative; flex: 0 0 auto; font-size: 14px; font-weight: 600; color: #FF6E30; text-decoration: none; }
.bg-pay-m a::after { content: ''; position: absolute; inset: -8px -6px; }

.bg-mine-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.bg-mine-h .bg-h2 { margin: 0; }
.bg-exp { margin-bottom: 10px; padding: 12px 14px 6px; background: #fff; border-radius: 14px; }
.bg-exp-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bg-exp-t { min-width: 0; font-size: 16px; font-weight: 600; color: #222; overflow-wrap: anywhere; }
.bg-exp-l b { flex: 0 0 auto; font-size: 16px; color: #222; }
.bg-exp-m { margin-top: 4px; font-size: 14px; color: #888; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bg-exp-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bg-exp-imgs img { display: block; width: 60px; height: 60px; border-radius: 8px; object-fit: cover; background: #f2f2f2; }
.bg-exp-acts { display: flex; justify-content: flex-end; gap: 16px; margin-top: 4px; }

/* 弹层:手机在底部,电脑居中(同 clients.css .cl-pick) */
.bg-sheet { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
@media (min-width: 600px) { .bg-sheet { align-items: center; } }
.bg-sheet-box { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 18px 16px 14px; background: #fff; border-radius: 16px; }
.bg-sheet-t { margin-bottom: 12px; font-size: 18px; font-weight: 800; color: #222; text-align: center; }
.bg-lab { display: block; margin: 10px 0 6px; font-size: 14px; font-weight: 600; color: #444; }
.bg-in { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid #dcdfe6; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: #222; -webkit-appearance: none; }
.bg-in:focus { outline: none; border-color: #FF6E30; }
.bg-ta { min-height: 64px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.bg-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bg-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-pic { position: relative; width: 64px; height: 64px; }
.bg-pic img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #f2f2f2; }
.bg-pic.is-up img { opacity: .45; }
.bg-pic button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 22px; cursor: pointer; }
.bg-pic button::after { content: ''; position: absolute; inset: -6px; }
.bg-pic-add { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; box-sizing: border-box; border: 1px dashed #c0c4cc; border-radius: 8px; font-size: 26px; color: #909399; cursor: pointer; }
.bg-pic-add[hidden] { display: none; }
.bg-sheet-btns { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.bg-sheet-btns > span { flex: 1 1 auto; }
.bg-sheet-btns .bb-btn-primary { min-width: 96px; padding: 0 18px; }

/* 10-26 Vivian 电脑 Chrome:最上面一行被固定的头部 + 导航条盖住(手机上头部是藏着的,原来只测了手机)。电脑上让开头部 64 + 导航 80,和「我的」页同一口径 */
@media (min-width: 769px) { .pj-page { padding-top: 168px; } }