:root {
  --ink: #15261f;
  --muted: #66766e;
  --line: #dce5df;
  --paper: #ffffff;
  --surface: #f7faf8;
  --green: #176b4f;
  --green-2: #2c9670;
  --green-soft: #e8f5ee;
  --blue: #315f9b;
  --blue-soft: #eaf1fa;
  --red: #bf3c42;
  --red-soft: #fff0f0;
  --amber: #a96b11;
  --amber-soft: #fff4df;
  --shadow: 0 14px 35px rgba(25, 63, 46, 0.08);
}

/* Procurement list and receiving photo records */
.purchase-line-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.purchase-line-row .line-remove { grid-column: 4; justify-self: end; }
.field-help { display: block; margin: -5px 0 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.inventory-photo-block { display: grid; gap: 9px; margin: 12px 0 15px; }
.inventory-photo-block > strong { color: #446052; font-size: 12px; }
.inventory-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 9px; }
.inventory-photo-grid a { display: grid; gap: 5px; min-width: 0; color: #52675c; font-size: 10px; text-decoration: none; }
.inventory-photo-grid img { width: 100%; height: 100px; object-fit: cover; border: 1px solid #dce7e1; border-radius: 8px; background: #f2f5f3; }
.inventory-photo-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-purchase-list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.finance-purchase-list-head h4 { margin: 0 0 4px; color: #4e442f; font-size: 14px; }
.finance-purchase-list-head p { margin: 0; color: #7e786d; font-size: 11px; }
.finance-purchase-lines { display: grid; gap: 9px; }
.finance-purchase-line { display: grid; grid-template-columns: minmax(150px, 1.35fr) minmax(110px, .85fr) minmax(80px, .55fr) minmax(120px, .9fr) minmax(160px, 1.25fr) 32px; align-items: end; gap: 8px; padding: 12px; border: 1px solid #eadfca; border-radius: 10px; background: #fffcf6; }
.finance-purchase-line label { min-width: 0; }
.finance-purchase-line input, .finance-purchase-line select { min-width: 0; }
.finance-purchase-detail { margin-top: 15px; }
.finance-purchase-detail .project-table { min-width: 650px; }

@media (max-width: 900px) {
  .purchase-line-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-line-row .line-remove { grid-column: 2; }
  .finance-purchase-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-purchase-line .line-remove { grid-column: 2; justify-self: end; }
}

@media (max-width: 480px) {
  .purchase-line-row, .finance-purchase-line { grid-template-columns: 1fr; }
  .purchase-line-row .line-remove, .finance-purchase-line .line-remove { grid-column: auto; justify-self: start; }
  .finance-purchase-list-head { align-items: stretch; flex-direction: column; }
  .finance-purchase-list-head button { width: 100%; }
  .inventory-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(850px 450px at 4% -12%, #dcefe4 0%, transparent 64%),
    radial-gradient(700px 380px at 105% 5%, #e3ebf7 0%, transparent 61%),
    #f5f8f6;
  color: var(--ink);
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 14px;
}

body::before { position: fixed; z-index: -1; inset: 0; opacity: .22; background-image: linear-gradient(rgba(41, 105, 74, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 105, 74, .07) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 62%); content: ""; }

.login-screen { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: clamp(18px, 4vw, 54px); background: radial-gradient(840px 560px at -10% 100%, #d7ece0, transparent 70%), radial-gradient(720px 520px at 110% -10%, #dce8f5, transparent 67%), #edf3f0; }
.login-screen[hidden] { display: none !important; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(390px, .86fr); width: min(1160px, 100%); min-height: min(680px, calc(100vh - 72px)); overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 25px; background: #fff; box-shadow: 0 32px 85px rgba(18, 55, 38, .18); }
.login-story { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(36px, 5vw, 70px); background: linear-gradient(140deg, #fbfefc 0%, #f2faf5 58%, #eef5fb 100%); color: #123d30; }
.login-story::before { position: absolute; z-index: 0; right: -112px; top: -110px; width: 420px; height: 420px; border: 48px solid #20a53a; border-right-color: #2a43e8; border-bottom-color: #2a43e8; border-radius: 43% 57% 62% 38%; opacity: .14; transform: rotate(-23deg); content: ""; }.login-story::after { position: absolute; z-index: 0; left: -90px; bottom: -150px; width: 450px; height: 300px; border: 38px solid #20a53a; border-top-color: transparent; border-right-color: #2a43e8; border-radius: 50%; opacity: .12; transform: rotate(8deg); content: ""; }
.story-brand, .story-kicker, .login-story h1, .story-copy, .story-principles, .story-footer { position: relative; z-index: 2; }.story-brand img { width: 205px; height: auto; filter: drop-shadow(0 7px 12px rgba(22,86,62,.09)); }.story-kicker { margin: auto 0 17px; color: #257b51; font-size: 11px; font-weight: 900; letter-spacing: .17em; }.login-story h1 { margin: 0; max-width: 500px; color: #173e2f; font-size: clamp(35px, 4.3vw, 56px); line-height: 1.12; letter-spacing: -.06em; white-space: nowrap; }.login-story h1 b, .login-story h1 em { color: #173e2f; font-style: normal; }.login-story h1 span { color: #2744e7; }.login-story h1 i { margin: 0 .16em; color: #286f46; font-size: .7em; font-style: normal; vertical-align: .12em; }.story-copy { max-width: 446px; margin: 22px 0 25px; color: #4f6b5e; font-size: 15px; line-height: 1.85; }.story-principles { display: flex; flex-wrap: wrap; gap: 10px; }.story-principles div { display: grid; gap: 4px; min-width: 114px; padding: 11px 14px; border: 1px solid #d4e8dc; border-radius: 9px; background: rgba(255,255,255,.8); box-shadow: 0 8px 18px rgba(32,112,74,.05); }.story-principles strong { color: #2a43e8; font-family: "Segoe UI", sans-serif; font-size: 11px; letter-spacing: .12em; }.story-principles span { color: #215943; font-size: 13px; font-weight: 800; }.story-visual { position: absolute; z-index: 1; right: -35px; bottom: 36px; width: 52%; height: 39%; pointer-events: none; }.story-process { position: absolute; right: 0; bottom: 0; width: 100%; border-radius: 13px; opacity: .92; box-shadow: 0 18px 36px rgba(25,77,56,.16); }.story-equipment { position: absolute; right: 18%; bottom: 12%; width: 36%; border-radius: 10px; background: #fff; box-shadow: 0 11px 30px rgba(17,61,46,.18); transform: rotate(-5deg); }.story-footer { margin: auto 0 0; padding-top: 28px; color: #668176; font-size: 11px; letter-spacing: .05em; }
.story-culture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; gap: 9px; }.story-culture-grid div { min-width: 0; min-height: 91px; padding: 12px 13px; border-color: #d6e5dc; background: rgba(255,255,255,.78); }.story-culture-grid div:nth-child(2), .story-culture-grid div:nth-child(3) { border-color: #d8e2fa; }.story-culture-grid strong { color: #23824f; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; letter-spacing: 0; }.story-culture-grid div:nth-child(2) strong, .story-culture-grid div:nth-child(3) strong { color: #2445d9; }.story-culture-grid span { color: #1e2e27; font-size: 14px; font-weight: 900; line-height: 1.55; }
.welcome-screen { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 22px; background: radial-gradient(820px 480px at 15% 5%, #d7efdf, transparent 62%), radial-gradient(720px 420px at 92% 96%, #dce8f6, transparent 65%), rgba(247,250,248,.98); animation: welcome-fade-in .52s ease both; }
.welcome-screen[hidden] { display: none !important; }
.is-login > .topbar,
.is-login > .dashboard { visibility: hidden; }
.welcome-screen.is-leaving { pointer-events: none; animation: welcome-fade-out .32s ease forwards; }
.welcome-card { width: min(560px, 100%); padding: 28px 44px; background: transparent; text-align: center; animation: welcome-card-in .58s cubic-bezier(.2,.8,.2,1) both; }
.welcome-screen.is-leaving .welcome-card { animation: welcome-card-out .32s ease forwards; }
.welcome-logo { width: 250px; max-width: 100%; height: auto; margin-bottom: 20px; filter: drop-shadow(0 8px 14px rgba(30,80,52,.12)); }.welcome-card .eyebrow { justify-content: center; padding-left: 0; }.welcome-card .eyebrow::before { display: none; }.welcome-card h1 { margin: 15px 0 9px; font-size: 34px; letter-spacing: -.04em; }.welcome-card > p { margin-bottom: 0; color: var(--muted); font-size: 14px; letter-spacing: .06em; }
@keyframes welcome-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcome-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes welcome-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes welcome-card-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(.985); } }
.login-card { display: grid; align-content: center; gap: 17px; width: 100%; max-width: 450px; margin: auto; padding: clamp(34px, 5vw, 72px) clamp(30px, 5.5vw, 72px); background: #fff; }.login-card .eyebrow { margin-bottom: 1px; color: #26805e; }.login-card h2 { margin: 0; color: #163c2d; font-size: 32px; letter-spacing: -.045em; }.login-intro { margin: -10px 0 12px; color: var(--muted); font-size: 14px; }.login-card label { gap: 8px; color: #4a6257; }.login-card input { min-height: 48px; border-radius: 8px; background: #fbfcfb; }.login-card .primary { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 13px 17px; border-radius: 8px; }.login-card .primary span { font-size: 18px; line-height: 1; }.login-footnote { margin: -4px 0 0; color: #8a9991; font-size: 11px; text-align: center; }.login-error { min-height: 18px; margin: -7px 0 -4px; color: var(--red); font-size: 12px; }

button, input, select, textarea { font: inherit; }
button { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }
h1, h2, h3, p { margin-top: 0; }

.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 104px;
  padding: 23px max(34px, calc((100vw - 1440px) / 2 + 34px));
  border-bottom: 1px solid rgba(213, 225, 218, .9);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 4px 20px rgba(30, 71, 51, .04);
  backdrop-filter: blur(14px);
}

.brand-lockup { display: flex; align-items: center; gap: 18px; min-width: 0; }.brand-logo-home { display: inline-flex; padding: 0; border: 0; background: transparent; cursor: pointer; }.brand-logo-home:hover { opacity: .86; transform: none; }
.brand-logo { width: 160px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(29, 67, 51, .08)); }
.brand-title { padding-left: 18px; border-left: 1px solid #dce7e0; }

.eyebrow {
  position: relative;
  margin: 0 0 6px;
  padding-left: 13px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.eyebrow::before { position: absolute; left: 0; top: 3px; width: 5px; height: 10px; border-radius: 8px; background: var(--green-2); content: ""; }
.section-kicker { margin: 0 0 9px; color: #3b8361; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
h1 { margin-bottom: 0; font-size: clamp(24px, 2.5vw, 30px); letter-spacing: -.03em; }
h2 { margin-bottom: 5px; font-size: 18px; letter-spacing: -.02em; }
h3 { margin: 2px 18px 12px; font-size: 15px; }

.top-actions, .detail-actions, .dialog-actions, .workflow-actions { display: flex; align-items: center; gap: 10px; }
.account-switch { display: grid; gap: 5px; min-width: 180px; color: var(--muted); font-size: 12px; font-weight: 700; }
.account-switch select { min-width: 180px; }

.dashboard { max-width: 1504px; margin: 0 auto; padding: 28px 34px 60px; }
.app-view[hidden] { display: none !important; }
.back-link { margin-bottom: 14px; border: 0; background: transparent; color: var(--green); font-weight: 800; cursor: pointer; }
.back-link:hover { text-decoration: underline; }
.module-choice-head { display: block; margin: 3px 0 18px; padding: 0 3px 15px; border-bottom: 1px solid #dbe6df; text-align: center; }.module-choice-head h2 { margin-bottom: 5px; color: #193f30; font-size: 23px; }.module-choice-head p:last-child { margin: 0; color: var(--muted); }
.module-hero { position: relative; overflow: hidden; margin-bottom: 20px; padding: 28px 30px; border: 1px solid #d4e4d9; border-radius: 18px; background: linear-gradient(120deg, #edf8f1, #f5f8fd); box-shadow: var(--shadow); }.module-hero::after { position: absolute; right: -40px; top: -70px; width: 220px; height: 220px; border: 28px solid rgba(45,148,107,.09); border-radius: 50%; content: ""; }.module-hero h2 { margin-bottom: 8px; font-size: 25px; }.module-hero > p:last-child { max-width: 720px; margin-bottom: 0; color: var(--muted); line-height: 1.7; }
.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.module-card { position: relative; display: flex; min-height: 164px; padding: 17px 19px; border: 1px solid #dce8e0; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 9px 23px rgba(24,73,49,.06); cursor: pointer; flex-direction: column; justify-content: center; text-align: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }.module-card:hover { transform: translateY(-3px); border-color: #acd1ba; box-shadow: 0 16px 30px rgba(24,73,49,.12); }.module-icon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 11px; border-radius: 12px; background: var(--module-soft); color: var(--module-ink); font-size: 20px; }.module-card h3 { margin: 0 0 6px; color: #204f3a; font-size: 16px; }.module-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.module-card small { position: absolute; right: 17px; bottom: 15px; color: var(--module-ink); font-size: 11px; font-weight: 800; }
.business-module-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 23px; border: 1px solid #dce8e0; border-radius: 15px; background: linear-gradient(120deg, #f7fbf8, #f3f7fd); }.business-module-head h2 { margin-bottom: 7px; }.business-module-head p { margin: 0; color: var(--muted); }.business-module-table { margin-top: 18px; }.business-module-table td:first-child strong { color: #1d503a; }
.inventory-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }.inventory-category { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }.inventory-category.equipment { background: #e7f0ff; color: #356da8; }.inventory-category.part { background: #f5ecfa; color: #8755aa; }.table-subline { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }.empty-table { padding: 28px !important; color: var(--muted); text-align: center; }.inventory-records { margin-top: 18px; padding: 0; overflow: hidden; border: 1px solid #dce8e0; border-radius: 15px; background: #fff; }.inventory-records .section-head { padding-bottom: 15px; border-bottom: 1px solid #e1eae4; }.inventory-record { border-bottom: 1px solid #e5ece7; }.inventory-record:last-child { border-bottom: 0; }.inventory-record summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 19px; cursor: pointer; list-style: none; }.inventory-record summary::-webkit-details-marker { display: none; }.inventory-record summary > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.inventory-record summary strong { color: #1d503a; }.inventory-record summary small { color: var(--muted); }.inventory-record summary > span { color: #49685a; font-size: 12px; white-space: nowrap; }.inventory-record-detail { padding: 0 19px 17px; background: #fbfdfc; }.inventory-record-detail > p { margin: 0 0 10px; color: #5f7067; font-size: 13px; line-height: 1.55; }.inventory-record-detail table { width: 100%; border-collapse: collapse; color: #40564a; font-size: 12px; }.inventory-record-detail th, .inventory-record-detail td { padding: 8px; border-top: 1px solid #e2ebe5; text-align: left; }.inventory-record-detail th { color: #75887d; font-size: 11px; }.inventory-record-detail td small { color: var(--muted); }.purchase-line-rows, .inventory-count-rows { display: grid; gap: 10px; }.purchase-line-row { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(126px, 1fr) minmax(120px, 1.15fr) 84px 72px 96px 32px; align-items: end; gap: 8px; padding: 12px; border: 1px solid #dfe9e3; border-radius: 11px; background: #fbfdfc; }.purchase-line-row label, .inventory-count-row label { display: grid; gap: 5px; color: #597064; font-size: 11px; font-weight: 800; }.purchase-line-row input, .purchase-line-row select { min-width: 0; padding: 9px 8px; font-size: 12px; }.line-remove { width: 30px; min-width: 30px; height: 36px; padding: 0; border-color: #ead7d7; color: #a84c52; }.inventory-count-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(130px, 1fr) 110px 130px; align-items: end; gap: 10px; padding: 12px; border: 1px solid #dfe9e3; border-radius: 11px; background: #fbfdfc; }.inventory-count-row > strong { color: #1e513b; }.inventory-count-row > span { color: var(--muted); font-size: 12px; }.inventory-count-row output { padding: 10px 0; color: #40564a; font-size: 13px; }
.module-flow-card { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.7fr); align-items: center; gap: 20px; margin: 0 0 18px; padding: 19px 21px; border: 1px solid #dce8e0; border-radius: 15px; background: #fff; }.module-flow-card h3 { margin: 0 0 7px; color: #1b503b; font-size: 16px; }.module-flow-card p { margin: 0; color: #61736a; font-size: 12px; line-height: 1.65; }.module-flow { display: flex; align-items: center; justify-content: space-between; gap: 7px; }.module-flow-step { display: grid; justify-items: center; gap: 6px; min-width: 76px; text-align: center; }.module-flow-step b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #e8f4ec; color: #1d724e; font-size: 12px; }.module-flow-step span { color: #315846; font-size: 12px; font-weight: 800; line-height: 1.35; }.module-flow-arrow { color: #87a293; font-style: normal; }.sample-row { background: #fbfcfa; }.table-demo { display: block; margin-top: 3px; color: #7b8b83; font-size: 11px; font-weight: 700; }
.inventory-demo-note { display: block; margin-top: 10px; color: #597567; font-size: 12px; line-height: 1.55; }.inventory-attention { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr); gap: 18px; margin: 0 0 18px; padding: 19px 21px; border: 1px solid #eadfc6; border-radius: 15px; background: linear-gradient(120deg, #fffdf8, #fff9ed); }.inventory-attention .eyebrow { margin: 0 0 5px; color: #a37a36; font-size: 10px; }.inventory-attention h3 { margin: 0 0 6px; color: #664c20; font-size: 16px; }.inventory-attention p { margin: 0; color: #7b6b4d; font-size: 12px; line-height: 1.65; }.inventory-attention ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.inventory-attention li { display: grid; grid-template-columns: 106px 1fr; gap: 9px; padding: 9px 10px; border: 1px solid #efe4cb; border-radius: 9px; background: rgba(255,255,255,.7); color: #6f6045; font-size: 12px; line-height: 1.5; }.inventory-attention li strong { color: #8f621c; }.inventory-attention li span { color: #6d6d61; }
.hr-module-head { background: linear-gradient(120deg, #fbf8fd, #f6f1fa 55%, #f5f8fd); }.hr-attention { border-color: #e4d8ea; background: linear-gradient(120deg, #fdfaff, #f7f2fb); }.hr-attention .eyebrow { color: #8657a0; }.hr-attention h3 { color: #5f3c73; }.hr-attention p, .hr-attention li span { color: #76667e; }.hr-attention li { border-color: #e9dfed; }.hr-attention li strong { color: #75498c; }.hr-section { margin-top: 18px; overflow: hidden; border: 1px solid #dfe8e2; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.hr-position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; }.hr-position-card { overflow: hidden; border: 1px solid #e5ddec; border-radius: 11px; background: #fcfafd; }.hr-position-card summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; padding: 14px 16px; cursor: pointer; list-style: none; }.hr-position-card summary::-webkit-details-marker { display: none; }.hr-position-card summary > div { display: grid; gap: 4px; }.hr-position-card summary span { color: #8b69a0; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.hr-position-card summary strong { color: #523364; font-size: 14px; }.hr-position-card summary small { max-width: 190px; color: #7c6c85; font-size: 11px; text-align: right; }.hr-position-card[open] summary { border-bottom: 1px solid #e9e1ed; background: #f8f2fb; }.hr-position-detail { padding: 15px 16px 17px; }.hr-position-detail p { margin: 0 0 13px; color: #62586a; font-size: 12px; line-height: 1.7; }.hr-position-detail > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #f4eff7; font-size: 12px; }.hr-position-detail > div span { color: #817488; }.hr-position-detail > div strong { color: #5f3e71; }.hr-position-detail h4 { margin: 14px 0 6px; color: #5d3e6d; font-size: 12px; }.hr-position-detail ol { margin: 0; padding-left: 20px; color: #655b6c; font-size: 12px; line-height: 1.8; }.hr-employee-table { min-width: 1320px; }.hr-employee-table th:nth-child(6), .hr-employee-table td:nth-child(6) { min-width: 255px; }.hr-project-stack { display: grid; gap: 5px; }.hr-project-link { display: grid; gap: 2px; width: 100%; padding: 7px 9px; border: 1px solid #dce9e1; border-radius: 8px; background: #f8fbf9; color: #245941; text-align: left; cursor: pointer; }.hr-project-link:hover { border-color: #9bc7ad; background: #f0f8f3; transform: none; }.hr-project-link strong { font-size: 11px; }.hr-project-link small { color: #687a70; font-size: 10px; line-height: 1.4; }.hr-empty { color: #8a9890; font-size: 11px; }.hr-dual-grid { display: grid; gap: 18px; }.hr-record-dialog { width: min(720px, calc(100vw - 32px)); }.hr-record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.hr-record-fields .wide { grid-column: 1 / -1; }
.finance-module-head { border-color: #eadfc8; background: linear-gradient(120deg, #fffdf8, #fff7e8 60%, #fff); }.finance-workflow-section { margin-bottom: 18px; overflow: hidden; border: 1px solid #e5e8e6; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.finance-workflow-section .section-head > span { color: #856b3e; font-size: 12px; font-weight: 800; }.finance-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 20px 20px; }.finance-workflow-card { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 13px; min-height: 112px; padding: 16px; overflow: hidden; border: 1px solid #eadfca; border-radius: 13px; background: linear-gradient(135deg, #fff, #fffbf2); color: #62491d; text-align: left; cursor: pointer; }.finance-workflow-card:hover { border-color: #ddb96d; box-shadow: 0 10px 20px rgba(128,91,28,.12); transform: translateY(-2px); }.finance-workflow-card > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: #ffe4a8; color: #bd7414; font-size: 20px; font-weight: 900; }.finance-color-1 > span { background: #dff1ff; color: #267cb4; }.finance-color-2 > span { background: #ffe0d8; color: #bd5a42; }.finance-color-3 > span { background: #e8e2ff; color: #7055b3; }.finance-color-4 > span { background: #dcf4e7; color: #278058; }.finance-workflow-card div { display: grid; align-content: start; gap: 6px; }.finance-workflow-card strong { color: #4f3a18; font-size: 15px; }.finance-workflow-card small { color: #7a6e58; font-size: 11px; line-height: 1.55; }.finance-workflow-card i { grid-column: 2; color: #a57832; font-size: 11px; font-style: normal; font-weight: 800; }.finance-attention { border-color: #eadfc6; background: linear-gradient(120deg, #fffdf8, #fff9ed); }.finance-table { min-width: 1120px; }.finance-type-tag { display: inline-flex; align-items: center; gap: 6px; color: #66512d; font-weight: 800; }.finance-type-tag b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: #ffebbd; color: #a96812; font-size: 11px; }.finance-application-dialog { width: min(1180px, calc(100vw - 28px)); max-height: calc(100vh - 24px); overflow: auto; }.finance-application-dialog.is-maximized { width: calc(100vw - 20px); max-width: none; height: calc(100vh - 20px); max-height: none; }.finance-application-form { width: auto; max-width: none; gap: 18px; background: #f6f7fa; }.finance-application-form > .dialog-titlebar, .finance-application-form > .dialog-hint, .finance-application-form > .dialog-actions { padding-right: 4px; padding-left: 4px; }.finance-application-form .dialog-titlebar .eyebrow { margin: 0 0 5px; color: #9b6d23; }.finance-form-section { display: grid; gap: 16px; padding: 19px; border: 1px solid #e4e7e9; border-radius: 13px; background: #fff; }.finance-form-section-head { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #e7ece9; }.finance-form-section-head > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #fff0cc; color: #986314; font-size: 11px; font-weight: 900; }.finance-form-section-head h3 { margin: 0 0 3px; color: #4e442f; font-size: 15px; }.finance-form-section-head p { margin: 0; color: #7e786d; font-size: 11px; }.finance-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.finance-form-grid .wide { grid-column: 1 / -1; }.finance-existing-files { padding: 11px; border-radius: 9px; background: #f8faf9; }.finance-existing-files > strong { color: #53675b; font-size: 12px; }.finance-flow-preview { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid #e7ddc7; border-radius: 13px; background: linear-gradient(120deg, #fffdf9, #fff8e9); }.finance-flow-preview h3 { margin: 0 0 5px; color: #60491f; font-size: 15px; }.finance-flow-preview p { margin: 0; color: #83745b; font-size: 11px; }.finance-flow-steps { display: flex; align-items: center; justify-content: flex-start; gap: 8px; overflow-x: auto; }.finance-flow-steps div { display: grid; justify-items: center; gap: 5px; min-width: 90px; text-align: center; }.finance-flow-steps b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #f1c66e; color: #fff; font-size: 11px; }.finance-flow-steps span { color: #674f25; font-size: 11px; font-weight: 800; white-space: nowrap; }.finance-flow-steps i { color: #b99b62; font-style: normal; }.finance-detail-dialog { width: min(920px, calc(100vw - 28px)); max-height: calc(100vh - 24px); overflow: auto; }.finance-detail-panel { gap: 18px; }.finance-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.finance-detail-summary > div { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid #e1e8e4; border-radius: 9px; background: #fafcfb; }.finance-detail-summary span { color: #7a8981; font-size: 10px; font-weight: 800; }.finance-detail-summary strong { color: #334f41; font-size: 12px; }.finance-detail-summary i { font-style: normal; }.finance-detail-fields, .finance-detail-timeline { padding: 15px; border: 1px solid #e2e8e4; border-radius: 11px; }.finance-detail-fields h3, .finance-detail-timeline h3 { margin: 0 0 11px; color: #31513f; font-size: 14px; }.finance-detail-fields > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.finance-detail-fields > div > div { display: grid; gap: 4px; padding: 9px 10px; border-radius: 8px; background: #f6f8f7; }.finance-detail-fields span { color: #7b8981; font-size: 10px; }.finance-detail-fields strong { color: #4c6256; font-size: 12px; line-height: 1.5; }.finance-timeline-step { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 0 0 17px; }.finance-timeline-step:not(:last-child)::after { position: absolute; left: 14px; top: 28px; bottom: 0; width: 2px; background: #e2e9e5; content: ""; }.finance-timeline-step > b { display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid #dce6e0; border-radius: 50%; background: #fff; color: #8b9991; font-size: 10px; }.finance-timeline-step.is-done > b { border-color: #4ea878; background: #4ea878; color: #fff; }.finance-timeline-step.is-current > b { border-color: #dfa742; background: #fff5dc; color: #a36a0e; }.finance-timeline-step.is-rejected > b { border-color: #cb6868; background: #cb6868; color: #fff; }.finance-timeline-step div { display: grid; gap: 3px; padding-top: 2px; }.finance-timeline-step strong { color: #395345; font-size: 12px; }.finance-timeline-step span { color: #7a8981; font-size: 10px; }.finance-timeline-step p { margin: 3px 0 0; color: #5f6e66; font-size: 11px; }.finance-edit-application { justify-self: end; }.workflow-config-dialog { width: min(720px, calc(100vw - 28px)); }.workflow-config-fields { display: grid; grid-template-columns: 1fr 130px; gap: 13px; }.workflow-config-fields .wide { grid-column: 1 / -1; }.workflow-enabled { display: flex; grid-column: 1 / -1; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 9px; background: #f4f7f5; }.workflow-enabled input { width: auto; }.settings-module-head { background: linear-gradient(120deg, #f7f9fa, #eef2f4); }.settings-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }.settings-guide div { display: grid; gap: 5px; padding: 14px 15px; border: 1px solid #dfe5e8; border-radius: 11px; background: #fff; }.settings-guide strong { color: #4c5f69; font-size: 13px; }.settings-guide span { color: #76858d; font-size: 11px; line-height: 1.55; }.workflow-settings-list { display: grid; gap: 12px; }.workflow-setting-card { padding: 18px; border: 1px solid #dfe6e2; border-radius: 13px; background: #fff; box-shadow: var(--shadow); }.workflow-setting-card.is-disabled { opacity: .62; background: #f5f6f6; }.workflow-setting-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 13px; align-items: center; }.workflow-setting-head > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #ffebbd; color: #9d6412; font-size: 18px; font-weight: 900; }.workflow-setting-head small { color: #8a9790; font-size: 9px; font-weight: 800; letter-spacing: .08em; }.workflow-setting-head h3 { margin: 2px 0 4px; color: #334d40; font-size: 16px; }.workflow-setting-head p { margin: 0; color: #718078; font-size: 11px; }.workflow-setting-head > b { padding: 5px 9px; border-radius: 999px; background: #e9f5ed; color: #29734f; font-size: 10px; }.workflow-setting-card.is-disabled .workflow-setting-head > b { background: #e8ebea; color: #737d78; }.workflow-setting-steps { display: flex; align-items: center; gap: 7px; margin: 14px 0; padding: 11px; overflow-x: auto; border-radius: 9px; background: #f7f9f8; }.workflow-setting-steps i { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #54685d; font-size: 11px; font-style: normal; font-weight: 700; }.workflow-setting-steps i:not(:last-child)::after { margin-left: 3px; color: #a0ada6; content: "→"; }.workflow-setting-steps em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e3eee7; color: #397058; font-size: 9px; font-style: normal; }.workflow-setting-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }.workflow-setting-actions button:disabled { opacity: .4; cursor: not-allowed; }.settings-readonly { margin: 14px 0 0; color: #7b8981; font-size: 11px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.analysis-section { margin-top: 34px; padding-top: 4px; border-top: 1px solid #dfe9e2; }
.analysis-head { padding-inline: 0; }.analysis-head h2 { padding-left: 12px; }
.analytics-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.analysis-card { min-height: 184px; padding: 17px; border: 1px solid rgba(215, 226, 219, .95); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); }
.analysis-card h3 { margin: 0 0 4px; color: #1b4c38; font-size: 15px; }
.analysis-card > p { margin-bottom: 13px; color: var(--muted); font-size: 12px; }
.analysis-bars { display: grid; gap: 8px; }
.analysis-bar-row { display: grid; grid-template-columns: 112px 1fr 22px; gap: 8px; align-items: center; font-size: 11px; }
.analysis-bar-row span { overflow: hidden; color: #597065; text-overflow: ellipsis; white-space: nowrap; }
.analysis-bar-row b { color: #2f5643; font-size: 11px; text-align: right; }
.analysis-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e9f0eb; }
.analysis-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #278360, #67bd92); }
.analysis-card:nth-child(2) .analysis-track i { background: linear-gradient(90deg, #356caa, #72a3d4); }
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.health-item { padding: 11px 8px; border-radius: 9px; background: #f4f8f5; text-align: center; }
.health-item strong { display: block; margin-bottom: 3px; color: #266144; font-size: 23px; }
.health-item span { color: var(--muted); font-size: 11px; }
.health-item.warn { background: var(--amber-soft); }.health-item.warn strong { color: var(--amber); }
.health-item.danger { background: var(--red-soft); }.health-item.danger strong { color: var(--red); }
.analysis-foot { margin: 13px 0 0; padding-top: 10px; border-top: 1px dashed #dce6df; color: #52685d; font-size: 12px; }

.metric, .project-table-card, .detail-card, .my-work-card {
  border: 1px solid rgba(215, 226, 219, .95);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow);
}

.metric { position: relative; overflow: hidden; padding: 17px 18px; }
.metric::after { position: absolute; right: -20px; bottom: -34px; width: 88px; height: 88px; border-radius: 50%; background: var(--green-soft); content: ""; }
.metric:nth-child(2)::after { background: var(--amber-soft); }
.metric:nth-child(3)::after { background: var(--red-soft); }
.metric:nth-child(4)::after { background: var(--blue-soft); }
.metric span { position: relative; z-index: 1; display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
.metric strong { position: relative; z-index: 1; display: block; margin-top: 7px; color: var(--ink); font-size: 30px; line-height: 1; letter-spacing: -.04em; }

.my-work-card { position: relative; overflow: hidden; margin: 0 0 22px; padding: 20px; border-color: #cce3d5; background: linear-gradient(105deg, #f2fbf6, #fff 57%); }
.my-work-card::after { position: absolute; right: 3%; top: -30px; width: 130px; height: 130px; border: 21px solid rgba(45, 147, 108, .08); border-radius: 50%; content: ""; }
.my-work-card h2 { position: relative; z-index: 1; }
.my-work-card p { position: relative; z-index: 1; margin-bottom: 15px; color: var(--muted); }
.todo-list, .activity-list { display: grid; gap: 9px; }
.todo-item, .activity-item, .flow-box { border: 1px solid #e2ebe5; border-radius: 10px; background: rgba(255, 255, 255, .9); }
.todo-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; }
.todo-item strong { color: #194c39; }
.todo-item p, .activity-item p { margin: 4px 0 0; color: var(--muted); line-height: 1.55; }
.todo-empty { margin: 0; color: var(--muted); }

.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 21px 21px 15px; }
.section-head h2 { position: relative; padding-left: 11px; }
.section-head h2::before { position: absolute; left: 0; top: 4px; width: 4px; height: 17px; border-radius: 5px; background: var(--green); content: ""; }
.section-head p { margin-bottom: 0; color: var(--muted); }
.section-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }

.supplier-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 1.3; vertical-align: middle; }
.supplier-badge.is-red { color: #9c272c; background: #ffe8e8; border: 1px solid #f2c4c6; }
.supplier-badge.is-black { color: #fff; background: #26312c; border: 1px solid #26312c; }
.supplier-badge.is-watch { color: #86601f; background: #fff3d8; border: 1px solid #edd49e; }
.supplier-status-panel { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #dce7e1; border-radius: 11px; background: #f8fbf9; }
.supplier-status-panel > div { display: grid; gap: 3px; }
.supplier-status-panel strong { color: #253e32; font-size: 13px; }
.supplier-status-panel span { color: #64746b; font-size: 12px; line-height: 1.55; }
.supplier-status-panel.is-black { border-color: #d6c4c4; background: #fff5f5; }
.supplier-status-panel.is-red { border-color: #e6c4c4; background: #fff9f9; }
.supplier-status-panel.is-neutral { border-color: #dce7e1; background: #f7faf8; }
.supplier-status-panel.is-neutral strong { display: block; margin-right: 8px; }
.black-supplier-reason { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e7c3c5; border-radius: 11px; background: #fff7f7; color: #82383c !important; }
.supplier-list-card { border-color: #e6ddd9; }
.supplier-list-table { min-width: 760px; }
.supplier-list-table th:nth-child(3) { width: 42%; }
.supplier-black-reason { color: #9b3e43 !important; white-space: normal; }

.knowledge-module-head { background: linear-gradient(135deg, #fbfdf9, #f1f6ec); }
.knowledge-risk { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 18px; padding: 15px 18px; border: 1px solid #ead9ae; border-radius: 13px; background: #fffaf0; }
.knowledge-risk strong { flex: 0 0 auto; color: #835e17; font-size: 13px; }
.knowledge-risk p { margin: 0; color: #71664d; font-size: 12px; line-height: 1.65; }
.knowledge-library { margin-bottom: 18px; padding: 20px; border: 1px solid #dce7d7; border-radius: 16px; background: #fff; }
.knowledge-library .section-head { margin-bottom: 14px; padding: 0; }
.knowledge-library .section-head > span { color: #60725b; font-size: 12px; font-weight: 800; }
.knowledge-searchbar { display: grid; grid-template-columns: minmax(240px, 1fr) 160px 160px 160px; gap: 12px; margin-bottom: 16px; padding: 13px; border-radius: 12px; background: #f3f7f0; }
.knowledge-request-custom-fields { display: grid; gap: 12px; }
.knowledge-searchbar label { display: grid; gap: 5px; color: #586c53; font-size: 11px; font-weight: 800; }
.knowledge-searchbar input, .knowledge-searchbar select { min-width: 0; }
.knowledge-file-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.knowledge-file-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #dfe8db; border-radius: 12px; background: #fcfdfb; }
.knowledge-file-card[hidden] { display: none; }
.knowledge-file-icon { display: grid; place-items: center; width: 44px; height: 52px; border-radius: 8px 8px 11px 8px; color: #fff; background: linear-gradient(145deg, #789269, #526d48); box-shadow: inset -5px 0 rgba(255,255,255,.12); font-size: 17px; font-weight: 900; }
.knowledge-file-copy { min-width: 0; }
.knowledge-file-copy > div { display: flex; align-items: center; gap: 6px; color: #74816f; font-size: 9px; font-weight: 800; }
.knowledge-type { padding: 2px 6px; border-radius: 999px; color: #537147; background: #eaf3e5; }
.knowledge-file-copy h3 { margin: 5px 0 4px; overflow: hidden; color: #294223; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-file-copy p { margin: 0; overflow: hidden; color: #778173; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-download { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; text-decoration: none; }
.knowledge-request-table { min-width: 860px; }
.knowledge-request-table th:nth-child(4) { width: 30%; }
.knowledge-request-actions { display: flex; gap: 6px; }
.knowledge-request-actions button { padding: 7px 9px; white-space: nowrap; }

.service-module-head { background: linear-gradient(135deg, #fbfcff, #eef2fb); }
.service-reminder-card { border-color: #dce3f3; }
.service-reminder-card .section-head > span { padding: 5px 10px; border-radius: 999px; color: #8c4d20; background: #fff0df; font-size: 11px; font-weight: 900; }
.service-reminder-table { min-width: 800px; }
.service-followup-status { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.service-followup-status.is-overdue, .service-milestone.is-overdue { color: #a33d42; background: #ffe9ea; border-color: #efc9cc; }
.service-followup-status.is-due, .service-milestone.is-due { color: #8a4d11; background: #ffedd6; border-color: #edcfaa; }
.service-followup-status.is-upcoming, .service-milestone.is-upcoming { color: #3e638e; background: #e9f2ff; border-color: #cbdcf3; }
.service-followup-status.is-done, .service-milestone.is-done { color: #277055; background: #e7f5ed; border-color: #c9e5d7; }
.service-followup-status.is-planned, .service-milestone.is-planned { color: #68766f; background: #f1f4f2; border-color: #dce4df; }
.service-products-section { margin-bottom: 18px; padding: 20px; border: 1px solid #dce4ef; border-radius: 16px; background: #fff; }
.service-products-section > .section-head { padding: 0 0 14px; }
.service-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.service-product-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #dce3ee; border-radius: 13px; background: #fbfcff; color: inherit; text-align: left; box-shadow: none; }
.service-product-card:hover, .service-product-card.is-active { transform: translateY(-1px); border-color: #8298c5; background: #f3f6fd; box-shadow: 0 10px 24px rgba(71, 91, 133, .09); }
.service-product-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #6d83b4, #465f96); font-size: 18px; font-weight: 900; }
.service-product-card > div { min-width: 0; }
.service-product-card small { color: #7b869b; font-size: 9px; font-weight: 700; }
.service-product-card h3 { margin: 4px 0; overflow: hidden; color: #253b65; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.service-product-card p { margin: 0; overflow: hidden; color: #69768d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.service-product-card > strong { color: #375589; font-size: 25px; }
.service-product-card > strong small { margin-left: 2px; }
.service-product-card > em { position: absolute; right: 12px; bottom: 8px; color: #9a5328; font-size: 9px; font-style: normal; font-weight: 800; }
.service-product-card > em.is-clear { color: #4e806b; }
.service-product-detail { scroll-margin-top: 16px; }
.service-installed-table { min-width: 980px; }
.service-installed-table th:last-child { width: 45%; }
.service-milestones { display: grid; grid-template-columns: repeat(3, minmax(135px, 1fr)); gap: 7px; }
.service-milestone { display: grid; gap: 3px; min-width: 0; padding: 8px 9px; border: 1px solid #dce4df; border-radius: 8px; text-align: left; box-shadow: none; }
.service-milestone b { font-size: 10px; }
.service-milestone span { overflow: hidden; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.service-milestone:disabled { opacity: 1; cursor: default; }
.service-analysis-section { padding: 20px; border: 1px solid #dce4ef; border-radius: 16px; background: #fff; }
.service-analysis-section > .section-head { padding: 0 0 14px; }
.service-analysis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.service-analysis-grid article { padding: 15px; border: 1px solid #e1e6ef; border-radius: 12px; background: #fafbfe; }
.service-analysis-grid h3 { margin: 0 0 13px; color: #30486f; font-size: 13px; }
.service-bar-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 10px; }
.service-bar-row > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: #647390; background: #edf0f7; font-size: 9px; font-weight: 900; }
.service-bar-row > div { display: grid; gap: 5px; min-width: 0; }
.service-bar-row strong { overflow: hidden; color: #53617a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.service-bar-row i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #e5e9f1; }
.service-bar-row i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4869a3, #7593ca); }
.service-bar-row em { color: #435b83; font-size: 10px; font-style: normal; font-weight: 900; }

.customer-module-head { background: linear-gradient(135deg, #fbfefe, #edf7f8); }
.customer-attention { border-color: #d8e8ea; background: linear-gradient(120deg, #fbfefe, #eff9fa); }
.customer-attention h3 { color: #276d77; }
.customer-attention li { border-color: #dcebed; }
.customer-products-section { margin-bottom: 18px; padding: 20px; border: 1px solid #d9e8e9; border-radius: 16px; background: #fff; }
.customer-products-section > .section-head { padding: 0 0 14px; }
.customer-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.customer-product-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #d9e7e9; border-radius: 13px; background: #fbfefe; color: inherit; text-align: left; box-shadow: none; }
.customer-product-card:hover, .customer-product-card.is-active { transform: translateY(-1px); border-color: #68a0a8; background: #f0fafb; box-shadow: 0 10px 24px rgba(51, 112, 121, .09); }
.customer-product-card > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #5e9ba4, #367680); font-size: 17px; font-weight: 900; }
.customer-product-card > div { min-width: 0; }
.customer-product-card small { color: #758d91; font-size: 9px; }
.customer-product-card h3 { margin: 4px 0; overflow: hidden; color: #235a62; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.customer-product-card p { margin: 0 0 4px; overflow: hidden; color: #647d81; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-product-card em { display: block; color: #8a6a35; font-size: 9px; font-style: normal; font-weight: 800; }
.customer-product-card > strong { color: #2e737d; font-size: 24px; }
.customer-product-card > strong small { margin-left: 2px; }
.customer-inquiry-detail { scroll-margin-top: 16px; }
.customer-inquiry-table { min-width: 1080px; }
.customer-inquiry-table th:nth-child(5) { width: 31%; }
.customer-specs { min-width: 260px; color: #53666a; font-size: 11px; line-height: 1.55; white-space: normal; }
.customer-purchase-state { display: inline-flex; margin-top: 3px; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.customer-purchase-state.is-overdue { color: #a33d42; background: #ffe9ea; }
.customer-purchase-state.is-due { color: #8a4d11; background: #ffedd6; }
.customer-purchase-state.is-upcoming { color: #376b78; background: #e5f4f6; }
.customer-purchase-state.is-planned { color: #68766f; background: #f0f3f1; }
.customer-purchase-state.is-done { color: #277055; background: #e7f5ed; }
.customer-purchase-state.is-paused { color: #777068; background: #f2efeb; }
.customer-inquiry-dialog { width: min(900px, calc(100vw - 30px)); }
.customer-inquiry-dialog .plan-form { width: auto; max-width: none; }

/* Inventory ledger search and filtering */
.inventory-ledger-head { align-items: center; }
.inventory-filter-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #edf6f1; color: #287054; font-size: 11px; font-weight: 800; white-space: nowrap; }
.inventory-filter-bar { display: grid; grid-template-columns: minmax(220px, 1.65fr) repeat(3, minmax(140px, .8fr)) auto; gap: 10px; align-items: end; margin: 0 20px 16px; padding: 13px; border: 1px solid #dcebe2; border-radius: 13px; background: linear-gradient(120deg, #f9fcfa, #f2f8f5); }
.inventory-filter-bar label { display: grid; gap: 5px; min-width: 0; margin: 0; }
.inventory-filter-bar label > span { color: #668076; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.inventory-filter-bar input, .inventory-filter-bar select { min-width: 0; min-height: 38px; margin: 0; border-color: #cfe0d6; background: #fff; font-size: 12px; }
.inventory-search-field input { padding-left: 12px; }
.inventory-filter-reset { min-height: 38px; margin: 0; white-space: nowrap; }
.inventory-filter-empty { margin: -3px 20px 15px; padding: 11px 13px; border: 1px dashed #d6dfda; border-radius: 10px; background: #fafcfa; color: #728078; font-size: 12px; }
tr[data-inventory-row][hidden] { display: none; }

.daily-module-head { background: linear-gradient(135deg, #fbfefc, #edf7f1); }
.daily-head-actions { display: flex; align-items: end; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.daily-head-actions label { display: grid; gap: 4px; color: #63756b; font-size: 10px; font-weight: 800; }
.daily-head-actions input { min-width: 155px; }
.daily-pending { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); align-items: center; gap: 18px; margin: 0 0 18px; padding: 18px 20px; border: 1px solid #dbe7e0; border-radius: 15px; background: #f7fbf8; }
.daily-pending.has-pending { border-color: #ead8bd; background: #fffaf1; }
.daily-pending .eyebrow { margin: 0 0 4px; color: #8b7144; font-size: 9px; }
.daily-pending h3 { margin: 0 0 5px; color: #405b4c; font-size: 15px; }
.daily-pending p { margin: 0; color: #758179; font-size: 11px; }
.daily-pending > div:last-child { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.daily-pending > div:last-child span { padding: 6px 10px; border: 1px solid #eadac1; border-radius: 999px; color: #805c28; background: #fff; font-size: 10px; font-weight: 800; }
.daily-pending > div:last-child strong { color: #34735a; font-size: 13px; }
.daily-report-section { padding: 20px; border: 1px solid #dce8e1; border-radius: 16px; background: #fff; }
.daily-report-section > .section-head { padding: 0 0 14px; }
.daily-report-section > .section-head > span { color: #5d7568; font-size: 11px; font-weight: 900; }
.daily-report-list { display: grid; gap: 12px; }
.daily-report-card { overflow: hidden; border: 1px solid #dce7e1; border-radius: 13px; background: #fcfefd; }
.daily-report-card.has-difficulty { border-color: #e7d5b7; }
.daily-report-card > header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid #e6eee9; background: #f7faf8; }
.daily-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #5b9076, #347158); font-size: 15px; font-weight: 900; }
.daily-report-card header h3 { margin: 0 0 3px; color: #294b3b; font-size: 13px; }
.daily-report-card header p { margin: 0; color: #79877f; font-size: 9px; }
.daily-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.daily-report-grid section { min-height: 105px; padding: 14px 16px; border-right: 1px solid #e7eee9; border-bottom: 1px solid #e7eee9; }
.daily-report-grid section:nth-child(2n) { border-right: 0; }
.daily-report-grid section:nth-last-child(-n+2) { border-bottom: 0; }
.daily-report-grid strong { display: block; margin-bottom: 7px; color: #47705c; font-size: 10px; }
.daily-report-grid p { margin: 0; color: #53675d; font-size: 11px; line-height: 1.75; white-space: pre-wrap; }
.daily-report-grid .daily-difficulty strong { color: #9a6427; }
.daily-report-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 9px; padding: 14px 15px; border-top: 1px solid #e7eee9; background: #fafcfb; }
.daily-report-images a { display: grid; gap: 5px; min-width: 0; color: #61766a; font-size: 9px; text-decoration: none; }
.daily-report-images img { width: 100%; height: 110px; object-fit: cover; border: 1px solid #dce7e1; border-radius: 8px; background: #f1f4f2; }
.daily-report-images span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-empty { padding: 36px 20px; border: 1px dashed #cfded5; border-radius: 12px; color: #6e8076; background: #f9fbfa; text-align: center; }
.daily-empty strong { color: #496556; font-size: 14px; }
.daily-empty p { margin: 6px 0 0; font-size: 11px; }
.daily-report-dialog { width: min(920px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow: auto; }
.daily-report-dialog .plan-form { width: auto; max-width: none; }
.daily-report-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.daily-report-fields label { min-width: 0; }
.daily-report-fields textarea::placeholder { color: #a1aba5; opacity: 1; }
.daily-existing-images { display: grid; gap: 8px; }
.daily-existing-images > span { color: #65796d; font-size: 10px; }
.daily-existing-images .daily-report-images { padding: 0; border: 0; background: transparent; }

@media (max-width: 760px) {
  .knowledge-searchbar, .knowledge-file-grid { grid-template-columns: 1fr; }
  .knowledge-file-card { grid-template-columns: 42px minmax(0, 1fr); }
  .knowledge-download { grid-column: 1 / -1; width: 100%; }
  .knowledge-risk { flex-direction: column; gap: 6px; }
  .supplier-status-panel { flex-wrap: wrap; }
  .service-product-grid, .service-analysis-grid { grid-template-columns: 1fr; }
  .service-milestones { grid-template-columns: 1fr; }
  .customer-product-grid { grid-template-columns: 1fr; }
  .inventory-filter-bar { grid-template-columns: 1fr; margin: 0 14px 14px; }
  .inventory-filter-reset { width: 100%; }
  .inventory-filter-empty { margin-right: 14px; margin-left: 14px; }
  .daily-head-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .daily-head-actions input, .daily-head-actions button { width: 100%; }
  .daily-pending, .daily-report-grid, .daily-report-fields { grid-template-columns: 1fr; }
  .daily-pending > div:last-child { justify-content: flex-start; }
  .daily-report-grid section, .daily-report-grid section:nth-child(2n), .daily-report-grid section:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid #e7eee9; }
  .daily-report-grid section:last-child { border-bottom: 0; }
  .daily-report-card > header { grid-template-columns: 38px minmax(0, 1fr); }
  .daily-report-card > header button { grid-column: 1 / -1; width: 100%; }
  .daily-report-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .service-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-analysis-grid { grid-template-columns: 1fr; }
  .customer-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.project-table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.project-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; }
.project-table th, .project-table td { border-top: 1px solid #edf2ee; padding: 14px 16px; text-align: left; vertical-align: middle; }
.project-table th { position: sticky; top: 0; z-index: 1; background: #f2f7f3; color: #65776d; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.project-table tr { cursor: pointer; transition: background .14s ease; }
.project-table tbody tr:hover { background: #f8fcf9; }
.project-table .active-row { background: linear-gradient(90deg, #eff9f2, #fbfdfb); box-shadow: inset 4px 0 0 var(--green); }
.project-table small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.project-table td:first-child { min-width: 250px; }
.simple-table { min-width: 820px; }.simple-table td:last-child { width: 108px; }.open-project-btn { padding: 7px 10px; font-size: 12px; }
.compact-progress { width: 112px; height: 7px; margin-top: 8px; }.action-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; background: #edf5ef; color: #276247; font-size: 12px; font-weight: 800; white-space: nowrap; }.action-pill.action-approval { background: #fff0df; color: #a2650e; }.update-time { color: #687a70; font-size: 12px; white-space: nowrap; }
.project-code { display: block; color: #173e2f; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 15px; letter-spacing: .025em; }
.project-table .project-name { margin-top: 5px; color: #345244; font-size: 13px; font-weight: 700; }

.stage-pill, .status { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; margin-right: 7px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.stage-pill { background: var(--blue-soft); color: var(--blue); }
.status-doing { background: var(--amber-soft); color: var(--amber); }
.status-waiting { background: var(--red-soft); color: var(--red); }
.status-done { background: var(--green-soft); color: var(--green); }
.status-paused { background: #edf0ee; color: #657069; }
.waiting { color: var(--red); font-weight: 800; }
.progress { width: 126px; height: 8px; overflow: hidden; border-radius: 999px; background: #e8eeea; box-shadow: inset 0 1px 1px rgba(14, 55, 38, .06); }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #51aa83); }

.detail-card { margin-top: 22px; padding-bottom: 20px; overflow: hidden; }
.flow-box { margin: 0 21px 17px; padding: 15px; background: linear-gradient(115deg, #f4fbf6, #fff); }
.flow-box strong { display: block; margin-bottom: 6px; color: #1a503b; }
.flow-box p { margin: 0; color: var(--muted); line-height: 1.6; }
.workflow-actions { flex-wrap: wrap; margin: 13px 0 0; }
.schedule-card { margin: 0 21px 17px; padding: 16px; border: 1px solid #dce9e1; border-radius: 11px; background: linear-gradient(135deg, #f9fcfa, #f1f7f4); }
.team-card { margin: 0 21px 17px; padding: 16px; border: 1px solid #dce9e1; border-radius: 11px; background: linear-gradient(135deg, #fbfdfb, #f4f8fb); }
.parallel-design-panel { margin: 0 21px 17px; padding: 16px; border: 1px solid #cfe3d7; border-radius: 11px; background: linear-gradient(135deg, #f7fcf8, #f2f7fc); }
.project-inventory-bridge { margin: 0 21px 17px; padding: 16px; border: 1px solid #cde3d9; border-radius: 11px; background: linear-gradient(135deg, #f7fcfa, #f3f8fd); }
.project-inventory-bridge .eyebrow { margin: 0 0 4px; color: #38806a; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.project-inventory-receipts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.project-inventory-receipts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #dcebe3; border-radius: 9px; background: rgba(255,255,255,.8); }
.project-inventory-receipts li > div { display: grid; gap: 4px; }.project-inventory-receipts strong { color: #245a43; }.project-inventory-receipts span { color: #63776c; font-size: 12px; }
.bridge-pending, .bridge-done { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-size: 11px; }.bridge-pending { color: #9a6811; background: #fff3db; }.bridge-done { color: #277552; background: #e5f5ec; }
.project-inventory-receipts .bridge-empty { justify-content: flex-start; color: #7c8d83; }
.parallel-design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.parallel-design-card { display: grid; gap: 10px; padding: 13px; border: 1px solid #d9e8df; border-radius: 9px; background: #fff; }.parallel-design-card strong { display: block; margin-top: 7px; color: #20563f; }.parallel-design-card p { margin: 5px 0 0; color: #61736a; font-size: 12px; line-height: 1.55; }
.team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.team-role { display: grid; gap: 6px; min-width: 0; padding: 10px; border: 1px solid #e1eae4; border-radius: 8px; background: rgba(255,255,255,.82); }
.team-role span { color: var(--muted); font-size: 11px; font-weight: 800; }.team-role strong { overflow: hidden; color: #285440; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.team-role.manager { border-color: #c9e1d3; background: #edf8f1; }
.schedule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.schedule-head h3 { margin: 0 0 4px; color: #1b503b; }
.schedule-head p { margin: 0; color: var(--muted); font-size: 12px; }
.calendar-card { padding: 20px; border-color: #cddfd3; background: #fff; box-shadow: 0 10px 25px rgba(25, 82, 55, .06); }
.calendar-card .schedule-head { align-items: center; padding-bottom: 14px; border-bottom: 1px solid #e3ece6; }.calendar-card .schedule-head h3 { font-size: 17px; }
.calendar-actions { display: flex; align-items: center; gap: 8px; }.calendar-actions strong { min-width: 106px; color: #285440; text-align: center; }
.calendar-actions .secondary { min-width: 34px; padding-inline: 9px; font-size: 17px; line-height: 1; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: -3px 0 12px; color: var(--muted); font-size: 11px; }.legend-progress { color: #226e52; font-weight: 800; }.legend-today { color: #c44949; font-weight: 800; }.legend-file { color: #3b71b8; font-weight: 800; }
.calendar-phase-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: -3px 0 14px; }.calendar-phase-key { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #dde8e1; border-radius: 99px; background: #fbfdfc; color: #496257; font-size: 11px; font-weight: 700; }.calendar-phase-key i { width: 9px; height: 9px; border-radius: 3px; background: var(--phase-color); }.calendar-phase-key.phase-0 { --phase-color:#6da8df; }.calendar-phase-key.phase-1 { --phase-color:#73ba8b; }.calendar-phase-key.phase-2 { --phase-color:#9b83ca; }.calendar-phase-key.phase-3 { --phase-color:#d1ab63; }.calendar-phase-key.phase-4 { --phase-color:#d37878; }.calendar-phase-key.phase-5 { --phase-color:#5da6a1; }
.project-calendar { overflow-x: auto; border: 1px solid #d4e3d9; border-radius: 11px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.calendar-weekdays, .calendar-week { display: grid; min-width: 790px; grid-template-columns: repeat(7, minmax(110px, 1fr)); }
.calendar-weekdays { border-bottom: 1px solid #dce8e0; background: linear-gradient(90deg, #edf7f1, #f3f7fc); }.calendar-weekdays div { padding: 9px; border-right: 1px solid #dce8e0; color: #507062; font-size: 12px; font-weight: 800; text-align: center; }.calendar-weekdays div:last-child { border-right: 0; }
.calendar-week { grid-template-rows: repeat(var(--tracks), 30px); min-height: calc(var(--tracks) * 30px); border-bottom: 1px solid #e3ebe6; position: relative; }.calendar-week:last-child { border-bottom: 0; }
.calendar-day { z-index: 1; padding: 5px 8px; border-right: 1px solid #e4ece7; pointer-events: none; }.calendar-day:nth-child(7) { border-right: 0; }.calendar-day span { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #4d6559; font-size: 11px; font-weight: 700; }.calendar-day.outside { background: #fafcfb; }.calendar-day.outside span { color: #b8c3bc; }.calendar-day.today span { background: #c74949; color: #fff; box-shadow: 0 2px 7px rgba(189, 58, 58, .28); }.calendar-file-marker { display: inline-block; margin-left: 3px; color: #3975bf; font-size: 10px; vertical-align: top; }
.calendar-bar { z-index: 3; align-self: end; height: 23px; margin: 0 4px 4px; overflow: hidden; border: 1px solid var(--bar-border); border-radius: 6px; background: linear-gradient(90deg, var(--bar-strong) 0 var(--bar-progress), var(--bar-soft) var(--bar-progress) 100%); box-shadow: 0 3px 7px rgba(30, 74, 51, .12); color: #173e2e; font-size: 10px; font-weight: 800; line-height: 21px; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px rgba(255,255,255,.25); white-space: nowrap; }
.calendar-bar.phase-0 { --bar-strong:#6da8df; --bar-soft:#dcecfb; --bar-border:#5b94ca; }.calendar-bar.phase-1 { --bar-strong:#73ba8b; --bar-soft:#dcf2e3; --bar-border:#62a47a; }.calendar-bar.phase-2 { --bar-strong:#9b83ca; --bar-soft:#ece5fb; --bar-border:#896fba; }.calendar-bar.phase-3 { --bar-strong:#d1ab63; --bar-soft:#f8eed4; --bar-border:#bc9650; }.calendar-bar.phase-4 { --bar-strong:#d37878; --bar-soft:#fae2e2; --bar-border:#bc6565; }.calendar-bar.phase-5 { --bar-strong:#5da6a1; --bar-soft:#d9f0ed; --bar-border:#4c918c; }
.calendar-bar.done { --bar-progress:100% !important; opacity:.78; }.calendar-bar.paused { filter: grayscale(.85); opacity:.6; }.calendar-bar.waiting { background-image: repeating-linear-gradient(135deg, var(--bar-strong) 0 7px, var(--bar-soft) 7px 14px); }
.gantt-wrap { overflow-x: auto; padding-bottom: 4px; }
.gantt-board { min-width: 800px; }
.gantt-days, .gantt-row { display: grid; grid-template-columns: 152px 1fr; }
.gantt-days { position: sticky; top: 92px; z-index: 2; background: #f4f9f6; border: 1px solid #e1ebe4; border-radius: 8px 8px 0 0; }
.gantt-label-head { padding: 8px 10px; color: var(--muted); font-size: 11px; font-weight: 800; }
.gantt-date-grid, .gantt-track { display: grid; grid-template-columns: repeat(var(--days), minmax(22px, 1fr)); }
.gantt-date-grid span { padding: 7px 0; border-left: 1px solid #e6eee9; color: #75857c; font-size: 10px; text-align: center; }
.gantt-row { min-height: 52px; border: 1px solid #e5ede8; border-top: 0; background: rgba(255,255,255,.7); }
.gantt-row:last-child { border-radius: 0 0 8px 8px; }
.gantt-row-label { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 10px; border-right: 1px solid #e5ede8; }
.gantt-row-label strong { color: #284e3b; font-size: 12px; }
.gantt-row-label small { color: var(--muted); font-size: 11px; }
.gantt-track { position: relative; align-items: center; background-image: linear-gradient(90deg, #edf2ef 1px, transparent 1px); background-size: calc(100% / var(--days)) 100%; }
.gantt-bar { z-index: 1; height: 24px; margin: 0 2px; overflow: hidden; border-radius: 6px; background: linear-gradient(90deg, #298261, #4eaa82); color: #fff; font-size: 10px; font-weight: 800; line-height: 24px; text-align: center; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 3px 7px rgba(25, 106, 76, .18); }
.gantt-bar.waiting { background: linear-gradient(90deg, #d58d27, #e6b65a); }
.gantt-bar.done { background: linear-gradient(90deg, #6f9380, #94b09f); }
.gantt-bar.paused { background: linear-gradient(90deg, #8b9190, #adb4b0); }
.schedule-empty { margin: 0; padding: 18px; border: 1px dashed #bfd6c7; border-radius: 8px; color: var(--muted); text-align: center; }
.activity-list { position: relative; padding: 0 21px 18px 29px; }
.record-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-right: 21px; }.record-head .section-title { margin-left: 21px; }.activity-toggle { font-size: 12px; }
.activity-list::before { position: absolute; left: 32px; top: 7px; bottom: 24px; width: 1px; background: #d8e7de; content: ""; }
.activity-item { position: relative; padding: 12px 13px; border-left: 3px solid #81c8a4; font-size: 13px; }
.activity-item::before { position: absolute; left: -8px; top: 17px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px #8bc9a7; content: ""; }
.activity-item time { color: var(--muted); font-size: 12px; }
.material-link { display: inline-block; margin-top: 7px; color: var(--blue); font-weight: 700; text-decoration: none; }
.material-link:hover { text-decoration: underline; }

.edit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 2px 21px 17px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #d5e0d9; border-radius: 9px; outline: none; background: #fff; color: var(--ink); padding: 10px 11px; transition: border-color .16s ease, box-shadow .16s ease; }
.progress-editor > div { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 11px; border: 1px solid #d5e0d9; border-radius: 9px; background: #fff; }.progress-editor input[type="range"] { flex: 1; padding: 0; accent-color: var(--green); }.progress-editor output { min-width: 42px; color: var(--green); font-weight: 800; text-align: right; }
input:focus, select:focus, textarea:focus { border-color: #58a884; box-shadow: 0 0 0 3px rgba(62, 157, 113, .14); }
textarea { resize: vertical; min-height: 76px; }
.wide { grid-column: 1 / -1; }
.detail-actions { justify-content: flex-end; padding: 0 21px; }

.primary, .secondary, .danger { border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 800; cursor: pointer; }
.primary { border: 1px solid var(--green); background: linear-gradient(135deg, #237c5e, #17674e); color: #fff; box-shadow: 0 5px 12px rgba(25, 103, 78, .18); }
.primary:hover { box-shadow: 0 8px 16px rgba(25, 103, 78, .24); }
.secondary, .danger { border: 1px solid #d6e0d9; background: rgba(255,255,255,.88); }
.secondary { color: #486157; }
.secondary:hover { border-color: #9dc7ae; background: #f4faf6; }
.danger { color: var(--red); }
.danger:hover { border-color: #efbfc1; background: var(--red-soft); }

dialog { width: min(520px, calc(100vw - 32px)); border: 1px solid #e1e9e4; border-radius: 15px; padding: 0; box-shadow: 0 28px 75px rgba(18, 55, 38, .26); }
#noticeDialog { width: min(460px, calc(100vw - 32px)); border-color: #d8e6dc; overflow: hidden; }.notice-panel { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 24px; background: linear-gradient(135deg, #fbfdfc, #f4faf6); }.notice-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e0f1e7; color: #1c7451; font-family: Georgia, serif; font-size: 22px; font-weight: 700; }.notice-panel .eyebrow { margin: 1px 0 5px; color: #5b8d72; font-size: 10px; }.notice-panel h2 { margin: 0; color: #1a503b; font-size: 20px; }.notice-message { grid-column: 2; margin: -6px 0 0; color: #50665b; font-size: 14px; line-height: 1.7; white-space: pre-line; }.notice-actions { grid-column: 1 / -1; margin-top: 2px; }.notice-actions button { min-width: 92px; }
#inventoryPurchaseDialog { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 28px); overflow: auto; }.inventory-purchase-head { margin-top: 2px; }.dialog-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.dialog-titlebar h2 { margin: 0; }#inventoryPurchaseDialog .plan-form { width: auto; max-width: none; }.inventory-purchase-dialog.is-maximized { width: calc(100vw - 24px); max-width: none; height: calc(100vh - 24px); max-height: none; }.inventory-purchase-dialog.is-maximized .dialog-form { min-height: 100%; }
#planDialog { width: min(1060px, calc(100vw - 32px)); }
#tutorialDialog { width: min(1000px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(23, 42, 33, .32); backdrop-filter: blur(2px); }
.dialog-form { display: grid; gap: 15px; padding: 24px; }
.plan-form { width: min(1060px, calc(100vw - 32px)); }
.plan-editor { display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.plan-edit-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.2fr; gap: 9px; align-items: end; padding: 10px; border: 1px solid #e0e9e3; border-radius: 9px; background: #fafcfb; }
.plan-edit-row strong { grid-column: 1 / -1; color: #29513e; font-size: 13px; }
.tutorial-dialog { width: min(1000px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 32px)); overflow: auto; padding: 27px; }
.tutorial-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 18px; border-bottom: 1px solid #e3ece6; }
.tutorial-head h2 { margin-bottom: 7px; }.tutorial-head p { margin-bottom: 0; color: var(--muted); }
.tutorial-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0; padding: 14px; overflow-x: auto; border-radius: 11px; background: linear-gradient(90deg, #eef8f2, #f2f6fb); color: #245942; font-size: 12px; font-weight: 800; white-space: nowrap; }
.tutorial-flow div { padding: 8px 10px; border: 1px solid #d2e5d8; border-radius: 7px; background: #fff; }.tutorial-flow span { color: #61a780; }
.tutorial-section { margin-top: 22px; }.tutorial-section h3 { margin: 0 0 10px; color: #1c503b; }.tutorial-section ol { margin: 0; padding-left: 21px; color: #50665b; line-height: 2; }
.tutorial-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tutorial-stage { padding: 11px; border: 1px solid #deebe3; border-radius: 9px; background: #fafcfb; }.tutorial-stage strong { display: block; color: #265943; font-size: 12px; }.tutorial-stage span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.tutorial-tip { margin-top: 20px; padding: 12px; border: 1px solid #d8e7de; border-radius: 9px; background: #f2faf5; color: #466257; font-size: 12px; line-height: 1.7; }
.dialog-form h2 { margin-bottom: 0; }
.dialog-actions { justify-content: flex-end; padding-top: 3px; }
.dialog-hint { margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.checklist { padding: 11px 12px; border: 1px solid #d7e8dc; border-radius: 9px; background: #f2faf4; color: #38614b; font-size: 12px; line-height: 1.7; }
.checklist strong { display: block; color: #1a503b; }
.checklist ul { margin: 5px 0 0; padding-left: 18px; }
.deadline { display: inline-flex; align-items: center; margin-top: 5px; padding: 2px 7px; border-radius: 999px; background: #edf3ef; color: #66766e; font-size: 11px; font-weight: 700; }
.deadline.overdue { background: var(--red-soft); color: var(--red); }
.deadline.near { background: var(--amber-soft); color: var(--amber); }
.upload-tip { color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 400; }
.material-upload-section { display: grid; gap: 11px; }.material-upload-section > div:first-child { display: grid; gap: 3px; }.material-upload-section strong { color: #1b503b; }.material-upload-section small { color: var(--muted); font-size: 12px; line-height: 1.5; }.material-upload-fields { display: grid; gap: 9px; }.material-file-field { gap: 6px; padding: 12px; border: 1px solid #d8e8dd; border-radius: 10px; background: #fbfdfb; }.material-file-field > span { color: #285c44; font-size: 13px; font-weight: 800; }.material-file-field.is-other { border-style: dashed; background: #f8faf9; }.material-file-field input { padding: 8px; background: #fff; }
.material-file-picker { position: relative; display: inline-flex; align-self: start; overflow: hidden; border: 1px solid #9cc8ad; border-radius: 8px; background: #fff; color: #1f6849; cursor: pointer; }
.material-file-picker:hover { border-color: #438d69; background: #eef8f1; }
.material-file-picker input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.material-file-picker b { padding: 8px 12px; font-size: 12px; }
.saved-material-files { display: grid; gap: 6px; padding: 9px 10px; border: 1px solid #cce4d5; border-radius: 8px; background: #edf8f1; }
.saved-material-files > strong { color: #246447; font-size: 11px; }
.saved-material-files a { color: #1d6244; font-size: 12px; font-weight: 800; text-decoration: underline; }
.saved-material-files small { margin-left: 5px; color: #5b7568; font-weight: 500; }
.selected-files { display: grid; gap: 6px; margin-top: -5px; }
.selected-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--green-soft); color: #315c46; font-size: 12px; }
.selected-file a { min-width: 0; overflow: hidden; color: inherit; font-weight: 800; text-decoration: underline; text-overflow: ellipsis; white-space: nowrap; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.attachment-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 5px 9px; overflow: hidden; border: 1px solid #cbe2d3; border-radius: 999px; background: #fff; color: var(--green); font-size: 12px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.attachment-link:hover { background: #edf8f0; }
.approval-material-preview { display: grid; gap: 7px; padding: 13px; border: 1px solid #cfe5d7; border-radius: 11px; background: linear-gradient(135deg, #f2faf5, #fff); }
.approval-material-preview > strong { color: #1b563e; font-size: 14px; }
.approval-material-preview > span, .material-stage { color: #3d765a !important; font-size: 12px; font-weight: 800; }
.approval-material-preview > p { margin: 0; color: #5e7066; font-size: 12px; line-height: 1.6; }

.project-command { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px auto; gap: 22px; align-items: center; padding: 28px 28px 25px; background: linear-gradient(110deg, #f4fbf6 0%, #fff 62%, #f4f8fd 100%); }.project-command h2 { margin: 0 0 7px; color: #163e2e; font-size: 25px; }.project-command > div:first-child > p:last-child { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.65; }.project-progress-display { position: relative; display: grid; place-items: center; width: 104px; height: 104px; text-align: center; }.project-progress-display::before { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#278360 var(--project-progress), #e6eee9 0); content: ""; }.project-progress-display::after { position: absolute; inset: 8px; border-radius: 50%; background: #fff; content: ""; }.project-progress-display strong, .project-progress-display span { position: relative; z-index: 1; }.project-progress-display strong { color: #1e6449; font-size: 20px; letter-spacing: -.04em; }.project-progress-display span { margin-top: -25px; color: var(--muted); font-size: 10px; }.project-progress-display i { display: none; }.project-delete { align-self: start; }
.detail-tabs { display: flex; gap: 3px; padding: 0 22px; border-bottom: 1px solid #dfe8e2; background: #fff; }.detail-tab { position: relative; padding: 14px 13px 13px; border: 0; background: transparent; color: #6c7d73; font-weight: 800; cursor: pointer; }.detail-tab:hover { color: #275e45; transform: none; }.detail-tab.active { color: #176b4f; }.detail-tab.active::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 3px; border-radius: 4px 4px 0 0; background: var(--green); content: ""; }.detail-tab-panel { min-height: 340px; padding-top: 20px; }.current-node-box { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 0 18px; padding: 20px; }.current-node-box > div { padding-right: 18px; border-right: 1px solid #d9e9df; }.node-label { display: block; margin-bottom: 8px; color: #769083; font-size: 11px; font-weight: 800; }.current-node-box strong { color: #19563e; font-size: 18px; }.current-node-box .workflow-actions { grid-column: 1 / -1; }.project-admin-panel { margin: 0 21px 17px; padding: 16px 0 0; border-top: 1px solid #dfe8e2; }.project-admin-panel .schedule-head { padding: 0 16px; }.project-admin-panel .edit-grid { padding-top: 10px; }
.materials-panel { margin: 0 21px 18px; }.materials-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 1px 0 14px; border-bottom: 1px solid #dfe8e2; }.materials-head h3 { margin: 0 0 4px; color: #1b503b; }.materials-head p { margin: 0; color: var(--muted); font-size: 12px; }.materials-head > span { padding: 5px 9px; border-radius: 999px; background: #edf6f0; color: #2a6c4e; font-size: 11px; font-weight: 800; }.materials-panel > .flow-box { margin: 15px 0; }.materials-history { margin-top: 20px; }.materials-history h4 { margin: 0 0 10px; color: #254e3b; font-size: 13px; }.material-history-item { padding: 13px 14px; border-top: 1px solid #e2ebe5; }.material-history-item > div { display: flex; justify-content: space-between; gap: 16px; }.material-history-item strong { color: #21563f; }.material-history-item span { color: var(--muted); font-size: 11px; }.material-history-item p { margin: 6px 0 0; color: #5b6d63; line-height: 1.55; }.record-head > div > p { margin: -6px 0 10px 21px; color: var(--muted); font-size: 12px; }

@media (max-width: 1040px) {
  .topbar, .section-head { flex-direction: column; align-items: stretch; }
  .top-actions { flex-wrap: wrap; }
  .login-shell { grid-template-columns: 1fr; min-height: 0; }.login-story { min-height: 310px; padding: 36px 42px; }.story-kicker { margin-top: 54px; }.login-story h1 { font-size: 38px; }.story-copy { max-width: 650px; margin: 14px 0 20px; }.story-footer { display: none; }.login-card { max-width: 560px; }
  .project-command { grid-template-columns: 1fr auto; }.project-delete { grid-column: 1 / -1; justify-self: end; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-choice-head { align-items: flex-start; flex-direction: column; }
  .edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-line-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }.purchase-line-row .line-remove { grid-column: 3; justify-self: end; }.inventory-count-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-flow-card { grid-template-columns: 1fr; }.module-flow { justify-content: flex-start; }
  .inventory-attention { grid-template-columns: 1fr; }
  .finance-workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.finance-flow-preview { grid-template-columns: 1fr; }.settings-guide { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { min-height: 0; padding: 20px; }
  .dashboard { padding: 18px 14px 38px; }
  .login-screen { display: block; overflow: auto; padding: 0; }.login-shell { min-height: 100vh; border: 0; border-radius: 0; }.login-story { min-height: 0; padding: 28px 24px; }.story-brand img { width: 172px; }.story-kicker { margin-top: 42px; font-size: 9px; }.login-story h1 { font-size: 34px; }.story-copy { margin-top: 13px; font-size: 13px; }.story-principles { gap: 6px; }.story-principles div { min-width: 95px; padding: 8px 9px; }.story-principles span { font-size: 11px; }.story-culture-grid { grid-template-columns: 1fr; }.story-culture-grid div { min-height: 0; }.login-card { padding: 36px 24px 48px; }.login-card h2 { font-size: 28px; }
  .summary-grid, .edit-grid { grid-template-columns: 1fr; }
  .project-command { grid-template-columns: 1fr; padding: 21px 18px; }.project-progress-display { width: 88px; height: 88px; }.project-delete { grid-column: auto; justify-self: start; }.detail-tabs { padding: 0 10px; overflow-x: auto; }.detail-tab { flex: 0 0 auto; }.current-node-box { grid-template-columns: 1fr; }.current-node-box > div { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #d9e9df; }.current-node-box p { margin-top: 13px; }.materials-head { align-items: flex-start; flex-direction: column; }.material-history-item > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .module-grid { grid-template-columns: 1fr; }.module-hero { padding: 22px; }.business-module-head { flex-direction: column; }
  .inventory-actions { width: 100%; }.inventory-actions button { flex: 1; }.purchase-line-row, .inventory-count-row { grid-template-columns: 1fr; }.purchase-line-row .line-remove { grid-column: auto; justify-self: start; }.inventory-record summary { align-items: flex-start; flex-direction: column; }.inventory-record-detail { overflow-x: auto; }.inventory-record-detail table { min-width: 480px; }
  .module-flow-card { padding: 17px; }.module-flow { align-items: flex-start; overflow-x: auto; padding-bottom: 5px; }.module-flow-step { flex: 0 0 88px; }.module-flow-arrow { flex: 0 0 auto; padding-top: 5px; }
  .inventory-attention { padding: 16px; }.inventory-attention li { grid-template-columns: 1fr; gap: 3px; }
  .hr-position-grid, .hr-record-fields { grid-template-columns: 1fr; }.hr-record-fields .wide { grid-column: auto; }.hr-position-card summary { align-items: flex-start; flex-direction: column; gap: 5px; }.hr-position-card summary small { max-width: none; text-align: left; }
  .finance-workflow-grid { grid-template-columns: 1fr; padding: 0 15px 15px; }.finance-form-grid, .finance-detail-summary, .finance-detail-fields > div, .workflow-config-fields { grid-template-columns: 1fr; }.finance-form-grid .wide, .workflow-config-fields .wide, .workflow-enabled { grid-column: auto; }.finance-application-form { padding: 16px; }.finance-form-section { padding: 14px; }.finance-flow-preview { padding: 14px; }.finance-flow-steps { padding-bottom: 4px; }.workflow-setting-head { grid-template-columns: 45px minmax(0, 1fr); }.workflow-setting-head > b { grid-column: 2; justify-self: start; }.workflow-setting-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.workflow-setting-actions button { width: 100%; }.finance-detail-panel { padding: 17px; }
  .module-choice-head { margin-top: 0; }.module-choice-head h2 { font-size: 21px; }
  .top-actions, .top-actions > * { width: 100%; }
  .brand-lockup { align-items: flex-start; gap: 11px; }
  .brand-logo { width: 112px; }
  .brand-title { padding-left: 11px; }
  .account-switch select { min-width: 0; }
  .todo-item { align-items: flex-start; flex-direction: column; }
  .todo-item button { width: 100%; }
  .section-head, .my-work-card { padding: 17px; }
  .flow-box { margin: 0 17px 15px; }
  .schedule-card { margin: 0 17px 15px; padding: 14px; }
  .team-card { margin: 0 17px 15px; padding: 14px; }.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-head { flex-direction: column; }
  .calendar-actions { width: 100%; }.calendar-actions strong { flex: 1; }
  .edit-grid { padding-inline: 17px; }
  .detail-actions { padding-inline: 17px; }
  .activity-list { padding-inline: 25px 17px; }
  .plan-edit-row { grid-template-columns: 1fr; }
  .tutorial-dialog { padding: 20px; }.tutorial-head { flex-direction: column; }.tutorial-stages { grid-template-columns: 1fr; }
}

/* 手机端：优先保证单手操作、可读性和长内容的可浏览性。 */
@media (max-width: 480px) {
  html { -webkit-text-size-adjust: 100%; }
  body { min-width: 320px; }
  .topbar { position: static; padding: 15px 14px 14px; gap: 13px; }
  .brand-logo { width: 102px; }
  .brand-lockup { gap: 9px; }
  .brand-title { padding-left: 9px; font-size: 22px; line-height: 1.18; }
  .brand-subtitle { font-size: 9px; letter-spacing: .12em; }
  .top-actions { gap: 8px; }
  .top-actions button, .top-actions select, .top-actions .account-switch { min-height: 44px; }
  .account-switch { gap: 4px; }
  .dashboard { padding: 15px 12px calc(30px + env(safe-area-inset-bottom)); }
  .module-hero { margin-bottom: 15px; padding: 20px 18px; border-radius: 15px; }
  .module-hero h2 { font-size: 22px; line-height: 1.3; }
  .module-hero > p:last-child { font-size: 13px; line-height: 1.6; }
  .module-grid { gap: 12px; }
  .module-card { min-height: 142px; padding: 15px 17px; }
  .module-card small { position: static; display: block; margin-top: 8px; }
  .summary-grid { gap: 10px; margin-bottom: 16px; }
  .metric { padding: 15px 16px; }
  .metric strong { font-size: 27px; }
  .section-head { gap: 10px; padding: 16px 15px 13px; }
  .section-head h2 { font-size: 19px; }
  .section-head p { font-size: 12px; line-height: 1.6; }
  .business-module-head { margin-bottom: 14px; padding: 18px; border-radius: 13px; }
  .business-module-head h2 { font-size: 20px; }
  .project-table-card, .detail-card, .my-work-card { border-radius: 13px; }
  .table-wrap { margin: 0 -1px; padding-bottom: 5px; -webkit-overflow-scrolling: touch; }
  .table-wrap::after { display: block; padding: 4px 12px 0; color: var(--muted); font-size: 11px; content: "表格可左右滑动查看"; }
  .project-table { min-width: 780px; }
  .project-command { gap: 16px; padding: 19px 16px; }
  .project-command h2 { font-size: 21px; }
  .project-progress-display { width: 82px; height: 82px; }
  .detail-tabs { position: sticky; z-index: 4; top: 0; padding: 0 8px; -webkit-overflow-scrolling: touch; }
  .detail-tab { min-height: 46px; padding: 13px 12px 11px; }
  .detail-actions, .workflow-actions, .dialog-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .detail-actions { padding: 0 17px; }
  .detail-actions button, .workflow-actions button, .dialog-actions button { width: 100%; min-height: 44px; }
  .flow-box, .schedule-card, .team-card, .materials-panel, .project-admin-panel { margin-right: 15px; margin-left: 15px; }
  .materials-panel { margin-bottom: 15px; }
  .project-admin-panel { padding-top: 13px; }
  .calendar-card { padding: 14px; }
  .calendar-actions { gap: 6px; }
  .calendar-actions .secondary { min-width: 42px; min-height: 42px; }
  .dialog-form { width: auto; max-width: none; max-height: calc(100vh - 20px); padding: 19px 16px calc(19px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .plan-form { width: auto; max-width: none; }
  .login-card { padding: 32px 22px calc(38px + env(safe-area-inset-bottom)); }
  .login-card input, .login-card .primary { min-height: 50px; }
  .welcome-card { padding: 20px 18px; }
  .welcome-logo { width: 205px; }
  .welcome-card h1 { font-size: 29px; }
}

/* Final responsive overrides for the expanded procurement rows. */
.purchase-line-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.purchase-line-row .line-remove { grid-column: 4; justify-self: end; }
@media (max-width: 900px) {
  .purchase-line-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-line-row .line-remove { grid-column: 2; }
}
@media (max-width: 480px) {
  .purchase-line-row { grid-template-columns: 1fr; }
  .purchase-line-row .line-remove { grid-column: auto; justify-self: start; }
}

/* HR organization, direct attendance and persisted table sizing */
.hr-organization-section { padding-bottom: 20px; }
.hr-org-chart { padding: 0 20px; }
.hr-org-top { display: grid; justify-items: center; }
.hr-org-top > i { width: 2px; height: 22px; background: #c9d8cf; }
.hr-org-node { position: relative; display: grid; gap: 4px; width: 100%; padding: 12px 13px; border: 1px solid #dce7e0; border-radius: 10px; background: #fff; color: #274c3a; text-align: left; cursor: pointer; }
.hr-org-node:hover { border-color: #8fbda5; background: #f5fbf7; transform: translateY(-1px); }
.hr-org-node small { color: #769084; font-size: 9px; font-weight: 800; }
.hr-org-node strong { font-size: 13px; }
.hr-org-node span { color: #829188; font-size: 9px; }
.hr-org-node.is-governance, .hr-org-node.is-manager { width: min(390px, 100%); text-align: center; }
.hr-org-node.is-governance { border-color: #d9dfe6; background: #f7f9fb; }
.hr-org-node.is-manager { border-color: #acd4bc; background: #edf8f1; }
.hr-org-connector { position: relative; width: 67%; height: 28px; margin: 0 auto; border-top: 2px solid #c9d8cf; }
.hr-org-connector::before { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 18px; background: #c9d8cf; content: ""; }
.hr-org-connector::after { position: absolute; left: 0; right: 0; top: -2px; height: 18px; border-right: 2px solid #c9d8cf; border-left: 2px solid #c9d8cf; content: ""; }
.hr-org-divisions { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.hr-org-division { overflow: hidden; border: 1px solid #dfe8e3; border-radius: 13px; background: #fbfdfc; }
.hr-org-division > header { display: grid; grid-template-columns: 37px 1fr; gap: 10px; align-items: center; padding: 13px 14px; border-bottom: 1px solid #e1e9e4; background: #f2f7f4; }
.hr-org-division > header > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: #dfeee5; color: #287050; font-weight: 900; }
.hr-org-division h3 { margin: 0 0 3px; color: #315341; font-size: 14px; }
.hr-org-division p { margin: 0; color: #7d8c84; font-size: 9px; }
.hr-org-division > div { display: grid; gap: 8px; padding: 11px; }
.hr-org-node.is-child { width: calc(100% - 20px); margin-left: 20px; border-style: dashed; }
.hr-org-node.is-child::before { position: absolute; right: 100%; top: 50%; width: 20px; height: 1px; background: #c9d8cf; content: ""; }

/* 基础档案内的组织架构：强调治理链路与三类部门，避免旧版大面积空白和错位连线。 */
.master-org-panel { margin: 22px 0; overflow: hidden; border: 1px solid #dce8e1; border-radius: 18px; background: linear-gradient(145deg, #fbfefd, #f3f8f5); box-shadow: 0 10px 30px rgba(31, 86, 61, .05); }
.master-org-panel > .section-head { padding: 20px 24px 14px; border-bottom: 1px solid #e3eee8; }
.master-org-panel > .section-head > span { align-self: center; padding: 7px 11px; border-radius: 999px; background: #e5f3eb; color: #287253; font-size: 11px; font-weight: 800; }
.master-org-chart { padding: 26px 28px 30px; }
.master-org-leadership { display: grid; justify-items: center; gap: 0; }
.master-org-leadership > i { width: 2px; height: 28px; background: linear-gradient(#85b69b, #cddfd4); }
.master-org-position { position: relative; display: grid; gap: 3px; width: 100%; min-height: 82px; padding: 13px 15px; border: 1px solid #d8e6de; border-radius: 13px; background: #fff; color: #214b38; text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgba(33, 80, 57, .045); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.master-org-position:hover { z-index: 1; border-color: #62a983; box-shadow: 0 10px 20px rgba(33, 94, 65, .12); transform: translateY(-2px); }
.master-org-position > span { color: #619179; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.master-org-position > strong { font-size: 15px; line-height: 1.25; }
.master-org-position > small { color: #789084; font-size: 11px; }
.master-org-position.is-director, .master-org-position.is-general-manager { width: min(430px, 100%); text-align: center; }
.master-org-position.is-director { border-color: #c6d7e3; background: linear-gradient(135deg, #f7fafc, #eef4f8); }
.master-org-position.is-general-manager { border-color: #acd8bd; background: linear-gradient(135deg, #f4fbf7, #e8f6ee); }
.master-org-position.is-general-manager::after { position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #3d9b6c; content: ""; }
.master-org-branch { position: relative; height: 38px; width: min(82%, 1020px); margin: 0 auto; border-top: 2px solid #bad4c4; }
.master-org-branch::before, .master-org-branch::after { position: absolute; top: -2px; width: 2px; height: 20px; background: #bad4c4; content: ""; }
.master-org-branch::before { left: 0; }
.master-org-branch::after { right: 0; }
.master-org-branch > i { position: absolute; left: 50%; top: -30px; width: 2px; height: 30px; background: #bad4c4; }
.master-org-groups { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.master-org-group { overflow: hidden; border: 1px solid #dce8e1; border-radius: 15px; background: rgba(255,255,255,.82); }
.master-org-group > header { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; min-height: 68px; padding: 13px 15px; border-bottom: 1px solid #e5eee9; }
.master-org-group > header > b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 16px; }
.master-org-group h3 { margin: 0 0 3px; color: #315744; font-size: 15px; }
.master-org-group p { margin: 0; color: #7e9286; font-size: 11px; }
.master-org-group.is-business > header { background: #eef8f2; }
.master-org-group.is-business > header > b { background: #d8efdf; color: #20704d; }
.master-org-group.is-support > header { background: #f3f6fb; }
.master-org-group.is-support > header > b { background: #e2eafb; color: #496ea8; }
.master-org-group.is-sales > header { background: #fff7ea; }
.master-org-group.is-sales > header > b { background: #ffebca; color: #a66a19; }
.master-org-position-list { display: grid; gap: 9px; padding: 12px; }
.master-org-position.is-subordinate { width: calc(100% - 16px); min-height: 72px; margin-left: 16px; border-style: dashed; }
.master-org-position.is-subordinate::before { position: absolute; right: 100%; top: 50%; width: 16px; height: 1px; background: #c9dacf; content: ""; }
.master-hr-tabs { margin-bottom: 0; }

@media (max-width: 780px) {
  .master-org-chart { padding: 18px 14px 20px; }
  .master-org-position.is-director, .master-org-position.is-general-manager { width: 100%; }
  .master-org-branch { width: 2px; height: 26px; margin: 0 auto; border: 0; background: #bad4c4; }
  .master-org-branch::before, .master-org-branch::after, .master-org-branch > i { display: none; }
  .master-org-groups { grid-template-columns: 1fr; }
}

.hr-position-dialog { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 24px); overflow: auto; }
.hr-position-dialog-panel { gap: 16px; }
.hr-position-dialog-content { display: grid; gap: 13px; }
.hr-position-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hr-position-meta > div { display: grid; gap: 5px; padding: 11px; border-radius: 9px; background: #f5f8f6; }
.hr-position-meta span { color: #7b8981; font-size: 10px; }
.hr-position-meta strong { color: #3e594b; font-size: 12px; }
.hr-position-dialog-content section { padding: 14px; border: 1px solid #e0e8e3; border-radius: 10px; }
.hr-position-dialog-content h3 { margin: 0 0 8px; color: #31513f; font-size: 14px; }
.hr-position-dialog-content p, .hr-position-dialog-content ol { margin: 0; color: #5f7067; font-size: 12px; line-height: 1.75; }
.hr-position-dialog-content ol { padding-left: 20px; }
.hr-position-source { margin: 0 !important; padding: 9px 11px; border-radius: 8px; background: #f4f8f5; color: #567466 !important; font-size: 11px !important; font-weight: 800; }
.hr-position-prose { display: grid; gap: 8px; }.hr-position-prose p { margin: 0 !important; }
.hr-position-list { display: grid; gap: 8px; margin: 0; padding-left: 19px; color: #5f7067; font-size: 12px; line-height: 1.65; }
.hr-position-responsibilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.hr-position-responsibilities article { padding: 11px; border: 1px solid #e0e9e3; border-radius: 9px; background: #fafcfb; }.hr-position-responsibilities span { color: #6e9180; font-size: 10px; font-weight: 900; letter-spacing: .06em; }.hr-position-responsibilities h4 { margin: 6px 0 7px; color: #365945; font-size: 13px; }.hr-position-responsibilities ol { display: grid; gap: 6px; padding-left: 18px; font-size: 11px; line-height: 1.6; }
.resizable-data-table { min-width: 100%; table-layout: fixed; }
.hr-dual-grid, .hr-dual-grid > section, .hr-section, .business-module-table { min-width: 0; max-width: 100%; }
.business-module-table .table-wrap { width: 100%; max-width: 100%; contain: inline-size; overflow-x: auto; }
.resizable-data-table th { position: relative; }
.resizable-data-table th > span { display: block; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resizable-data-table td { overflow: hidden; vertical-align: top; }
.table-column-resizer { position: absolute; z-index: 2; right: -5px; top: 0; width: 11px; min-width: 11px; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: col-resize; touch-action: none; }
.table-column-resizer::after { position: absolute; right: 5px; top: 24%; width: 2px; height: 52%; border-radius: 2px; background: #b8c9bf; content: ""; opacity: .55; }
.table-column-resizer:hover::after, .table-column-resizer:active::after { background: #2d8b64; opacity: 1; }
.hr-project-list summary { display: inline-flex; padding: 6px 9px; border: 1px solid #d9e7df; border-radius: 8px; background: #f7fbf8; color: #2c654c; font-size: 11px; font-weight: 800; cursor: pointer; }
.hr-project-list[open] summary { margin-bottom: 7px; }
.hr-project-list .hr-project-stack { max-height: 220px; overflow-y: auto; }

@media (max-width: 900px) {
  .hr-org-divisions { grid-template-columns: 1fr; }
  .hr-org-connector { width: 2px; height: 22px; border: 0; background: #c9d8cf; }
  .hr-org-connector::before, .hr-org-connector::after { display: none; }
}

@media (max-width: 480px) {
  .hr-org-chart { padding: 0 14px; }
  .hr-position-meta { grid-template-columns: 1fr; }
  .hr-position-dialog-panel { padding: 17px; }
}

@media (max-width: 760px) { .hr-position-responsibilities { grid-template-columns: 1fr; } }

.finance-flow-steps small { color: #947b50; font-size: 9px; white-space: nowrap; }
.workflow-setting-steps i > span { display: grid; gap: 2px; }
.workflow-setting-steps i small { color: #8b9991; font-size: 9px; font-weight: 600; letter-spacing: 0; }
.workflow-approver-config { display: grid; gap: 10px; padding: 13px; border: 1px solid #dfe7e2; border-radius: 10px; background: #f8faf9; }
.workflow-approver-config > div:first-child { display: grid; gap: 3px; }
.workflow-approver-config strong { color: #385344; font-size: 12px; }
.workflow-approver-config small { color: #7a8981; font-size: 10px; line-height: 1.5; }
.workflow-approver-config #workflowApproverRows { display: grid; gap: 8px; }
.workflow-approver-config label { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.2fr); gap: 10px; align-items: center; }
.workflow-approver-config label > span { display: flex; align-items: center; gap: 7px; color: #52685c; font-size: 11px; font-weight: 800; }
.workflow-approver-config label b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e3eee7; color: #397058; font-size: 9px; }
.finance-detail-history { display: grid; gap: 9px; padding: 15px; border: 1px solid #e2e8e4; border-radius: 11px; background: #fafcfb; }
.finance-detail-history h3 { margin: 0 0 2px; color: #31513f; font-size: 14px; }
.finance-detail-history article { display: grid; gap: 5px; padding: 10px 11px; border-left: 3px solid #8db8a1; border-radius: 7px; background: #fff; }
.finance-detail-history article > div { display: flex; justify-content: space-between; gap: 10px; }
.finance-detail-history article strong { color: #405b4d; font-size: 11px; }
.finance-detail-history article span { color: #829087; font-size: 9px; }
.finance-detail-history article p { margin: 0; color: #617169; font-size: 10px; line-height: 1.55; }
.finance-draft-actions { display: flex; justify-content: flex-end; gap: 9px; }
.finance-detail-panel #financeApprovalCommentWrap[hidden], .finance-detail-panel #financeApprovalActions[hidden] { display: none !important; }
.password-change-panel { width: min(520px, calc(100vw - 28px)); }
.password-change-fields { display: grid; gap: 10px; margin-top: 15px; }
.password-change-fields label { display: grid; gap: 5px; color: #53665b; font-size: 11px; font-weight: 800; }
.password-change-fields input { width: 100%; }

@media (max-width: 640px) {
  .workflow-approver-config label { grid-template-columns: 1fr; }
}

.master-type-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.master-type-tab { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 12px 15px; border: 1px solid #d9e7df; border-radius: 13px; background: #fff; color: #52665b; }
.master-type-tab span { font-size: 13px; font-weight: 850; }
.master-type-tab strong { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 10px; background: #edf5f0; color: #247251; }
.master-type-tab.is-active { border-color: #5aa583; box-shadow: 0 8px 22px rgba(38, 104, 76, .10); color: #175a3f; }
.master-control-note { margin-bottom: 14px; }
.master-data-dialog { width: min(780px, calc(100vw - 28px)); }
.master-data-dialog .dialog-form { width: 100%; }
.master-data-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.master-data-fields label { display: grid; gap: 6px; color: #52665b; font-size: 11px; font-weight: 800; }
.master-data-fields .wide { grid-column: 1 / -1; }
.master-data-fields input, .master-data-fields select, .master-data-fields textarea { width: 100%; }
.settings-backup-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin: 14px 0; padding: 20px; border: 1px solid #d9e7df; border-radius: 15px; background: linear-gradient(135deg, #f8fcf9, #f2f7f4); }
.number-rule-card { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: end; margin: 14px 0; padding: 20px; border: 1px solid #dce5e0; border-radius: 15px; background: #fff; }
.number-rule-card h2 { margin: 3px 0 5px; color: #304f3e; font-size: 17px; }
.number-rule-card p { margin: 0; color: #7b8881; font-size: 10px; }
.number-rule-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.number-rule-grid label { display: grid; gap: 5px; color: #65766d; font-size: 9px; font-weight: 800; }
.number-rule-grid input { width: 100%; text-transform: uppercase; }
.settings-backup-card h2 { margin: 3px 0 5px; color: #244d39; font-size: 18px; }
.settings-backup-card p { margin: 0; color: #708078; font-size: 11px; line-height: 1.6; }
.backup-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.backup-list a, .backup-list > span { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e0e9e3; border-radius: 9px; background: #fff; color: #496254; text-decoration: none; font-size: 10px; }
.backup-list a:hover { border-color: #72a88d; }
.backup-list span { color: #86938c; }
.workflow-module-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 0 0 16px; }
.workflow-module-tab { display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; align-items: center; min-height: 54px; padding: 9px 11px; border: 1px solid #dfe7e3; border-radius: 11px; background: #fff; color: #52685c; text-align: left; }
.workflow-module-tab b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #edf4f0; color: #347157; font-size: 11px; }
.workflow-module-tab span { font-size: 11px; font-weight: 800; }
.workflow-module-tab small { min-width: 21px; padding: 3px 6px; border-radius: 999px; background: #f1f4f2; color: #7a8981; font-size: 9px; text-align: center; }
.workflow-module-tab.is-active { border-color: #4f9d79; background: #f2f9f5; box-shadow: 0 8px 18px rgba(44, 111, 80, .10); color: #206247; }
.workflow-form-summary { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; margin: 13px 0 0; padding: 10px 12px; border: 1px dashed #d9e4de; border-radius: 9px; background: #fbfdfc; }
.workflow-form-summary strong { color: #3c5949; font-size: 10px; }
.workflow-form-summary span { padding: 3px 7px; border-radius: 999px; background: #eaf4ee; color: #2d6f50; font-size: 9px; font-weight: 800; }
.workflow-form-summary small { color: #7c8a82; font-size: 9px; text-align: right; }
.workflow-form-designer { display: grid; gap: 8px; padding: 13px; border: 1px solid #dfe7e2; border-radius: 10px; background: #f8faf9; }
.workflow-form-designer > div { display: grid; gap: 3px; }
.workflow-form-designer strong { color: #385344; font-size: 12px; }
.workflow-form-designer small { color: #7a8981; font-size: 10px; line-height: 1.5; }
.workflow-form-designer textarea { width: 100%; }
.settings-advanced { margin-top: 18px; border: 1px solid #dfe6e2; border-radius: 13px; background: #fff; }
.settings-advanced > summary { padding: 15px 18px; color: #4c6256; font-size: 12px; font-weight: 800; cursor: pointer; }
.settings-advanced .number-rule-card, .settings-advanced .settings-backup-card { margin: 0 16px 16px; box-shadow: none; }

/* 设置中心：按业务系统分级，业务配置与全局配置分离。 */
.settings-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-directory { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-x: hidden; overflow-y: auto; border: 1px solid #dce5e0; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.settings-directory-intro { display: grid; gap: 4px; padding: 17px 16px; border-bottom: 1px solid #e7ece9; background: linear-gradient(135deg, #f8faf9, #f1f6f3); }
.settings-directory-intro strong { color: #2f4f3e; font-size: 15px; }
.settings-directory-intro span { color: #7a8981; font-size: 10px; line-height: 1.5; }
.settings-directory-group { display: grid; gap: 5px; padding: 13px 10px; }
.settings-directory-group + .settings-directory-group { border-top: 1px solid #edf1ef; }
.settings-directory-group h3 { margin: 0; padding: 2px 8px 6px; color: #8a9690; font-size: 10px; letter-spacing: .12em; }
.settings-directory-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #4d6357; text-align: left; cursor: pointer; }
.settings-directory-item:hover { border-color: #dfe9e3; background: #f7faf8; }
.settings-directory-item.is-active { border-color: #bcd8c9; background: #edf7f1; color: #1f6748; box-shadow: inset 3px 0 #2a8059; }
.settings-directory-item > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #edf2ef; color: #557064; font-size: 11px; }
.settings-directory-item.is-active > b { background: #d8eee2; color: #23734f; }
.settings-directory-item > span { display: grid; gap: 2px; font-size: 12px; font-weight: 800; }
.settings-directory-item small { overflow: hidden; color: #8a9690; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.settings-directory-item em { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: #edf1ef; color: #708078; font-size: 9px; font-style: normal; font-weight: 800; text-align: center; }
.settings-content { display: grid; gap: 15px; min-width: 0; }
.settings-system-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px; border: 1px solid #dce5e0; border-radius: 15px; background: linear-gradient(135deg, #fff, #f7faf8); box-shadow: var(--shadow); }
.settings-system-title { display: flex; gap: 14px; align-items: center; }
.settings-system-title > span { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: #deefe6; color: #287251; font-size: 18px; font-weight: 900; }
.settings-system-head h2 { margin: 3px 0 5px; color: #2c4d3b; font-size: 20px; }
.settings-system-head p { max-width: 720px; margin: 0; color: #74837b; font-size: 11px; line-height: 1.65; }
.settings-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.settings-overview-grid > div { display: grid; gap: 4px; padding: 14px 15px; border: 1px solid #dfe7e2; border-radius: 12px; background: #fff; }
.settings-overview-grid span { color: #74837b; font-size: 10px; font-weight: 700; }
.settings-overview-grid strong { color: #315440; font-size: 19px; }
.settings-overview-grid small { color: #8b9891; font-size: 9px; }
.settings-catalog-card { overflow: hidden; border: 1px solid #dfe6e2; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.settings-catalog-card .section-head > span { color: #557064; font-size: 10px; font-weight: 800; }
.settings-config-table { min-width: 680px; }
.settings-type-tag { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #edf4f0; color: #3b6f55; font-size: 10px; font-weight: 800; }
.settings-scope-note { padding: 16px 18px; border: 1px solid #d9e6df; border-radius: 13px; background: #f4f9f6; }
.settings-scope-note strong { color: #315b45; font-size: 12px; }
.settings-scope-note p { margin: 5px 0 0; color: #708078; font-size: 10px; line-height: 1.65; }
.settings-page-card { margin: 0; box-shadow: var(--shadow); }
.settings-backup-card.settings-page-card { grid-template-columns: 1fr; }
.settings-permission-warning { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border: 1px solid #eed9a8; border-radius: 12px; background: #fff9eb; }
.settings-permission-warning strong { flex: 0 0 auto; color: #8a5b12; font-size: 11px; }
.settings-permission-warning span { color: #876f47; font-size: 10px; line-height: 1.6; }
.permission-user-list { display: grid; gap: 13px; }
.permission-user-card { overflow: hidden; border: 1px solid #dce5e0; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.permission-user-card > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 17px; border-bottom: 1px solid #e8edea; background: #f8faf9; }
.permission-user-card > header > div { display: flex; gap: 10px; align-items: center; }
.permission-user-card > header > div > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #dceee4; color: #286e4f; font-size: 14px; font-weight: 900; }
.permission-user-card h3 { margin: 0 0 3px; color: #304f3e; font-size: 14px; }
.permission-user-card header p { margin: 0; color: #839088; font-size: 9px; }
.permission-user-card header em { padding: 4px 8px; border-radius: 999px; background: #edf3ef; color: #5f7468; font-size: 9px; font-style: normal; font-weight: 800; }
.permission-user-card > section { padding: 14px 17px; }
.permission-user-card > section + section { border-top: 1px dashed #e2e8e4; }
.permission-user-card h4 { margin: 0 0 10px; color: #5e7067; font-size: 10px; letter-spacing: .05em; }
.permission-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.permission-module-grid label, .permission-ability-grid label { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid #e1e8e4; border-radius: 9px; background: #fbfcfb; cursor: pointer; }
.permission-module-grid input, .permission-ability-grid input { flex: 0 0 auto; width: auto; accent-color: #267653; }
.permission-module-grid span { display: flex; gap: 6px; align-items: center; color: #51665a; font-size: 10px; font-weight: 700; }
.permission-module-grid span b { color: #2f7957; font-size: 9px; }
.permission-ability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.permission-ability-grid span { display: grid; gap: 2px; }
.permission-ability-grid strong { color: #4c6256; font-size: 10px; }
.permission-ability-grid small { color: #8b9690; font-size: 9px; line-height: 1.45; }
.permission-business-rights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.permission-business-right { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 11px; border: 1px solid #e1e8e4; border-radius: 10px; background: #fbfcfb; }
.permission-business-right > strong { color: #2e674d; font-size: 11px; }
.permission-business-right label { display: flex; align-items: center; gap: 7px; color: #5c6f64; font-size: 10px; cursor: pointer; }
.permission-business-right input { width: auto; accent-color: #267653; }
.permission-user-card input:disabled { opacity: .55; }

@media (max-width: 980px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-directory { position: static; max-height: none; overflow: visible; }
  .settings-directory-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-directory-group h3 { grid-column: 1 / -1; }
  .settings-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-business-rights { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .settings-directory-group { grid-template-columns: 1fr 1fr; }
  .settings-directory-item { grid-template-columns: 30px minmax(0, 1fr); padding: 8px; }
  .settings-directory-item > b { width: 28px; height: 28px; }
  .settings-directory-item em { display: none; }
  .settings-system-head { align-items: flex-start; flex-direction: column; padding: 16px; }
  .settings-system-title > span { width: 42px; height: 42px; }
  .settings-overview-grid { grid-template-columns: 1fr 1fr; }
  .permission-module-grid, .permission-ability-grid, .permission-business-rights { grid-template-columns: 1fr; }
}
.configured-workflow-strip { border-color: #cfe3d7; background: linear-gradient(120deg, #fbfefc, #f1f8f4); }
.configured-workflow-strip .eyebrow { margin: 0 0 4px; color: #3c8060; font-size: 9px; }
.configured-workflow-strip .module-flow-step small { color: #7c8d84; font-size: 8px; white-space: nowrap; }
.workflow-requirement-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.workflow-requirement-tags span { padding: 4px 8px; border: 1px solid #d7e7dd; border-radius: 999px; background: #fff; color: #486759; font-size: 10px; font-weight: 700; }
.project-locked-field { display: grid; gap: 5px; align-content: start; min-height: 76px; padding: 11px 12px; border: 1px solid #dbe7df; border-radius: 10px; background: #f6faf7; }
.project-locked-field span { color: #60766a; font-size: 11px; font-weight: 700; }
.project-locked-field strong { color: #1f523c; font-size: 14px; }
.project-locked-field small { color: #819087; font-size: 9px; line-height: 1.4; }
.knowledge-sync-status { align-self: center; padding: 7px 10px; border-radius: 999px; background: #edf5ef; color: #367056; font-size: 10px; font-weight: 800; white-space: nowrap; }
.knowledge-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 17px; }
.knowledge-file-card { display: block; min-width: 0; padding: 10px; overflow: hidden; border: 1px solid #dce6d8; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(35, 71, 48, .07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.knowledge-file-card:hover { transform: translateY(-3px); border-color: #a9c8ae; box-shadow: 0 15px 30px rgba(35, 71, 48, .13); }
.knowledge-book-cover { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 9px 9px 11px 9px; background: linear-gradient(145deg, var(--cover-deep), var(--cover-light)); box-shadow: 0 7px 16px rgba(28, 47, 34, .18); color: #fff; text-decoration: none; }
.knowledge-book-cover::after { position: absolute; inset: 0 auto 0 9px; width: 2px; background: rgba(255,255,255,.23); box-shadow: 5px 0 10px rgba(0,0,0,.16); content: ""; z-index: 3; }
.knowledge-book-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #eef1ec; z-index: 2; }
.knowledge-book-cover img.is-failed { display: none; }
.knowledge-cover-fallback { position: absolute; inset: 0; display: grid; align-content: space-between; gap: 12px; padding: 18px 16px 15px 22px; }
.knowledge-cover-fallback small { color: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.knowledge-cover-fallback strong { display: -webkit-box; overflow: hidden; color: #fff; font-family: "STSong", "SimSun", serif; font-size: 18px; line-height: 1.45; text-shadow: 0 2px 5px rgba(0,0,0,.25); -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.knowledge-cover-fallback span { color: rgba(255,255,255,.82); font-size: 10px; font-weight: 800; }
.knowledge-file-copy { display: grid; gap: 5px; min-width: 0; padding: 11px 4px 3px; }
.knowledge-file-copy > div { display: flex; align-items: center; gap: 6px; color: #74816f; font-size: 9px; font-weight: 800; }
.knowledge-file-copy h3 { display: -webkit-box; min-height: 40px; margin: 2px 0 0; overflow: hidden; color: #294223; font-size: 13px; line-height: 1.5; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.knowledge-file-copy p, .knowledge-file-copy > small { margin: 0; overflow: hidden; color: #778173; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-file-copy .knowledge-download { width: 100%; margin-top: 5px; padding: 8px 10px; }

@media (max-width: 760px) {
  .master-type-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-data-fields { grid-template-columns: 1fr; }
  .master-data-fields .wide { grid-column: auto; }
  .settings-backup-card { grid-template-columns: 1fr; }
  .number-rule-card { grid-template-columns: 1fr; }
  .number-rule-grid { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backup-list { grid-column: auto; grid-template-columns: 1fr; }
  .workflow-module-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-form-summary { grid-template-columns: auto 1fr; }
  .workflow-form-summary small { grid-column: 1 / -1; text-align: left; }
  .knowledge-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .knowledge-file-card { padding: 7px; }
  .knowledge-cover-fallback { padding: 13px 11px 12px 17px; }
  .knowledge-cover-fallback strong { font-size: 14px; }
  .knowledge-file-copy h3 { font-size: 11px; }
  .knowledge-sync-status { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   Kinghong enterprise UI refinement
   A final, shared presentation layer for the main menu, secondary workspaces,
   tables, settings and dialogs. Business-specific rules above stay intact.
   -------------------------------------------------------------------------- */

:root {
  --brand-green-950: #0d3527;
  --brand-green-900: #124834;
  --brand-green-800: #176147;
  --brand-green-700: #197454;
  --brand-green-600: #258461;
  --brand-green-100: #e3f2ea;
  --brand-green-50: #f2f8f5;
  --brand-blue-700: #294fbd;
  --brand-blue-100: #e9efff;
  --canvas: #f2f6f4;
  --canvas-strong: #eaf1ed;
  --surface-raised: rgba(255, 255, 255, .96);
  --surface-subtle: #f7faf8;
  --border-soft: #e2eae5;
  --border-strong: #cfddd5;
  --text-primary: #16251f;
  --text-secondary: #53675c;
  --text-tertiary: #7e8d85;
  --focus-ring: rgba(41, 112, 224, .24);
  --shadow-xs: 0 1px 2px rgba(13, 53, 39, .04);
  --shadow-sm: 0 6px 18px rgba(13, 53, 39, .06);
  --shadow-md: 0 14px 36px rgba(13, 53, 39, .09);
  --shadow-lg: 0 26px 70px rgba(13, 42, 31, .22);
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --control-height: 42px;
  --content-width: 1440px;
  --green: var(--brand-green-700);
  --green-2: var(--brand-green-600);
  --green-soft: var(--brand-green-100);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-soft);
  --shadow: var(--shadow-sm);
}

html {
  overflow-x: clip;
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  background:
    radial-gradient(920px 460px at -8% -10%, rgba(47, 153, 108, .11), transparent 68%),
    radial-gradient(780px 430px at 108% 0%, rgba(66, 105, 204, .09), transparent 66%),
    linear-gradient(180deg, #f7faf8 0, var(--canvas) 460px);
  color: var(--text-primary);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  opacity: .12;
  background-size: 56px 56px;
}

::selection { background: #cfe8da; color: var(--brand-green-950); }

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .55;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):active { transform: translateY(0) scale(.985); }

input,
select,
textarea {
  min-height: var(--control-height);
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  caret-color: var(--brand-green-700);
}

textarea { min-height: 92px; line-height: 1.65; }

input::placeholder,
textarea::placeholder { color: #9aa69f; opacity: 1; }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: #9eb9aa; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-green-600);
  box-shadow: 0 0 0 3px rgba(37, 132, 97, .14);
}

.primary,
.secondary,
.danger {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .01em;
}

.primary {
  border-color: var(--brand-green-700);
  background: linear-gradient(135deg, #258461 0%, #176147 100%);
  box-shadow: 0 6px 14px rgba(23, 97, 71, .20);
}

.primary:hover:not(:disabled) {
  border-color: var(--brand-green-800);
  background: linear-gradient(135deg, #2a8f69 0%, #15573f 100%);
  box-shadow: 0 9px 22px rgba(23, 97, 71, .25);
}

.secondary,
.danger { background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-xs); }
.secondary { border-color: var(--border-strong); color: #385648; }
.secondary:hover:not(:disabled) { border-color: #91b6a2; background: var(--brand-green-50); }
.danger { border-color: #e7cbcc; color: #ad383e; }
.danger:hover:not(:disabled) { border-color: #dc9fa2; background: #fff3f3; }

/* Global navigation */
.topbar {
  min-height: 88px;
  padding: 15px max(26px, calc((100vw - var(--content-width)) / 2 + 26px));
  border-bottom-color: rgba(207, 221, 213, .88);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 28px rgba(18, 72, 52, .06);
  backdrop-filter: blur(18px) saturate(135%);
}

.brand-lockup { gap: 16px; }
.brand-logo { width: 148px; }
.brand-title { padding-left: 16px; border-left-color: #d9e5de; }
.brand-title h1 { color: var(--brand-green-950); font-size: clamp(23px, 2vw, 29px); }
.brand-title .eyebrow { color: var(--brand-green-700); font-size: 10px; }

.topbar { justify-content: space-between; gap: 30px; }
.brand-lockup { min-width: 0; }
.top-actions { margin-left: 0; align-items: flex-end; justify-content: flex-end; gap: 8px; }
.top-actions .primary,
.top-actions .secondary { min-height: 40px; white-space: nowrap; }
.account-switch { min-width: 170px; font-size: 11px; }
.account-switch select { min-width: 170px; min-height: 40px; background-color: #fbfdfc; }

.dashboard {
  width: 100%;
  max-width: calc(var(--content-width) + 64px);
  padding: 30px 32px 72px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-bottom: 15px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--brand-green-700);
  text-decoration: none;
}
.back-link:hover { background: var(--brand-green-50); text-decoration: none; }

/* Main menu */
.module-choice-head {
  position: relative;
  max-width: 860px;
  margin: 4px auto 25px;
  padding: 14px 22px 23px;
  border-bottom: 0;
}

.module-choice-head::after {
  position: absolute;
  right: 34%;
  bottom: 0;
  left: 34%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--brand-green-600), transparent);
  content: "";
}

.module-choice-head .section-kicker { margin-bottom: 8px; color: var(--brand-green-700); }
.module-choice-head h2 { color: var(--brand-green-950); font-size: clamp(24px, 2.35vw, 32px); letter-spacing: -.045em; }
.module-choice-head p:last-child { color: var(--text-secondary); font-size: 13px; }

.module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.module-card {
  isolation: isolate;
  min-height: 184px;
  padding: 25px 23px 23px;
  overflow: hidden;
  border-color: rgba(207, 221, 213, .94);
  border-radius: var(--radius-lg);
  background: linear-gradient(148deg, rgba(255, 255, 255, .99), rgba(248, 251, 249, .95));
  box-shadow: var(--shadow-sm);
}

.module-card::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--module-ink), var(--module-soft));
  opacity: .78;
  content: "";
}

.module-card::after {
  position: absolute;
  z-index: -1;
  right: -36px;
  bottom: -48px;
  width: 130px;
  height: 130px;
  border: 24px solid var(--module-soft);
  border-radius: 50%;
  opacity: .54;
  content: "";
}

.module-card:hover {
  border-color: #9ec9b1;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.module-card:focus-visible { border-color: #5e8ff0; }
.module-icon { width: 52px; height: 52px; margin-bottom: 15px; border-radius: 15px; font-size: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .64); }
.module-card h3 { margin-bottom: 8px; color: #173f2f; font-size: 17px; letter-spacing: -.015em; }
.module-card p { max-width: 280px; margin-inline: auto; color: var(--text-secondary); font-size: 12px; line-height: 1.72; }
.module-card small { right: 18px; bottom: 15px; }

/* Secondary workspaces and shared cards */
.business-module-head,
.module-hero {
  position: relative;
  margin-bottom: 20px;
  padding: 25px 27px;
  overflow: hidden;
  border-color: var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(245, 251, 247, .98), rgba(247, 249, 254, .98));
  box-shadow: var(--shadow-sm);
}

.business-module-head::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--brand-green-600), var(--brand-blue-700));
  content: "";
}

.business-module-head h2,
.module-hero h2 { color: var(--brand-green-950); font-size: clamp(22px, 2vw, 27px); }
.business-module-head p,
.module-hero > p:last-child { max-width: 840px; color: var(--text-secondary); line-height: 1.75; }

.metric,
.project-table-card,
.detail-card,
.my-work-card,
.analysis-card,
.inventory-records,
.hr-section,
.finance-workflow-section,
.settings-catalog-card,
.permission-user-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.summary-grid { gap: 16px; margin-bottom: 24px; }
.metric { min-height: 104px; padding: 19px 20px; }
.metric::after { right: -24px; bottom: -40px; width: 104px; height: 104px; opacity: .82; }
.metric span { color: var(--text-secondary); font-size: 12px; }
.metric strong { margin-top: 9px; color: var(--brand-green-950); font-size: 32px; }

.my-work-card { margin-bottom: 24px; padding: 23px; border-color: #c9e0d3; }
.todo-list { gap: 10px; }
.todo-item { min-height: 58px; padding: 13px 15px; border-color: var(--border-soft); border-radius: 11px; }
.todo-item:hover { border-color: #b9d8c7; background: #fbfefc; }

.section-head { padding: 22px 23px 17px; }
.section-head h2 { margin-bottom: 6px; padding-left: 13px; color: var(--brand-green-950); font-size: 19px; }
.section-head h2::before { top: 4px; width: 4px; height: 19px; background: linear-gradient(180deg, var(--brand-green-600), var(--brand-blue-700)); }
.section-head p { max-width: 840px; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.section-head-actions { gap: 8px; }

.analysis-section { margin-top: 38px; border-top-color: var(--border-strong); }
.analysis-card { padding: 20px; }
.analysis-card h3 { color: var(--brand-green-900); font-size: 16px; }

.module-flow-card {
  padding: 21px 23px;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}

.module-flow { flex-wrap: wrap; row-gap: 12px; }
.module-flow-step { min-width: 86px; }
.module-flow-step b { width: 30px; height: 30px; background: var(--brand-green-100); color: var(--brand-green-700); }
.module-flow-step span { color: #294f3c; }

.inventory-attention,
.settings-permission-warning { border-radius: var(--radius-md); }

/* Tables */
.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #a9bdb2 transparent;
  scrollbar-width: thin;
}

.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #a9bdb2; background-clip: padding-box; }

.project-table th,
.project-table td {
  padding: 14px 17px;
  border-top-color: #e9efeb;
}

.project-table th {
  background: #f1f6f3;
  color: #536b5e;
  font-size: 11px;
  letter-spacing: .035em;
}

.project-table tbody tr { background: #fff; }
.project-table tbody tr:nth-child(even) { background: #fbfcfb; }
.project-table tbody tr:hover { background: #f1f8f4; }
.project-table td { color: #34493e; }
.project-table td:first-child { color: var(--brand-green-900); }

.status-doing,
.status-waiting,
.status-done,
.status-paused,
.deadline,
.inventory-category,
.supplier-badge,
.settings-type-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

details > summary { border-radius: 8px; }
details > summary:hover { background-color: rgba(235, 244, 239, .62); }

/* Settings hierarchy */
.settings-shell { grid-template-columns: 268px minmax(0, 1fr); gap: 20px; }
.settings-directory {
  top: 106px;
  max-height: calc(100dvh - 124px);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
  scrollbar-color: #b5c8bd transparent;
}

.settings-directory-intro {
  padding: 19px 18px 17px;
  background: linear-gradient(135deg, #f7fbf9, #eef5f1);
}
.settings-directory-intro strong { color: var(--brand-green-900); font-size: 16px; }
.settings-directory-intro span { color: var(--text-secondary); font-size: 10px; }
.settings-directory-group { gap: 5px; padding: 14px 11px; }
.settings-directory-group h3 { padding: 3px 9px 7px; color: var(--text-tertiary); font-size: 10px; }
.settings-directory-item { min-height: 50px; padding: 8px 10px; border-radius: 11px; }
.settings-directory-item:hover { border-color: #d7e5dd; background: #f5f9f7; transform: none; }
.settings-directory-item.is-active {
  border-color: #b6d4c4;
  background: linear-gradient(90deg, #e6f3ec, #f3f9f6);
  box-shadow: inset 4px 0 var(--brand-green-700);
}
.settings-directory-item > b { width: 34px; height: 34px; border-radius: 10px; }
.settings-directory-item > span { font-size: 12px; }
.settings-directory-item small { color: var(--text-tertiary); }
.settings-directory-item em { background: #e9f0ec; color: #526b5e; }
.settings-content {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 17px;
}
.settings-content > *,
.settings-system-head > * { max-width: 100%; min-width: 0; }
.settings-system-head {
  min-width: 0;
  padding: 23px;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff, #f5faf7);
  box-shadow: var(--shadow-sm);
}
.settings-system-title > span { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(145deg, #d8eee2, #eaf1ff); }
.settings-system-head h2 { color: var(--brand-green-900); font-size: 22px; }
.settings-overview-grid { gap: 12px; }
.settings-overview-grid > div { min-height: 90px; padding: 16px; border-color: var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.settings-overview-grid strong { color: var(--brand-green-900); font-size: 22px; }
.settings-catalog-card { overflow: clip; }
.workflow-setting-card { border-color: var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.workflow-setting-card:hover { border-color: #c1d9cc; box-shadow: var(--shadow-sm); }
.workflow-setting-steps { flex-wrap: wrap; overflow: visible; }
.permission-user-card > header { padding: 17px 19px; background: #f6faf8; }
.permission-module-grid label,
.permission-ability-grid label { min-height: 46px; }
.permission-module-grid label:hover,
.permission-ability-grid label:hover { border-color: #b9d5c6; background: #f3f8f5; }

/* Dialogs: stable size, contained scrolling and persistent actions */
dialog {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: rgba(207, 221, 213, .96);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  scrollbar-color: #a9bdb2 transparent;
  scrollbar-width: thin;
}

dialog::backdrop {
  background: rgba(12, 31, 23, .48);
  backdrop-filter: blur(5px) saturate(90%);
}

.dialog-form {
  min-width: 0;
  padding: 26px;
  gap: 17px;
  background: linear-gradient(180deg, #fff, #fbfcfb);
}

.dialog-form > h2,
.dialog-titlebar h2 { color: var(--brand-green-950); font-size: 21px; }

.dialog-titlebar {
  position: sticky;
  z-index: 5;
  top: -26px;
  margin: -26px -26px 0;
  padding: 22px 26px 17px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.dialog-hint {
  padding: 11px 13px;
  border: 1px solid #deebe4;
  border-radius: 10px;
  background: #f5faf7;
  color: var(--text-secondary);
  font-size: 12px;
}

.dialog-actions {
  position: sticky;
  z-index: 5;
  bottom: -26px;
  min-height: 70px;
  margin: 5px -26px -26px;
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 22px rgba(17, 61, 44, .05);
  backdrop-filter: blur(12px);
}

.dialog-actions button { min-width: 92px; }

.notice-dialog .dialog-actions,
#noticeDialog .dialog-actions {
  position: static;
  min-height: 0;
  margin: 2px 0 0;
  padding: 3px 0 0;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}

.notice-panel { background: linear-gradient(135deg, #fff, #f2f8f5); }
.notice-icon { background: var(--brand-green-100); color: var(--brand-green-700); }

#inventoryPurchaseDialog,
.finance-application-dialog,
.finance-detail-dialog,
.workflow-config-dialog,
#planDialog,
#tutorialDialog,
.hr-position-dialog,
.master-data-dialog {
  width: min(1180px, calc(100vw - 36px));
}

/* The count form uses the wide plan-form grid.  Without its own dialog width
   the browser's 520px default clipped the title and the left side of every row. */
#inventoryCountDialog {
  width: min(880px, calc(100vw - 36px));
}

#inventoryCountDialog .plan-form {
  width: auto;
  max-width: none;
}

/* 到货清点：逐项确认，差异时才展开实收数量。 */
.inventory-count-row { grid-template-columns: minmax(210px, 1.5fr) 115px minmax(125px, .8fr) 166px; align-items: center; }
.count-item { display: grid; grid-template-columns: 27px 1fr; gap: 2px 8px; align-items: center; }
.count-item b { grid-row: 1 / span 2; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #e8f2ed; color: #337154; font-size: 11px; }
.count-item strong { color: #1e513b; }.count-item span { color: var(--muted); font-size: 12px; }
.count-expected { display: grid; gap: 4px; color: #597064; font-size: 11px; font-weight: 800; }.count-expected output { color: #40564a; font-size: 14px; }
.count-actual-wrap input { min-width: 0; padding: 9px 8px; }.count-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.count-actions button { width: 38px; min-width: 38px; height: 36px; padding: 0; font-size: 18px; font-weight: 900; }.count-match { border-color: #96d4af; color: #18764a; background: #effaf3; }.count-difference { border-color: #e9b5b8; color: #ae3f49; background: #fff5f5; }
.count-state { margin-left: 3px; color: #7d8d83; font-weight: 800; white-space: nowrap; }.inventory-count-row.is-matched { border-color: #9bd8b2; background: #f2fbf5; }.inventory-count-row.is-matched .count-state { color: #258052; }.inventory-count-row.is-difference { border-color: #ecc2c5; background: #fffafa; }.inventory-count-row.is-difference .count-state { color: #a64b52; }

.supplier-list-dialog,
.service-sale-dialog,
.customer-inquiry-dialog,
.daily-report-dialog,
.hr-record-dialog { width: min(820px, calc(100vw - 36px)); }

#inventoryPurchaseDialog.is-maximized,
.finance-application-dialog.is-maximized {
  width: calc(100vw - 18px);
  height: calc(100dvh - 18px);
  max-height: none;
}

dialog .edit-grid,
dialog .finance-form-grid,
dialog .master-data-fields,
dialog .hr-record-fields,
dialog .workflow-config-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

dialog .purchase-line-row,
dialog .finance-purchase-line {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  min-width: 0;
  padding: 14px;
}

dialog .purchase-line-row .line-remove,
dialog .finance-purchase-line .line-remove {
  grid-column: auto;
  align-self: end;
  justify-self: start;
}

dialog .table-wrap { overflow-x: visible; }
dialog table,
dialog .project-table,
dialog .simple-table,
dialog .finance-table,
dialog .settings-config-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: auto;
}

dialog th,
dialog td {
  min-width: 0 !important;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Every operational dialog owns a scrollable form area.  This keeps the
   action bar inside the dialog even when the form grows beyond the viewport. */
dialog {
  box-sizing: border-box;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

dialog > .dialog-form {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 24px);
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

dialog .dialog-form > * { min-width: 0; }

/* Tutorial and notice dialogs do not use .dialog-form, so give their direct
   panels the same bounded scroll behaviour. */
dialog > .tutorial-dialog,
dialog > .notice-panel {
  box-sizing: border-box;
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

dialog .dialog-titlebar {
  top: 0;
  margin: 0;
  padding: 0 0 17px;
}

dialog .dialog-actions {
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 5px 0 0;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
}

dialog .table-wrap { max-width: 100%; overflow-x: auto; }

.finance-flow-steps,
.tutorial-flow { flex-wrap: wrap; overflow-x: visible; white-space: normal; }
.finance-flow-steps div { min-width: 80px; }

/* Module secondary workspaces */
.module-subnav {
  /* Keep the second-level navigation in the document flow.  The system header
     becomes taller when its title wraps, so a hard-coded sticky offset used to
     cover the module title and primary action. */
  position: relative;
  z-index: 1;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(199, 217, 207, .92);
  border-radius: 15px;
  background: rgba(252, 254, 253, .94);
  box-shadow: 0 10px 28px rgba(18, 70, 51, .08);
  backdrop-filter: blur(15px) saturate(130%);
}

.module-subnav-label {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  padding-right: 16px;
  border-right: 1px solid var(--border-soft);
}

.module-subnav-label span { color: var(--text-tertiary); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.module-subnav-label strong { color: var(--brand-green-950); font-size: 14px; }

.module-subnav-items {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.module-subnav-items button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #52695d;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.module-subnav-items button:hover {
  border-color: #d8e7df;
  background: var(--brand-green-50);
  color: var(--brand-green-800);
  transform: none;
}

.module-subnav-items button.active {
  border-color: #2f8063;
  background: linear-gradient(135deg, var(--brand-green-800), #217359);
  box-shadow: 0 6px 15px rgba(23, 107, 79, .18);
  color: #fff;
}

#businessModuleContent > section:not(.business-module-head):not(.module-subnav) { animation: module-page-enter .22s ease-out; }

@keyframes module-page-enter {
  from { opacity: .35; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive hierarchy */
@media (max-width: 1240px) {
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finance-workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .topbar { flex-direction: row; align-items: center; gap: 18px; }
  .top-actions { flex-wrap: wrap; }
  .dashboard { padding-inline: 24px; }
  .settings-shell { grid-template-columns: 238px minmax(0, 1fr); }
  .settings-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .topbar { position: relative; align-items: stretch; flex-direction: column; padding: 18px 20px; }
  .module-subnav { top: 10px; }
  .top-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .top-actions > * { width: 100%; }
  .top-actions .account-switch { grid-column: 1 / -1; }
  .account-switch select { width: 100%; }
  .dashboard { padding: 22px 18px 54px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: 1fr; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-directory { position: static; max-height: none; overflow: visible; }
  .settings-directory-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-directory-group h3 { grid-column: 1 / -1; }
  .settings-system-head { align-items: flex-start; flex-direction: column; }
  .finance-workflow-grid { grid-template-columns: 1fr; }
  .module-flow-card { grid-template-columns: 1fr; }
  .detail-tabs { flex-wrap: wrap; overflow-x: visible; }
  dialog .edit-grid,
  dialog .finance-form-grid,
  dialog .master-data-fields,
  dialog .hr-record-fields,
  dialog .workflow-config-fields,
  .finance-detail-summary,
  .finance-detail-fields > div,
  .workflow-approver-config label { grid-template-columns: 1fr; }
  dialog .wide,
  dialog .finance-form-grid .wide,
  dialog .master-data-fields .wide,
  dialog .hr-record-fields .wide,
  dialog .workflow-config-fields .wide,
  dialog .workflow-enabled { grid-column: auto; }
}

@media (max-width: 640px) {
  :root { --control-height: 46px; }
  body { min-width: 320px; }
  .brand-logo { width: 118px; }
  .brand-title { padding-left: 11px; }
  .brand-title .eyebrow { display: none; }
  .brand-title h1 { font-size: 21px; line-height: 1.25; }
  .top-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-actions .primary,
  .top-actions .secondary { min-height: 46px; }
  .dashboard { padding: 18px 13px calc(42px + env(safe-area-inset-bottom)); }
  .module-choice-head { margin-bottom: 18px; padding: 8px 10px 19px; }
  .module-choice-head::after { right: 25%; left: 25%; }
  .module-choice-head h2 { font-size: 24px; }
  .module-subnav {
    position: relative;
    top: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 11px;
    border-radius: 13px;
  }
  .module-subnav-label { display: none; }
  .module-subnav-items { justify-content: flex-start; margin: -2px; padding: 2px; }
  .module-subnav-items button { min-height: 42px; padding-inline: 13px; }
  .module-grid { grid-template-columns: 1fr; gap: 12px; }
  .module-card { min-height: 144px; padding: 19px; }
  .module-icon { width: 46px; height: 46px; margin-bottom: 10px; }
  .module-card small { position: static; margin-top: 8px; }
  .business-module-head,
  .module-hero { padding: 20px 18px 20px 21px; }
  .summary-grid,
  .settings-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { min-height: 92px; padding: 16px; }
  .metric strong { font-size: 27px; }
  .section-head { padding: 18px 16px 14px; }
  .section-head-actions { width: 100%; justify-content: stretch; }
  .section-head-actions button { flex: 1 1 132px; }
  .table-wrap::after { content: "左右滑动可查看完整表格"; }
  .module-flow { display: grid; grid-template-columns: 1fr; }
  .module-flow-arrow { display: none; }
  .module-flow-step { grid-template-columns: 32px 1fr; justify-items: start; min-width: 0; text-align: left; }
  .module-flow-step b { grid-row: 1; }
  .module-flow-step span { align-self: center; }
  .settings-directory-group { grid-template-columns: 1fr; }
  .settings-directory-item { min-height: 48px; }
  .settings-system-head { padding: 18px; }
  .settings-system-head .inventory-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .settings-system-head .inventory-actions button { width: 100%; min-width: 0; }
  .settings-system-title > span { width: 46px; height: 46px; }
  .permission-module-grid,
  .permission-ability-grid { grid-template-columns: 1fr; }
  dialog:not(.notice-dialog) {
    inset: 0;
    width: 100vw !important;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  dialog:not(.notice-dialog) .dialog-form {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding: 20px 16px;
    overflow: auto;
  }
  dialog:not(.notice-dialog) .dialog-titlebar {
    top: 0;
    margin: 0;
    padding: calc(16px + env(safe-area-inset-top)) 16px 14px;
  }
  dialog:not(.notice-dialog) .dialog-actions {
    bottom: 0;
    margin: 4px 0 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .dialog-actions button { width: 100%; min-height: 46px; }
  .notice-dialog { max-width: calc(100vw - 24px); }
  .notice-panel { grid-template-columns: 36px 1fr; padding: 20px; }
  .notice-message { grid-column: 1 / -1; margin-top: 1px; }
  .notice-dialog .dialog-actions { display: flex; }
  dialog .purchase-line-row,
  dialog .finance-purchase-line,
  .plan-edit-row { grid-template-columns: 1fr; }
  .finance-flow-steps { display: grid; grid-template-columns: 1fr; }
  .finance-flow-steps i { display: none; }
  .finance-flow-steps div { grid-template-columns: 30px 1fr; justify-items: start; min-width: 0; text-align: left; }
  .finance-flow-steps span { align-self: center; white-space: normal; }
  .tutorial-flow { align-items: stretch; flex-direction: column; }
  .tutorial-flow > span { display: none; }
}

@media (max-width: 390px) {
  .brand-logo { width: 104px; }
  .brand-title h1 { font-size: 18px; }
  .summary-grid,
  .settings-overview-grid { grid-template-columns: 1fr; }
  .dialog-actions { grid-template-columns: 1fr; }
}

@media (hover: none), (pointer: coarse) {
  .primary,
  .secondary,
  .danger,
  .back-link,
  .settings-directory-item,
  .detail-tab { min-height: 44px; }
  button:hover { transform: none; }
  .module-card:hover { transform: none; box-shadow: var(--shadow-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.action-feedback {
  position: fixed;
  z-index: 10000;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 28px));
  padding: 13px 18px;
  border: 1px solid #badcc9;
  border-radius: 12px;
  background: #f4fbf7;
  color: #1e6547;
  box-shadow: 0 16px 42px rgba(19, 67, 45, .2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: opacity .2s ease, transform .2s ease;
}
.action-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }
.action-feedback > strong { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #23865d; color: #fff; }
.action-feedback.is-error { border-color: #edc3c5; background: #fff7f7; color: #9b373b; }
.action-feedback.is-error > strong { background: #c8494e; }
button[aria-busy="true"] { cursor: wait; opacity: .78; }

@media print {
  .top-actions, .back-link, button, dialog, .module-grid { display: none !important; }
  body { background: #fff; }
}

.hr-personal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 18px; }
.hr-personal-grid > article { display: grid; align-content: start; gap: 7px; min-height: 128px; padding: 17px; border: 1px solid #e3d9ea; border-radius: 14px; background: linear-gradient(145deg, #fff, #fbf8fd); box-shadow: var(--shadow-sm); }
.hr-personal-grid span { color: #8a679d; font-size: 11px; font-weight: 900; }
.hr-personal-grid strong { color: #56386a; font-size: 16px; line-height: 1.45; }
.hr-personal-grid small { color: #756b7d; font-size: 11px; line-height: 1.55; }
.hr-personal-grid .secondary { justify-self: start; margin-top: auto; }
.hr-personal-projects { padding: 0 20px 20px; }
.hr-personal-boundary { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #dfe5e2; border-radius: 10px; background: #f8fbf9; color: #60746a; font-size: 12px; line-height: 1.6; }
.purchase-import-hint { margin: 0 0 14px; padding: 11px 13px; border: 1px solid #d6e6de; border-radius: 10px; background: #f7fbf8; color: #547267; font-size: 12px; line-height: 1.6; }
.purchase-line-row { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
.purchase-line-row .line-remove { grid-column: 5; justify-self: end; }
.purchase-line-row .purchase-supplier-status, .purchase-line-row .purchase-black-supplier-reason { grid-column: 1 / -1; }
.purchase-line-row .purchase-supplier-status { margin-top: 2px; }
.purchase-line-row .purchase-black-supplier-reason { margin: 0; }
.purchase-line-row .purchase-black-supplier-reason textarea { min-height: 82px; }

@media (max-width: 900px) {
  .hr-personal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hr-personal-grid { grid-template-columns: 1fr; }
  .hr-personal-projects { padding: 0 15px 15px; }
  .purchase-line-row { grid-template-columns: 1fr; }
  .purchase-line-row .line-remove { grid-column: auto; justify-self: start; }
}