:root {
  --ink: #424b52;
  --muted: #8a969e;
  --line: #e8e8e8;
  --bg: #f2f2f2;
  --green: #20a53a;
  --green2: #168a2e;
  --amber: #f0ad4e;
  --red: #ef5b5b;
  --sidebar: #3b4650;
}

body { color: var(--ink); font-size: 13px; }
.app { grid-template-columns: 252px 1fr; }
.sidebar { width: 252px; background: #3b4650; color: #d8dde1; }
.logo { height: 60px; padding: 10px 20px; gap: 12px; background: #303a43; border-bottom: 0; font-size: 15px; }
.logo > span { width: 40px; height: 34px; background: transparent; color: #e8edef; border: 1px solid #7f8a92; font-size: 12px; }
.logo small { color: #89959d; font-size: 11px; line-height: 14px; }
.sidebar nav { padding: 0; }
.nav-label { padding: 18px 24px 7px; color: #7f8b93; font-size: 11px; }
.nav-item { height: 46px; margin: 0; padding: 0 24px; gap: 14px; border-left: 3px solid transparent; border-radius: 0; color: #bdc5ca; font-size: 15px; }
.nav-item:hover { background: #343f48; color: #fff; }
.nav-item.active { padding-left: 24px; background: #303a43; color: #fff; border-left-color: #20a53a; }
.nav-icon { width: 20px; color: #9faab1; font-size: 16px; }
.nav-item.active .nav-icon { color: #fff; }
.sidebar-foot { padding: 12px 18px; background: #35404a; border-top: 1px solid #46515a; font-size: 14px; }
.sidebar-foot small { color: #89959d; font-size: 11px; }

.app header { height: 54px; padding: 0 18px; border-bottom-color: #e5e5e5; box-shadow: none; }
.app header h1 { color: #555; font-size: 15px; font-weight: 500; }
.app header p { display: inline; margin-left: 10px; color: #a1a8ad; }
.app header > div:first-of-type { display: flex; align-items: center; }
.header-actions { gap: 12px; font-size: 12px; }
#content { padding: 12px; }

.stats { gap: 12px; margin-bottom: 12px; }
.stat, .stat:nth-child(3) { min-height: 92px; padding: 16px 18px; border: 1px solid #e7e7e7; }
.stat b { margin-top: 9px; color: #20a53a; font-size: 23px; font-weight: 400; }
.stat span { color: #8a949b; }
.dashboard-grid { gap: 12px; }
.panel { margin-bottom: 12px; border-color: #e7e7e7; }
.panel-head { min-height: 42px; padding: 11px 15px; }
.panel-head h2 { font-size: 13px; font-weight: 500; }
.panel-body { padding: 10px 15px; }
.reminder { padding: 10px 0; }
.progress { height: 6px; background: #edf0f1; }
.progress i { background: #20a53a; }

.toolbar { height: 38px; margin-bottom: 10px; align-items: center; }
.search { max-width: 320px; height: 34px; }
.table-wrap { border-color: #e5e5e5; }
th, td { padding: 10px 12px; }
th { background: #f6f7f7; color: #68737a; font-weight: 400; }
.badge { padding: 2px 7px; border-radius: 2px; background: #eaf7ed; color: #20a53a; }
button, input, select, textarea, .modal-box { border-radius: 2px; }
.primary { background: #20a53a; }
.primary:hover { background: #168a2e; }
input, select, textarea { border-color: #d9dfe2; }
input:focus, select:focus, textarea:focus { border-color: #20a53a; box-shadow: 0 0 0 2px #20a53a12; }
.modal-head { padding: 13px 18px; }
.toast { border-left: 3px solid #20a53a; background: #3b4650 !important; }
.settings-panel { max-width: 900px; }
.settings-actions { padding: 14px 20px; border-top: 1px solid var(--line); text-align: right; }
input[type="color"] { height: 39px; padding: 4px; cursor: pointer; }
.logo > span.has-image, .brand-mark.has-image { background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: contain; }
.lead-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 10px; }
.lead-tabs { display: flex; height: 36px; border-bottom: 1px solid #ddd; }
.lead-tabs button { padding: 7px 18px; border-radius: 0; background: transparent; color: #667178; }
.lead-tabs button.active { color: var(--green); border-bottom: 2px solid var(--green); }
.lead-actions { display: flex; gap: 8px; }
.lead-legend { display: flex; gap: 20px; margin-bottom: 10px; padding: 9px 12px; background: #fff; border: 1px solid #e7e7e7; color: #8a949b; }
.lead-legend .dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.dot.fresh { background: #f0ad4e; }
.dot.contacted { background: #20a53a; }
.lead-row.is-fresh { background: #fffaf2; }
.lead-row.is-contacted { background: #f7fcf8; }
.contact-state { display: inline-block; min-width: 50px; padding: 2px 6px; text-align: center; border-radius: 2px; }
.contact-state.no { color: #bd7612; background: #fff0d8; }
.contact-state.yes { color: #168a2e; background: #e4f5e8; }
.owner-badge { display: inline-block; padding: 3px 8px; border-radius: 2px; white-space: nowrap; }
.owner-badge.pool { color: #168a2e; background: #e4f5e8; border: 1px solid #bfe5c8; }
.owner-badge.assigned { color: #2777a8; background: #e8f3fa; border: 1px solid #c5dfef; }
.form-help { margin: 0; color: #8a949b; font-size: 12px; }
.lead-check, #leadAll { width: 14px; height: 14px; }
.cell-sub { display: block; color: #9aa3a8; font-size: 11px; }
.lead-summary { display: flex; justify-content: space-between; padding: 12px; background: #f6f7f7; }
.lead-summary span { color: #7f8b92; }
.timeline { position: relative; padding: 4px 8px 4px 24px; }
.timeline-item { position: relative; padding: 0 0 18px 20px; border-left: 1px solid #dfe5e2; }
.timeline-item > i { position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.timeline-item b { margin-right: 12px; color: #445058; }
.timeline-item span { color: #99a2a7; font-size: 11px; }
.timeline-item p { margin: 4px 0 0; color: #6e797f; }
.company-detail-head { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: #f6f7f7; }
.company-detail-head h3 { margin: 0 0 8px; font-size: 18px; }
.mini-stats { display: flex; gap: 24px; }
.mini-stats span { color: #7e898f; }
.mini-stats b { display: block; color: var(--green); font-size: 20px; text-align: center; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.detail-section { padding-top: 10px; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 8px; font-size: 14px; }
.profile-panel { max-width: 1050px; }
.upload-line { display: grid; grid-template-columns: 160px 1fr 1.3fr auto; gap: 10px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.enter-btn { margin: 0 4px; padding: 5px 10px; background: var(--green); color: #fff; }
.view-mode { display: flex; align-items: center; gap: 9px; padding: 4px 5px 4px 10px; color: #8a5b09; background: #fff4d8; border: 1px solid #ecd28e; }
.view-mode button { padding: 4px 9px; background: #3b4650; color: #fff; }
.readonly-view .lead-actions, .readonly-view #addBtn, .readonly-view td.actions .link { display: none !important; }
.readonly-view .lead-row td:last-child .link:not(:first-child) { display: none; }
.expiry { display: inline-block; min-width: 108px; padding: 5px 8px; border-left: 3px solid; font-weight: 600; }
.expiry small { display: block; margin-top: 2px; color: #7c878d; font-size: 11px; font-weight: 400; }
.expiry.normal, .software-state.normal { color: #168a2e; background: #e8f6eb; border-color: #20a53a; }
.expiry.warning, .software-state.warning { color: #a96a08; background: #fff4d9; border-color: #e9a52c; }
.expiry.urgent { color: #c35b15; background: #ffebdf; border-color: #ed7b2f; }
.expiry.expired, .software-state.expired { color: #c43e3e; background: #fdeaea; border-color: #e75757; }
.expiry.neutral, .software-state.neutral { color: #748087; background: #eef1f2; border-color: #aab3b8; }
.software-state { display: inline-block; min-width: 68px; padding: 4px 8px; text-align: center; border-radius: 2px; }
.catalog-actions { margin-bottom: 12px; text-align: right; }
.country-projects .panel-head small { margin-left: 6px; color: #97a0a5; font-weight: 400; }
.country-projects .panel-head > span { color: #8c969c; }
.country-projects { border:1px solid #cfdcdf;box-shadow:0 1px 2px #0000000a; }.country-projects .panel-head { background:#edf7f0;border-left:3px solid #20a53a;border-bottom:1px solid #c9ddcf;padding:12px 16px; }.country-projects .panel-head h2 { color:#176d2c;font-size:17px; }.country-projects .panel-head h2 small { display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid #acd2b6;background:#fff;color:#4f7b5a; }.country-projects tbody tr:hover { background:#f5fbf7; }
.empty-state { padding: 70px; text-align: center; background: #fff; border: 1px solid var(--line); color: #829097; }
.muted { color: #9aa3a8; }
.platform-stats .stat { min-height: 104px; }
.platform-stats .stat small { display: block; margin-top: 4px; color: #9aa3a8; }
.wechat-state { display: inline-block; padding: 2px 7px; border-radius: 2px; }
.wechat-state.yes { color: #168a2e; background: #e4f5e8; }
.wechat-state.no { color: #9a6a20; background: #fff3dd; }
.contact-list { border: 1px solid var(--line); }
.contact-item { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: 0; }
.contact-type { display: inline-block; min-width: 66px; margin-right: 10px; padding: 3px 7px; color: #2777a8; background: #e8f3fa; text-align: center; }
.contact-item small { display: block; margin: 3px 0 0 78px; color: #929ca2; }
.contact-add { padding-top: 12px; }
.contact-add h3 { margin: 0 0 10px; font-size: 14px; }
.contact-form { display: grid; grid-template-columns: 120px 1.2fr 1fr 150px; gap: 10px; align-items: center; }
.check-label { display: flex; align-items: center; color: #647078 !important; }
.check-label input { width: 15px; margin-right: 6px; }
.customer-follow-history { max-height: 310px; overflow: auto; padding-top: 8px; background: #fafbfb; }
.auth-tabs { display: flex; margin-bottom: 24px; border-bottom: 1px solid #e1e6e8; }
.auth-tabs button { flex: 1; padding: 10px; border-radius: 0; background: transparent; color: #7a868d; }
.auth-tabs button.active { color: var(--green); border-bottom: 2px solid var(--green); }
.login-form .success { color: #168a2e; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chart-body { height: 270px; padding: 12px; }
.chart-body canvas { width: 100%; height: 100%; }
.log-filters { display: grid; grid-template-columns: 1.5fr 1fr 150px auto 150px auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.log-filters input { height: 35px; }
.log-filters span { color: #8c969c; text-align: center; }
.log-action { display: inline-block; padding: 2px 7px; color: #2777a8; background: #e8f3fa; border-radius: 2px; }
.profile-layout { display: grid; gap: 8px; }
.profile-section { padding: 0 14px 12px; background: #fff; border: 1px solid var(--line); }
.section-title { display: flex; justify-content: space-between; align-items: center; min-height: 38px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.section-title h2 { margin: 0; font-size: 15px; font-weight: 500; }
.profile-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 14px; flex: 1; }
.profile-fields label > span { display: block; margin-bottom: 5px; color: #78848b; font-size: 12px; }
.profile-fields .wide { grid-column: 1 / -1; }
.profile-with-photo { display: flex; gap: 28px; align-items: stretch; }
.identity-photo { width: 180px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f4f6f7; border: 1px dashed #cfd7db; color: #9aa3a8; }
.identity-photo img { width: 100%; height: 125px; object-fit: contain; background: #fff; }
.identity-photo span, .profile-photo span { margin-top: 6px; font-size: 12px; }
.profile-photo { width: 260px; margin-top: 14px; display: flex; flex-direction: column; color: #7d888e; }
.profile-photo img { width: 260px; height: 150px; object-fit: cover; border: 1px solid var(--line); }
.profile-save { padding: 2px 0 14px; text-align: right; }
.documents-section { margin-top: 8px; }
.customer-name-link { padding: 0; background: transparent; color: #168a2e; font-weight: 600; }
.customer-name-link:hover { text-decoration: underline; }
.customer-detail-title { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #f5f7f7; }
.customer-detail-title h3 { margin: 0 0 6px; font-size: 18px; }
.customer-detail-title h3 small { margin-left: 8px; color: #89949a; font-size: 13px; font-weight: 400; }
.customer-detail-grid { padding: 4px 8px; }
.customer-detail-follows { max-height: 280px; overflow: auto; }
.customer-detail-modal .modal-box { width: min(960px, 96vw); }
.customer-detail-modal .modal-actions { display: none; }
.customer-detail-head { display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#f5f7f7;border-left:3px solid #20a53a; }
.customer-detail-head h3 { margin:0;font-size:20px; }.customer-detail-head h3 small { margin-left:8px;color:#849096;font-size:13px;font-weight:400; }.customer-detail-head p { margin:5px 0 0;color:#7a858a; }
.customer-detail-count { display:grid;grid-template-columns:auto auto;gap:2px 9px;align-items:baseline;text-align:right; }.customer-detail-count b { color:#168a2e;font-size:19px; }.customer-detail-count span { color:#7a858a;font-size:12px; }
.customer-stat-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.customer-stat-grid>div { border:1px solid #dce3e6;border-top:3px solid #20a53a;background:#fff;padding:8px 12px; }
.customer-stat-grid>div:nth-child(2){border-top-color:#2d8cf0}.customer-stat-grid>div:nth-child(3){border-top-color:#e6a23c}.customer-stat-grid>div:nth-child(4){border-top-color:#909399}
.customer-stat-grid span,.customer-stat-grid small { display:block;color:#849096;font-size:12px; }.customer-stat-grid b { display:block;margin:2px 0;font-size:18px;color:#35414a; }
.customer-detail-section { border:1px solid #dce3e6;padding:10px 12px;background:#fff; }.customer-detail-section>h3,.detail-section-title h3 { margin:0 0 8px;font-size:14px; }
.customer-detail-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #e0e5e7;border-left:1px solid #e0e5e7; }.customer-detail-grid>div { min-height:52px;padding:7px 10px;border-right:1px solid #e0e5e7;border-bottom:1px solid #e0e5e7;background:#fff; }.customer-detail-grid>div span { display:block;color:#899399;font-size:12px;margin-bottom:2px; }.customer-detail-grid>div b { display:block;overflow-wrap:anywhere; }
.compact-source-row .customer-detail-grid>div { grid-column:span 4; }.project-business-grid { margin-top:8px; }.customer-project-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }.customer-project-list>div { position:relative;border:1px solid #e0e5e7;background:#f9fbfb;padding:7px 58px 7px 10px; }.customer-project-list span,.customer-project-list small { display:block;color:#849096;font-size:12px; }.customer-project-list .delete { position:absolute;right:7px;top:14px; }.compact-empty { grid-column:1/-1;padding:12px; }
.lead-row td,.table-wrap tbody td { border-right:1px solid #edf0f2; }.lead-row td:last-child,.table-wrap tbody td:last-child { border-right:0; }
.customer-notes { margin-top:15px;padding:10px 12px;background:#f7f9f9; }.customer-notes p { margin:5px 0 0;white-space:pre-wrap; }
.customer-total-notes p { margin:0;min-height:48px;padding:12px 14px;border:1px solid #e0e5e7;background:#f9fbfb;white-space:pre-wrap;line-height:1.7; }
.customer-contact-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }.customer-contact-summary>div { border:1px solid #dce3e6;background:#f9fbfb;padding:11px 13px; }.customer-contact-summary span,.customer-contact-summary small { display:block;color:#849096;font-size:12px; }
.detail-section-title { display:flex;justify-content:space-between;color:#778388; }.customer-detail-follows { max-height:330px;border-top:1px solid #e4e9eb; }.customer-detail-follows .timeline-item { border-bottom:1px solid #edf0f2;padding:13px 4px 13px 28px; }.customer-detail-follows .timeline-item:last-child { border-bottom:0; }.customer-detail-actions { display:flex;justify-content:flex-end;gap:10px;padding-top:4px; }
@media(max-width:760px){.customer-stat-grid{grid-template-columns:1fr 1fr}.customer-detail-grid{grid-template-columns:1fr 1fr}.customer-contact-summary{grid-template-columns:1fr}.customer-detail-head{align-items:flex-start}.customer-detail-count{margin-left:12px}}

/* Keep long-form confirmation controls visible. */
.modal-box { overflow:hidden;display:flex;flex-direction:column; }
.modal-head { flex:0 0 auto; }
.modal-box form { flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column; }
.modal-box .form-grid { flex:1 1 auto;min-height:0;overflow-y:auto; }
.modal-actions { flex:0 0 auto;background:#fff;box-shadow:0 -4px 12px #0000000a; }
.catalog-actions { display:none; }
.permission-table-wrap { overflow:auto; }
.permission-panel table th:not(:first-child),.permission-panel table td:not(:first-child) { text-align:center;min-width:92px; }
.permission-panel input[type="checkbox"] { width:16px;height:16px;accent-color:#20a53a; }
#addBtn { display:none!important; }
#pageAddBtn { flex:0 0 auto;margin-left:auto; }
.project-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:12px;padding:12px;background:#f7f8f8; }
.project-card { position:relative;border:1px solid #dfe5e7;background:#fff;padding:14px; }
.project-card-head { display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e8ecee;padding-bottom:10px; }
.project-card-head h3 { margin:0 0 3px;font-size:16px; }.project-card-head span { color:#7d898f; }
.project-intro { min-height:38px;color:#69767d; }
.project-fee-grid { display:grid;grid-template-columns:1fr 1fr;border:1px solid #dfe5e7; }
.project-fee-grid>div { display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-right:1px solid #dfe5e7;border-bottom:1px solid #dfe5e7; }
.project-fee-grid b small { color:#20a53a;font-weight:400; }.project-conditions { margin-top:10px;padding:8px 10px;background:#f7faf8; }
.project-conditions p { margin:3px 0; }.project-card-actions { margin-top:8px;text-align:right; }
.family-options { display:flex;align-items:center;gap:20px;border:1px solid #dfe5e7;padding:10px 12px; }.family-options label { display:flex;align-items:center;gap:5px; }.family-options input { width:16px; }
.fee-editor { border:1px solid #dfe5e7;padding:10px; }.fee-edit-row { display:grid;grid-template-columns:1.2fr .8fr 1fr 1.2fr auto;gap:8px;margin-top:8px;align-items:center; }
.log-filters select { min-width:230px; }
@media(max-width:760px){.project-cards{grid-template-columns:1fr}.fee-edit-row{grid-template-columns:1fr 1fr}.fee-edit-row .delete{grid-column:2}.project-fee-grid{grid-template-columns:1fr}}
.lead-name-cell { display:flex;align-items:center;gap:7px; }.lead-name-cell input,#leadAll { width:14px;height:14px;accent-color:#20a53a; }
.customer-unified-section { padding:10px 0;border-bottom:1px solid #e6eaec; }.customer-unified-section:last-of-type{border-bottom:0}
.customer-stat-line { display:flex;gap:24px;padding:8px 0;color:#748087;border-bottom:1px solid #e6eaec; }.customer-stat-line b{color:#20a53a}
.customer-edit-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px; }.customer-edit-grid label span{display:block;margin-bottom:4px;color:#7f8a91;font-size:12px}
.customer-edit-grid input:disabled,.customer-edit-grid select:disabled,.customer-unified-section textarea:disabled{border-color:transparent;background:#f7f8f8;color:#3f4a50;opacity:1}
.customer-contact-lines { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #e6eaec;border-left:1px solid #e6eaec; }.customer-contact-lines>div{padding:8px 10px;border-right:1px solid #e6eaec;border-bottom:1px solid #e6eaec}.customer-contact-lines span{display:block;color:#849096;font-size:12px}
.customer-detail-modal .modal-actions.hidden{display:none!important}
@media(max-width:900px){.customer-edit-grid{grid-template-columns:1fr 1fr}.customer-contact-lines{grid-template-columns:1fr 1fr}}@media(max-width:560px){.customer-edit-grid,.customer-contact-lines{grid-template-columns:1fr}.customer-stat-line{flex-wrap:wrap;gap:8px 15px}}
.app main { min-height: 100vh; display: flex; flex-direction: column; }
#content { flex: 1; }
.site-footer { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 18px; min-height: 42px; padding: 8px 16px; color: #8b959b; background: #fff; border-top: 1px solid var(--line); font-size: 12px; white-space: nowrap; overflow: hidden; }
.site-footer a { color: var(--green); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.filings { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; }
.police-record { display: inline-flex; align-items: center; gap: 5px; }
.police-record img { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }

@media (max-width: 900px) {
  .app { display: block; }
  .sidebar { width: 252px; }
  #content { padding: 10px; }
  .app header { padding: 0 14px; }
}

@media (max-width: 560px) {
  .app header p { display: none; }
  .lead-toolbar { align-items: stretch; flex-direction: column; }
  .lead-actions { flex-wrap: wrap; }
  .lead-legend { flex-wrap: wrap; gap: 8px 14px; }
  .view-mode span { display: none; }
  .contact-form { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .log-filters { grid-template-columns: 1fr 1fr; }
  .profile-fields { grid-template-columns: 1fr; }
  .profile-fields .wide { grid-column: auto; }
  .profile-with-photo { flex-direction: column; }
  .site-footer { min-height: 58px; flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 10px; }
  .filings { gap: 10px; }
  .police-record img { width: 16px; height: 16px; flex-basis: 16px; }
}