:root {
  --navy-950: #0b1020;
  --navy-900: #11182c;
  --navy-800: #182340;
  --blue-700: #1859a9;
  --blue-600: #1976d2;
  --blue-100: #e8f2ff;
  --ink: #182033;
  --muted: #6f788b;
  --line: #e6e9f0;
  --surface: #ffffff;
  --canvas: #f3f5f9;
  --green: #17875b;
  --red: #c43f4f;
  --orange: #d87821;
  --purple: #6f55b7;
  --shadow: 0 16px 38px rgba(25, 36, 63, 0.08);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 15px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.eyebrow { margin: 0 0 12px; color: #9eb9e5; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.eyebrow.dark { color: #62718c; }
.muted { margin: 8px 0 24px; color: var(--muted); }

.login-body { min-height: 100vh; background: var(--navy-950); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, .85fr); }
.login-story { position: relative; overflow: hidden; padding: 70px clamp(40px, 7vw, 120px); color: white; background: radial-gradient(circle at 86% 12%, rgba(40, 122, 215, .32), transparent 29%), linear-gradient(145deg, #111a31 0%, #0a1021 62%, #131c35 100%); }
.login-story::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 480px; height: 480px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012); }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 70px; color: #fff; background: linear-gradient(135deg, #2d8cff, #1859a9); border-radius: 16px; font-size: 25px; font-weight: 900; box-shadow: 0 18px 35px rgba(25,118,210,.3); }
.brand-mark.small { width: 38px; height: 38px; margin: 0; border-radius: 11px; font-size: 18px; box-shadow: none; }
.login-story h1 { position: relative; z-index: 1; max-width: 760px; margin: 0; font-size: clamp(38px, 4vw, 68px); line-height: 1.14; letter-spacing: -.045em; }
.login-lead { position: relative; z-index: 1; max-width: 650px; margin: 28px 0 52px; color: #b9c4da; font-size: 17px; line-height: 1.9; }
.login-points { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 760px; }
.login-points > div { padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035); }
.login-points span { color: #64aaff; font-size: 11px; font-weight: 800; }
.login-points p { margin: 12px 0 0; color: #9ba8c1; font-size: 12px; line-height: 1.7; }
.login-points strong { color: #f7f9ff; font-size: 14px; }
.login-panel-wrap { display: grid; place-items: center; padding: 40px; background: #f7f8fb; }
.login-panel { width: min(100%, 440px); }
.mobile-brand { display: none; }
.login-panel h2 { margin: 0; font-size: 34px; letter-spacing: -.035em; }
.login-panel label { display: grid; gap: 8px; margin: 18px 0; color: #475168; font-size: 13px; font-weight: 700; }
.login-panel input, .filter-card input, .filter-card select { width: 100%; border: 1px solid #dfe4ec; border-radius: 10px; outline: none; background: #fff; color: var(--ink); transition: border .2s, box-shadow .2s; }
.login-panel input { height: 50px; padding: 0 14px; }
.login-panel input:focus, .filter-card input:focus, .filter-card select:focus { border-color: #4d8dd9; box-shadow: 0 0 0 4px rgba(25,118,210,.1); }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 52px; margin-top: 28px; padding: 0 18px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #1969be, #134e91); font-weight: 800; box-shadow: 0 14px 24px rgba(25,105,190,.2); }
.privacy-note { margin-top: 20px; color: #8a93a4; font-size: 11px; line-height: 1.7; }
.login-message { margin: 18px 0 4px; padding: 11px 13px; border-radius: 8px; background: #fff0f1; color: #a93846; font-size: 13px; }
.login-message.success { color: #356b52; background: #eef7f2; }

.login-body { min-height: 100vh; background: #f3f5f8; }
.login-simple-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(100%, 420px); padding: 34px 36px 30px; border: 1px solid #dfe3e9; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(26, 38, 58, .08); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { color: #1e293b; font-size: 16px; }
.login-brand small { margin-top: 3px; color: #8490a3; font-size: 12px; }
.login-card h1 { margin: 0; color: #1e293b; font-size: 26px; letter-spacing: -.02em; }
.login-subtitle { margin: 8px 0 24px; color: #768195; font-size: 14px; }
.login-card label { display: grid; gap: 7px; margin: 16px 0; color: #4d596c; font-size: 13px; font-weight: 700; }
.login-card input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d8dde6; border-radius: 7px; outline: none; background: #fff; color: #1e293b; }
.login-card input:focus { border-color: #4f86b7; box-shadow: 0 0 0 3px rgba(40, 120, 189, .1); }
.login-button { width: 100%; height: 44px; margin-top: 10px; border: 0; border-radius: 7px; color: #fff; background: #183153; font-size: 14px; font-weight: 700; }
.login-button:hover { background: #23466f; }
.login-access-note { margin: 22px 0 0; color: #929bab; font-size: 12px; text-align: center; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 18px; color: #dce4f5; background: linear-gradient(180deg, #10172a, #0b1121); z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 28px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; }
.brand small { margin-top: 2px; color: #8190aa; font-size: 10px; letter-spacing: .12em; }
.nav-caption { padding: 0 10px 8px; color: #63728d; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.nav-caption.spaced { margin-top: 22px; }
nav { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 10px; color: #9da9bd; font-size: 14px; transition: .2s; }
a.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(31,111,201,.34), rgba(31,111,201,.12)); box-shadow: inset 3px 0 #48a0ff; }
.nav-item span { color: #61708b; font-size: 10px; font-weight: 800; }
.nav-item.active span { color: #74b4ff; }
.nav-item.disabled { opacity: .56; }
.nav-item em { margin-left: auto; color: #60708b; font-size: 9px; font-style: normal; }
.sidebar-foot { margin-top: auto; padding: 18px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); }
.connection { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #8190a9; font-size: 10px; }
.connection i, .status-orb { width: 7px; height: 7px; border-radius: 50%; background: #c7822e; box-shadow: 0 0 0 4px rgba(199,130,46,.12); }
.connection i.online, .status-orb.online { background: #36b37e; box-shadow: 0 0 0 4px rgba(54,179,126,.12); }
.user-block { display: flex; align-items: center; gap: 10px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #cfe3ff; background: #1d3356; font-size: 12px; font-weight: 900; }
.user-block strong, .user-block small { display: block; }
.user-block strong { font-size: 12px; }
.user-block small { margin-top: 2px; color: #74839c; font-size: 10px; }
.text-button { margin: 12px 0 0 44px; padding: 0; border: 0; color: #70809a; background: none; font-size: 10px; }
.text-button:hover { color: #fff; }

.main-area { min-width: 0; }
.topbar { min-height: 92px; display: flex; align-items: center; gap: 16px; padding: 18px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.topbar .eyebrow { margin-bottom: 5px; font-size: 9px; }
.topbar h1 { margin: 0; font-size: 27px; letter-spacing: -.03em; }
.security-pill { margin-left: auto; padding: 7px 12px; border: 1px solid #cfe5da; border-radius: 999px; color: var(--green); background: #f0faf5; font-size: 11px; font-weight: 800; }
.menu-button { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.content { padding: 32px clamp(22px, 4vw, 54px) 60px; }

.hero-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; min-height: 245px; padding: clamp(30px, 4vw, 54px); border-radius: 20px; color: #fff; background: radial-gradient(circle at 82% 5%, rgba(58,145,238,.38), transparent 26%), linear-gradient(135deg, #14203b, #0d1427 70%); box-shadow: var(--shadow); }
.hero-card::after { content: ""; position: absolute; right: -65px; bottom: -145px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.018); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card h2 { max-width: 740px; margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.25; letter-spacing: -.04em; }
.hero-card p:not(.eyebrow) { max-width: 650px; margin: 18px 0 0; color: #aab6cc; font-size: 14px; line-height: 1.8; }
.hero-status { min-width: 150px; display: grid; justify-items: center; padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.045); }
.hero-status .status-orb { width: 11px; height: 11px; margin-bottom: 15px; }
.hero-status strong { font-size: 13px; }
.hero-status small { margin-top: 5px; color: #73829d; font-size: 10px; }
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.module-card { position: relative; overflow: hidden; min-height: 220px; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(20,30,54,.04); transition: transform .2s, box-shadow .2s; }
a.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.module-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--blue-600); }
.module-card.accent-green::before { background: var(--green); }
.module-card.muted-card::before { background: #b1b8c5; }
.module-index { color: #8993a5; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.module-card h3 { margin: 28px 0 12px; font-size: 20px; }
.module-card p { max-width: 320px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.module-link { position: absolute; left: 26px; bottom: 24px; color: var(--blue-700); font-size: 12px; font-weight: 800; }
.module-link.muted { color: #929aa8; }
.principles-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 22px; padding: 22px 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.principles-card > div { padding: 0 24px; border-right: 1px solid var(--line); }
.principles-card > div:last-child { border: 0; }
.principles-card span { color: #8a93a4; font-size: 10px; }
.principles-card strong { display: block; margin-top: 7px; font-size: 14px; }
.principles-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.dashboard-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.dashboard-heading p { margin: 6px 0 0; color: #758094; font-size: 13px; }
.dashboard-connection { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #dfe4eb; border-radius: 7px; color: #5d687a; background: #fff; font-size: 12px; }
.dashboard-connection .status-orb { width: 7px; height: 7px; }
.simple-modules { margin-top: 0; }
.simple-modules .module-card { min-height: 170px; padding: 22px; border-radius: 10px; box-shadow: 0 2px 8px rgba(20, 30, 54, .03); }
.simple-modules .module-card::before { display: none; }
.simple-modules .module-card:hover { transform: none; border-color: #aac3dc; box-shadow: 0 5px 14px rgba(25, 70, 120, .06); }
.simple-modules .module-status { display: inline-block; padding: 4px 7px; border-radius: 5px; color: #306797; background: #edf5fb; font-size: 11px; }
.simple-modules .module-status.muted { color: #747f90; background: #f0f2f5; }
.simple-modules .module-card h3 { margin: 18px 0 8px; font-size: 18px; }
.simple-modules .module-card p { font-size: 13px; line-height: 1.6; }
.simple-modules .module-link { bottom: 20px; font-size: 12px; }

.notice { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 18px; border-radius: 10px; font-size: 13px; }
.notice strong { white-space: nowrap; }
.notice.demo { color: #81541a; background: #fff7e8; border: 1px solid #f3d9a5; }
.notice.success { color: #176548; background: #effaf5; border: 1px solid #cbe9dc; }
.notice.danger { color: #933744; background: #fff1f2; border: 1px solid #f0c9cf; }
.notice.warning { color: #81541a; background: #fff7e8; border: 1px solid #f3d9a5; }
.section-lead { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; min-height: 240px; margin-bottom: 24px; padding: 38px 42px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 92% 0, rgba(59, 141, 232, .34), transparent 31%), linear-gradient(135deg, #13203b, #0d1427 72%); box-shadow: var(--shadow); }
.section-lead::after { content: ""; position: absolute; right: -85px; bottom: -175px; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.018); }
.section-lead > * { position: relative; z-index: 1; }
.section-kicker { margin: 0 0 14px; color: #70b4ff; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.section-lead h2 { max-width: 780px; margin: 0; font-size: clamp(30px, 3vw, 46px); line-height: 1.22; letter-spacing: -.045em; }
.section-lead p:not(.section-kicker) { max-width: 790px; margin: 18px 0 0; color: #afbbcf; font-size: 15px; line-height: 1.85; }
.source-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.source-tags span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #9fadc3; background: rgba(255,255,255,.045); font-size: 11px; font-weight: 700; }
.source-tags .source-auto { border-color: rgba(67,194,137,.3); color: #7bd7ad; background: rgba(31,145,96,.13); }
.lead-metric { min-width: 170px; padding: 25px; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; text-align: center; background: rgba(255,255,255,.05); }
.lead-metric span, .lead-metric small { display: block; color: #8190a8; font-size: 11px; }
.lead-metric strong { display: block; margin: 7px 0 3px; font-size: 48px; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.filter-card { display: flex; align-items: end; gap: 18px; margin-bottom: 30px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.filter-card form { display: flex; align-items: end; gap: 12px; }
.filter-card label { display: grid; gap: 7px; min-width: 180px; color: #687287; font-size: 12px; font-weight: 800; }
.filter-card input, .filter-card select { height: 44px; padding: 0 13px; font-size: 14px; }
.secondary-button { height: 44px; padding: 0 22px; border: 0; border-radius: 9px; color: #fff; background: var(--navy-800); font-size: 13px; font-weight: 800; }
.reset-link { height: 44px; display: grid; place-items: center; color: #768095; font-size: 12px; }
.query-summary { margin-left: auto; color: #687287; font-size: 12px; font-weight: 700; }
.analysis-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 38px; }
.analysis-tabs a { position: relative; min-width: 0; padding: 18px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .2s, transform .2s, box-shadow .2s; }
.analysis-tabs a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.analysis-tabs a:hover { transform: translateY(-2px); border-color: #b9d6f5; box-shadow: 0 10px 24px rgba(25,70,120,.08); }
.analysis-tabs a:hover::after { background: var(--blue-600); }
.analysis-tabs span, .analysis-tabs strong, .analysis-tabs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analysis-tabs span { color: #8792a5; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.analysis-tabs strong { margin-top: 10px; color: #25314a; font-size: 14px; }
.analysis-tabs small { margin-top: 5px; color: #8a94a6; font-size: 10px; }
.anchor-section { scroll-margin-top: 18px; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin: 36px 0 18px; }
.section-title-row span { color: #667893; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.section-title-row h2 { margin: 7px 0 0; font-size: 28px; letter-spacing: -.035em; }
.section-title-row p { max-width: 620px; margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: right; }
.kpi-grid { display: grid; gap: 14px; margin-bottom: 20px; }
.kpi-grid.five { grid-template-columns: repeat(5, 1fr); }
.kpi-grid.four { grid-template-columns: repeat(4, 1fr); }
.kpi-card { position: relative; overflow: hidden; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(20,30,54,.035); }
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue-600); }
.kpi-card.purple::before { background: var(--purple); }
.kpi-card.orange::before { background: var(--orange); }
.kpi-card.green::before { background: var(--green); }
.kpi-card.red::before { background: var(--red); }
.kpi-card.blue::before { background: var(--blue-600); }
.kpi-card span { color: #687287; font-size: 12px; font-weight: 700; }
.kpi-card strong { display: block; overflow: hidden; margin: 12px 0 7px; font-size: clamp(25px, 2vw, 34px); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-card small { color: #8e97a7; font-size: 11px; }
.cost-component-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.cost-component { position: relative; overflow: hidden; padding: 21px 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.cost-component::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #2779c9; }
.cost-component span, .cost-component small { display: block; color: #778197; font-size: 11px; }
.cost-component strong { display: block; margin: 10px 0 6px; font-size: clamp(19px, 1.45vw, 26px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-component.component-2::before { background: #6f55b7; }
.cost-component.component-3::before { background: #d87821; }
.cost-component.component-4::before { background: #17875b; }
.cost-component.component-5::before { background: #c43f4f; }
.analysis-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; margin-bottom: 20px; }
.analysis-grid.asset-analysis { grid-template-columns: 1fr 1fr; }
.analysis-grid.chart-pair { grid-template-columns: .8fr 1.2fr; }
.analysis-grid.trend-analysis { grid-template-columns: 1.45fr .55fr; }
.chart-card, .table-card { border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(20,30,54,.035); }
.chart-card { min-height: 290px; padding: 26px; }
.chart-card.wide-chart { min-height: 0; margin-bottom: 20px; }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.card-heading span { color: #7d8799; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.card-heading h3 { margin: 6px 0 0; font-size: 20px; }
.card-heading > small { color: #8f98a7; font-size: 11px; }
.bars { display: grid; gap: 15px; }
.bars.large { gap: 20px; }
.bars.large .bar-track { height: 11px; }
.bars.large .bar-row { grid-template-columns: 120px minmax(100px, 1fr) 135px; font-size: 13px; }
.bars.large .bar-row > strong { font-size: 13px; }
.bar-row { display: grid; grid-template-columns: 110px minmax(80px, 1fr) 120px; align-items: center; gap: 14px; font-size: 12px; }
.bar-row > span { overflow: hidden; color: #566177; text-overflow: ellipsis; white-space: nowrap; }
.bar-row > strong { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #286fbd, #55a5f6); }
.bar-track.green i { background: linear-gradient(90deg, #17875b, #55bc8d); }
.bar-track.component-1 i { background: linear-gradient(90deg, #286fbd, #58a9f8); }
.bar-track.component-2 i { background: linear-gradient(90deg, #6048a8, #967fd7); }
.bar-track.component-3 i { background: linear-gradient(90deg, #c76515, #eca151); }
.bar-track.component-4 i { background: linear-gradient(90deg, #147650, #55bc8d); }
.bar-track.component-5 i { background: linear-gradient(90deg, #b63848, #e27784); }
.donut-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 24px; }
.donut-svg { width: 210px; height: 210px; }
.donut-svg circle { transition: opacity .2s; }
.donut-svg circle:hover { opacity: .82; }
.donut-label { fill: #7c879a; font-size: 10px; font-weight: 700; }
.donut-value { fill: #25314a; font-size: 17px; font-weight: 900; }
.donut-legend { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.donut-legend li { display: grid; grid-template-columns: 9px minmax(70px, 1fr) auto; align-items: center; gap: 9px; }
.donut-legend i { width: 9px; height: 9px; border-radius: 3px; }
.donut-legend span { overflow: hidden; color: #58647a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend strong { color: #29344c; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.donut-legend small { grid-column: 3; color: #929baa; font-size: 10px; text-align: right; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-bottom: 28px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: #667187; font-size: 11px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 2px; }
.platform-stacks { display: grid; gap: 24px; }
.platform-stack-row { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 16px; align-items: center; }
.platform-stack-row strong, .platform-stack-row small { display: block; }
.platform-stack-row strong { color: #344158; font-size: 13px; }
.platform-stack-row small { margin-top: 4px; color: #8993a5; font-size: 10px; }
.platform-stack { display: flex; overflow: hidden; height: 22px; border-radius: 6px; background: #edf0f5; }
.platform-stack i { display: block; min-width: 1px; height: 100%; border-right: 2px solid #fff; }
.platform-stack i:last-child { border-right: 0; }
.line-chart { display: block; width: 100%; min-height: 280px; }
.chart-grid { stroke: #e9edf3; stroke-width: 1; }
.zero-line { stroke: #9ba6b7; stroke-width: 1.2; stroke-dasharray: 5 5; }
.chart-axis { fill: #8993a4; font-size: 10px; }
.profit-line { fill: none; stroke: #2585d8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #fff; stroke: #1859a9; stroke-width: 3; }
.profit-line.all-negative { stroke: var(--red); }
.profit-line.all-positive { stroke: var(--green); }
.profit-line.mixed { stroke: #c18423; }
.chart-point.negative { stroke: var(--red); }
.chart-point.positive { stroke: var(--green); }
.chart-empty { min-height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.chart-empty strong { color: #4c5870; font-size: 14px; }
.chart-empty span { color: #8b95a6; font-size: 11px; }
.comparison-chart { display: grid; gap: 18px; }
.comparison-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 18px; }
.comparison-label strong, .comparison-label small { display: block; }
.comparison-label strong { overflow: hidden; color: #2b3750; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.comparison-label small { margin-top: 4px; color: #8c96a7; font-size: 10px; }
.comparison-bars { display: grid; gap: 7px; }
.comparison-bars > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) 90px; align-items: center; gap: 10px; }
.comparison-bars span { color: #778297; font-size: 10px; }
.comparison-bars i { display: block; min-width: 2px; height: 8px; border-radius: 99px; }
.comparison-bars i.expected { background: #b8c1cf; }
.comparison-bars i.actual { background: #2585d8; }
.comparison-bars i.actual.attention { background: var(--red); }
.comparison-bars i.actual.favorable { background: var(--green); }
.comparison-label small.attention { color: var(--red); }
.comparison-label small.favorable { color: var(--green); }
.comparison-bars b { color: #4b576d; font-size: 11px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.margin-chart { display: grid; gap: 13px; }
.margin-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 78px 40px; align-items: center; gap: 12px; }
.margin-row > strong { overflow: hidden; color: #3a465d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.margin-track { position: relative; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #f7f8fa 0 49.8%, #a9b2c1 49.8% 50.2%, #f7f8fa 50.2% 100%); }
.margin-track i { position: absolute; top: 2px; height: 8px; border-radius: 2px; }
.margin-track i.positive { left: 50%; background: #2585d8; }
.margin-track i.negative { right: 50%; background: #d87821; }
.margin-row b { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.margin-row b.positive { color: #1859a9; }
.margin-row b.negative { color: #b55f18; }
.margin-row small { color: #929baa; font-size: 10px; text-align: right; }
.repeat-list { display: grid; gap: 0; }
.repeat-row { display: grid; grid-template-columns: minmax(100px, 1.3fr) repeat(3, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0f4; align-items: center; }
.repeat-row:last-child { border-bottom: 0; }
.repeat-row strong, .repeat-row small { display: block; }
.repeat-row strong { font-size: 12px; }
.repeat-row small { margin-top: 4px; color: #909aaa; font-size: 10px; }
.repeat-row > span { color: #7a8598; font-size: 10px; text-align: right; }
.repeat-row b { display: block; margin-top: 3px; color: #344158; font-size: 12px; }
.repeat-row b.negative { color: var(--red); }
.repeat-row b.positive { color: var(--green); }
.repeat-state { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; }
.repeat-state.all_loss { color: #a92f40; background: #fff0f2; }
.repeat-state.all_profit { color: #14704c; background: #eaf8f1; }
.repeat-state.mixed { color: #8a5b0b; background: #fff7df; }
.quality-list { display: grid; gap: 18px; }
.quality-row { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 7px 14px; align-items: end; }
.quality-row > div:first-child strong, .quality-row > div:first-child span { display: block; }
.quality-row > div:first-child strong { font-size: 13px; }
.quality-row > div:first-child span { margin-top: 4px; color: #929baa; font-size: 10px; }
.quality-value { white-space: nowrap; }
.quality-value b { color: #28344d; font-size: 16px; }
.quality-value small { color: #9aa2b0; font-size: 10px; }
.quality-track { height: 8px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.quality-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #17875b, #55bc8d); }
.quality-row em { color: #647187; font-size: 11px; font-style: normal; text-align: right; }
.definition-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.definition-list li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf0f4; }
.definition-list li:last-child { border: 0; }
.definition-list strong { font-size: 13px; }
.definition-list span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.methodology-card { min-height: 0; }
.method-note { margin-top: 18px; padding: 13px 15px; border-radius: 9px; color: #76531d; background: #fff7e8; font-size: 11px; line-height: 1.65; }
.method-note strong { display: block; margin-bottom: 3px; font-size: 12px; }
.method-note span { display: block; }
.audit-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.audit-card { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .2s, box-shadow .2s; }
a.audit-card:hover { border-color: #b9d6f5; box-shadow: 0 9px 20px rgba(25,70,120,.07); }
.audit-card span, .audit-card strong, .audit-card small { display: block; }
.audit-card span { color: #68748a; font-size: 11px; font-weight: 800; }
.audit-card strong { margin: 9px 0 6px; color: #25314a; font-size: 28px; letter-spacing: -.04em; }
.audit-card small { color: #939cab; font-size: 10px; line-height: 1.5; }
.privacy-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: linear-gradient(145deg, #11203b, #172a49); color: #fff; }
.privacy-card .lock-symbol { margin-bottom: 20px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 99px; color: #86c0ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.privacy-card h3 { margin: 0; font-size: 21px; }
.privacy-card p { max-width: 460px; margin: 15px 0 0; color: #9dacbf; font-size: 11px; line-height: 1.8; }
.table-card { overflow: hidden; }
.table-card .card-heading { margin: 0; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.table-title-row { margin-top: 40px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
th { padding: 13px 14px; color: #667187; background: #f8f9fb; text-align: left; font-size: 11px; letter-spacing: .03em; white-space: nowrap; }
td { padding: 14px; border-top: 1px solid #edf0f4; color: #465166; vertical-align: middle; white-space: nowrap; }
tbody tr:hover { background: #fbfcfe; }
td strong, td small { display: block; }
td strong { color: #263149; font-size: 12px; }
td small { margin-top: 5px; color: #8993a4; font-size: 10px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.positive { color: var(--green); }
td.negative { color: var(--red); }
.cost-table { min-width: 1880px; }
.cost-table .sticky-cell { position: sticky; left: 0; z-index: 2; min-width: 145px; background: #fff; box-shadow: 1px 0 #edf0f4; }
.cost-table th.sticky-cell { z-index: 3; background: #f8f9fb; }
.cost-table tbody tr:hover .sticky-cell { background: #fbfcfe; }
.cost-table .cost-head { color: #765b28; background: #fffaf1; }
.cost-table .cost-col { background: #fffdfa; }
.cost-table .linked-row { cursor: pointer; outline: none; }
.cost-table .linked-row:hover, .cost-table .linked-row:focus { background: #f4f9ff; box-shadow: inset 4px 0 #2585d8; }
.cost-table .linked-row:hover .sticky-cell, .cost-table .linked-row:focus .sticky-cell { background: #f4f9ff; }
.table-cell-link { color: #245d8d; font-weight: 700; text-decoration: underline; text-decoration-color: #bfd3e5; text-underline-offset: 3px; }
.table-cell-link:hover { color: #164f80; text-decoration-color: currentColor; }
.table-detail-link { display: block; width: fit-content; margin-top: 4px; color: #24699f; font-size: 10px; font-weight: 800; }
.row-source-link { display: inline-flex; margin-top: 8px; padding: 4px 7px; border-radius: 5px; color: #1766b1; background: #edf5ff; font-size: 9px; font-weight: 800; }
.row-source-link:hover { color: #fff; background: #1766b1; }
.tag, .status-tag { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.tag { color: #245f9d; background: #edf5ff; }
.status-good { color: #17714f; background: #eaf8f2; }
.status-neutral { color: #725b25; background: #fff6df; }
.empty-cell, .empty-state { padding: 36px; color: #9aa2b0; text-align: center; }

@media (max-width: 1180px) {
  .kpi-grid.five { grid-template-columns: repeat(3, 1fr); }
  .cost-component-grid { grid-template-columns: repeat(3, 1fr); }
  .analysis-tabs { grid-template-columns: repeat(3, 1fr); }
  .audit-grid { grid-template-columns: repeat(3, 1fr); }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .principles-card { grid-template-columns: repeat(2, 1fr); }
  .principles-card > div { padding: 16px 24px; border-bottom: 1px solid var(--line); }
  .principles-card > div:nth-child(2) { border-right: 0; }
  .principles-card > div:nth-child(3), .principles-card > div:nth-child(4) { border-bottom: 0; }
}

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-panel-wrap { min-height: 100vh; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 60px; font-weight: 800; }
  .mobile-brand span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: var(--blue-600); }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 258px; transition: transform .22s; box-shadow: 20px 0 50px rgba(0,0,0,.25); }
  body.menu-open .sidebar { transform: translateX(0); }
  .menu-button { display: block; }
  .hero-card { grid-template-columns: 1fr; }
  .section-lead { grid-template-columns: 1fr; }
  .lead-metric { display: none; }
  .hero-status { display: none; }
  .analysis-grid, .analysis-grid.asset-analysis, .analysis-grid.chart-pair, .analysis-grid.trend-analysis { grid-template-columns: 1fr; }
  .kpi-grid.four { grid-template-columns: repeat(2, 1fr); }
  .filter-card { align-items: stretch; flex-direction: column; }
  .filter-card form { align-items: stretch; flex-wrap: wrap; }
  .query-summary { margin-left: 0; }
  .donut-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .donut-svg { width: 180px; height: 180px; }
}

@media (max-width: 620px) {
  .login-panel-wrap { padding: 28px 22px; }
  .content { padding: 22px 15px 48px; }
  .topbar { padding: 16px 15px; }
  .topbar h1 { font-size: 19px; }
  .security-pill { display: none; }
  .hero-card { min-height: 220px; padding: 28px 22px; border-radius: 15px; }
  .hero-card h2 { font-size: 28px; }
  .section-lead { min-height: 220px; padding: 28px 22px; border-radius: 15px; }
  .section-lead h2 { font-size: 28px; }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .section-title-row h2 { font-size: 24px; }
  .section-title-row p { text-align: left; }
  .module-grid, .kpi-grid.five, .kpi-grid.four { grid-template-columns: 1fr; }
  .cost-component-grid { grid-template-columns: 1fr; }
  .analysis-tabs { display: flex; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .analysis-tabs a { flex: 0 0 180px; scroll-snap-align: start; }
  .audit-grid { grid-template-columns: 1fr 1fr; }
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
  .donut-legend { width: 100%; }
  .platform-stack-row { grid-template-columns: 95px minmax(0, 1fr); }
  .comparison-row { grid-template-columns: 1fr; gap: 8px; }
  .margin-row { grid-template-columns: 86px minmax(0, 1fr) 64px; }
  .margin-row small { display: none; }
  .repeat-row { grid-template-columns: 1fr 1fr; }
  .principles-card { grid-template-columns: 1fr; }
  .principles-card > div { border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .principles-card > div:last-child { border-bottom: 0 !important; }
  .filter-card form { display: grid; grid-template-columns: 1fr; }
  .filter-card label { min-width: 0; }
  .bar-row { grid-template-columns: 72px 1fr 78px; }
  .notice { align-items: flex-start; flex-direction: column; }
  .login-simple-shell { padding: 18px; }
  .login-card { padding: 28px 24px 24px; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
}

/* Order cost workbench ---------------------------------------------------- */
[hidden] { display: none !important; }
body.drawer-open { overflow: hidden; }

.app-shell { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { width: 232px; padding: 18px 14px; background: #111827; }
.brand { padding: 0 8px 22px; }
.brand-mark.small { border-radius: 9px; background: #246bb2; }
.sidebar nav { gap: 3px; }
.nav-item { min-height: 42px; padding: 0 11px; border-radius: 7px; font-size: 14px; }
.nav-item.active { background: #1d3555; box-shadow: inset 3px 0 #4b9be7; }
.sidebar-nav-group { border-radius: 8px; }
.sidebar-nav-group.active { margin-bottom: 5px; padding-bottom: 7px; background: rgba(255,255,255,.035); }
.sidebar-nav-group .group-title { margin-bottom: 2px; }
.sidebar-subnav { display: none; gap: 1px; padding: 0 0 0 38px; }
.sidebar-nav-group.active .sidebar-subnav { display: grid; }
.sidebar-subnav-item { position: relative; padding: 7px 8px; border-radius: 5px; color: #8f9db2; font-size: 12px; line-height: 1.35; }
.sidebar-subnav-item::before { content: ""; position: absolute; left: -9px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #4b5567; transform: translateY(-50%); }
.sidebar-subnav-item:hover { color: #fff; background: rgba(255,255,255,.045); }
.sidebar-subnav-item.active { color: #fff; font-weight: 700; }
.sidebar-subnav-item.active::before { background: #5ba7ef; box-shadow: 0 0 0 3px rgba(91,167,239,.14); }
.sidebar-settings { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-settings + .sidebar-foot { margin-top: 8px; }
.sidebar-foot { margin-top: auto; }
.topbar { min-height: 74px; padding: 14px clamp(22px, 3vw, 36px); background: #fff; backdrop-filter: none; }
.topbar h1 { font-size: 23px; }
.content { padding: 24px clamp(20px, 3vw, 36px) 48px; }
.security-pill { font-size: 12px; }

.order-data-line { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; color: #778196; font-size: 12px; }
.order-data-line span { position: relative; }
.order-data-line span + span::before { content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #a8b0bd; }
.order-data-line form { margin: -5px 0 -5px auto; }
.order-refresh-button { min-height: 28px; padding: 0 10px; border: 1px solid #b9ccde; border-radius: 6px; color: #185f9f; background: #f7fbfe; font-size: 11px; font-weight: 800; cursor: pointer; }
.order-refresh-button:hover { border-color: #2878bd; color: #fff; background: #2878bd; }
.order-subnav { display: flex; overflow-x: auto; gap: 24px; margin: 0 0 16px; padding: 0 2px; border-bottom: 1px solid #dfe3ea; scrollbar-width: thin; }
.order-subnav a { position: relative; flex: 0 0 auto; padding: 10px 0 13px; color: #667085; font-size: 14px; font-weight: 700; }
.order-subnav a:hover { color: #1d5f9f; }
.order-subnav a.active { color: #185f9f; }
.order-subnav a.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: #2878bd; }

.order-filter-bar { margin-bottom: 20px; padding: 16px 18px; border: 1px solid #dfe3e9; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,.025); }
.order-filter-bar form { display: grid; grid-template-columns: repeat(6, minmax(120px,1fr)) auto auto; align-items: end; gap: 12px; }
.order-filter-bar label, .filter-field { display: grid; gap: 6px; color: #5f6b7d; font-size: 12px; font-weight: 700; }
.order-filter-bar input, .order-filter-bar select, .pagination-bar select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d8dde6; border-radius: 7px; outline: none; color: #263248; background: #fff; font-size: 14px; }
.order-filter-bar input:focus, .order-filter-bar select:focus, .pagination-bar select:focus { border-color: #5a94c9; box-shadow: 0 0 0 3px rgba(40,120,189,.11); }
.order-filter-bar .secondary-button, .order-filter-bar .outline-button { height: 40px; padding: 0 18px; border-radius: 7px; font-size: 14px; white-space: nowrap; }
.multi-filter { position: relative; min-width: 0; }
.multi-filter summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 11px; overflow: hidden; border: 1px solid #d8dde6; border-radius: 7px; color: #263248; background: #fff; font-size: 14px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; list-style: none; }
.multi-filter summary::-webkit-details-marker { display: none; }
.multi-filter summary::after { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid #6a7687; border-bottom: 1.5px solid #6a7687; transform: rotate(45deg) translateY(-2px); content: ""; }
.multi-filter[open] summary { border-color: #5a94c9; box-shadow: 0 0 0 3px rgba(40,120,189,.11); }
.multi-filter-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max(100%, 220px); max-height: 310px; overflow-y: auto; padding: 8px; border: 1px solid #dce2ea; border-radius: 9px; background: #fff; box-shadow: 0 14px 30px rgba(31,45,61,.16); }
.multi-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 5px 8px; border-bottom: 1px solid #edf0f4; color: #8a94a5; font-size: 11px; }
.multi-filter-actions button { border: 0; color: #185f9f; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.multi-filter-option { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 9px !important; min-height: 34px; padding: 5px 6px; border-radius: 6px; color: #344055 !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer; }
.multi-filter-option:hover { background: #f3f7fb; }
.multi-filter-option input { width: 15px !important; height: 15px !important; padding: 0 !important; accent-color: #2878bd; }
.multi-filter-empty { display: block; padding: 12px 6px; color: #929baa; font-weight: 400; }
.outline-button { display: grid; place-items: center; border: 1px solid #d8dde6; color: #536074; background: #fff; font-weight: 700; }
.outline-button:hover { border-color: #9eb9d3; color: #185f9f; }

.workspace-heading, .settings-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 24px 0 14px; }
.workspace-heading h2, .settings-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.workspace-heading p, .settings-heading p { margin: 6px 0 0; color: #788397; font-size: 13px; line-height: 1.55; }
.order-workspace-heading { align-items: flex-start; }
.order-heading-tools { display: grid; justify-items: end; gap: 10px; min-width: 0; }
.order-signal-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.order-signal-filter a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid #dce2e9; border-radius: 999px; color: #5f6b7d; background: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.order-signal-filter a:hover { border-color: #9eb9d3; color: #185f9f; background: #f5f9fc; }
.order-signal-filter a.active { border-color: #1d5d96; color: #fff; background: #1d5d96; }
.order-signal-filter a span { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; color: inherit; background: rgba(117,132,151,.12); font-size: 10px; font-variant-numeric: tabular-nums; }
.order-signal-filter a.active span { background: rgba(255,255,255,.18); }
.metric-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid #dfe3e9; border-radius: 10px; background: #fff; }
.metric-strip > div { min-width: 0; padding: 18px 20px; border-right: 1px solid #e7eaf0; }
.metric-strip > div:last-child { border-right: 0; }
.metric-strip span, .metric-strip strong { display: block; }
.metric-strip span { color: #6e7889; font-size: 13px; }
.metric-strip strong { overflow: hidden; margin-top: 9px; color: #253047; font-size: clamp(22px, 1.8vw, 30px); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric-strip.compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }

.overview-chart-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(520px,1.58fr); gap: 16px; margin-bottom: 16px; }
.analysis-panel, .order-table-panel, .repeat-sidebar, .user-create-panel { min-width: 0; border: 1px solid #dfe3e9; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,.025); }
.analysis-panel { margin-bottom: 16px; padding: 20px; }
.overview-chart-grid .analysis-panel { margin-bottom: 0; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.panel-heading h2 { margin: 0; color: #263047; font-size: 16px; }
.panel-heading small { color: #8a94a5; font-size: 12px; text-align: right; }
.compact-chart .donut-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 18px; }
.compact-chart .donut-svg { width: 175px; height: 175px; }
.trend-panel .line-chart { min-height: 260px; }

.order-table-panel { overflow: hidden; margin-bottom: 16px; }
.order-table-panel > .panel-heading { margin: 0; padding: 18px 20px; border-bottom: 1px solid #e7eaf0; }
.order-workbench-table { min-width: 1060px; }
.order-workbench-table th, .order-workbench-table td { padding: 13px 12px; font-size: 13px; }
.order-workbench-table th { color: #616d80; font-size: 12px; }
.order-workbench-table td strong { font-size: 13px; }
.order-workbench-table td small { font-size: 11px; }
.order-detail-row { cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
.order-detail-row:hover { background: #f6f9fc; }
.order-detail-row:focus-visible { outline: 2px solid #4f8fc8; outline-offset: -2px; background: #f6f9fc; }
.order-detail-row.row-problem > td { background: #fff6f7; }
.order-detail-row.row-problem > td:first-child { box-shadow: inset 4px 0 #d95768; }
.order-detail-row.row-problem:hover > td { background: #ffedef; }
.order-detail-row.row-problem:focus-visible > td { background: #ffedef; }
.order-id-line { display: flex; align-items: center; gap: 8px; }
.order-summary-cell { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.order-thumb { width: 46px; height: 58px; flex: 0 0 auto; border: 1px solid #e2e6ec; border-radius: 6px; background: #f7f8fa; object-fit: cover; }
.table-action, .table-source-link, .small-button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border: 1px solid #bfd3e5; border-radius: 6px; color: #185f9f; background: #f8fbfe; font-size: 12px; font-weight: 700; }
.table-action:hover, .table-source-link:hover, .small-button:hover { border-color: #2878bd; color: #fff; background: #2878bd; }
.table-source-link { vertical-align: middle; }
.order-id-line .table-source-link { min-height: 24px; padding: 0 7px; font-size: 11px; }
.signal-value { display: inline-grid; min-width: 92px; gap: 2px; padding: 6px 9px; border-radius: 6px; text-align: right; }
.signal-value strong, .signal-value small { color: inherit; }
.signal-attention { color: #a83243; background: #fff0f2; }
.signal-favorable { color: #14744d; background: #edf9f3; }
.signal-neutral { color: #657084; background: #f4f6f8; }
.table-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; color: #6f7a8c; font-size: 12px; }
.table-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.table-legend span::before { width: 8px; height: 8px; border-radius: 50%; content: ""; }
.table-legend .legend-attention::before { background: #d95768; }
.table-legend .legend-favorable::before { background: #2e9b70; }
.pagination-bar { display: grid; grid-template-columns: 1fr auto 116px; align-items: center; gap: 16px; min-height: 62px; padding: 10px 16px; border-top: 1px solid #e7eaf0; color: #778195; font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination a, .pagination strong, .pagination > span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #dfe3e9; border-radius: 6px; background: #fff; font-size: 12px; }
.pagination a:hover { border-color: #8fb4d6; color: #185f9f; }
.pagination strong { border-color: #2878bd; color: #fff; background: #2878bd; }
.pagination a.disabled { color: #afb5bf; pointer-events: none; background: #f7f8fa; }
.pagination-bar form { margin: 0; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(17,24,39,.34); }
.order-drawer { position: fixed; top: 0; right: 0; z-index: 100; width: min(600px, 100vw); height: 100vh; display: flex; flex-direction: column; color: #283348; background: #fff; box-shadow: -18px 0 44px rgba(17,24,39,.18); }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid #e6e9ef; }
.drawer-header span { color: #7b8596; font-size: 12px; }
.drawer-header h2 { margin: 5px 0 0; font-size: 20px; }
.drawer-close { min-height: 32px; padding: 0 10px; border: 1px solid #d9dee7; border-radius: 6px; color: #586477; background: #fff; font-size: 12px; }
.drawer-close:hover { color: #b23747; border-color: #e2a8b0; }
.drawer-source { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 8px 22px; border-bottom: 1px solid #e6e9ef; background: #f7f9fb; font-size: 12px; }
.drawer-source a { color: #185f9f; font-weight: 700; }
.drawer-source span { color: #7c8798; }
.drawer-scroll { overflow-y: auto; padding: 0 22px 28px; }
.drawer-order-image { display: block; width: 100%; max-height: 280px; margin-top: 20px; border: 1px solid #e5e9ef; border-radius: 10px; background: #f7f8fa; object-fit: contain; }
.drawer-order-image[hidden] { display: none; }
.drawer-section { padding: 20px 0; border-bottom: 1px solid #e6e9ef; }
.drawer-section:last-child { border-bottom: 0; }
.drawer-section h3 { margin: 0 0 14px; font-size: 14px; }
.detail-list { display: grid; gap: 10px; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: 115px minmax(0,1fr); gap: 14px; }
.detail-list dt { color: #7b8596; font-size: 12px; }
.detail-list dd { margin: 0; color: #303b50; font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.component-comparison { overflow-x: auto; }
.component-comparison h3 small { margin-left: 8px; color: #858e9e; font-size: 11px; font-weight: 500; }
.component-detail-head, .component-detail-row { display: grid; grid-template-columns: minmax(72px,1fr) 100px 82px 82px 74px; gap: 8px; min-width: 508px; padding: 8px 0; text-align: right; }
.component-detail-head { color: #858e9e; border-bottom: 1px solid #e8ebf0; font-size: 11px; }
.component-detail-row { border-bottom: 1px solid #f0f2f5; font-size: 12px; }
.component-detail-head span:first-child, .component-detail-row span:first-child { text-align: left; }
.component-attention span:last-child { color: var(--red); font-weight: 800; }
.component-favorable span:last-child { color: var(--green); font-weight: 800; }
.component-unavailable { color: #929baa; }
.drawer-total { display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; font-size: 13px; }
.drawer-total strong { font-size: 15px; }
.cost-summary p { margin: 0; padding: 12px 14px; border-left: 3px solid #d89a34; border-radius: 6px; color: #5f4a22; background: #fff8e8; font-size: 13px; line-height: 1.7; }

.repeat-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.repeat-layout .analysis-panel { margin-bottom: 0; }
.repeat-sidebar { max-height: 520px; overflow-y: auto; padding: 18px; }
.repeat-style-chip { position: relative; display: grid; gap: 7px; margin-bottom: 7px; padding: 11px 12px 11px 15px; border: 1px solid #e5e8ed; border-radius: 7px; }
.repeat-style-chip::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 0 3px 3px 0; content: ""; }
.repeat-style-chip.repeat-all_loss::before { background: var(--red); }
.repeat-style-chip.repeat-all_profit::before { background: var(--green); }
.repeat-style-chip.repeat-mixed::before { background: #c18423; }
.repeat-style-chip strong { font-size: 13px; }
.repeat-style-chip span { color: #7d8797; font-size: 11px; }
.repeat-chip-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.repeat-style-chip:hover, .repeat-style-chip.active { border-color: #9ec0de; background: #f3f8fc; }
.repeat-style-chip.active strong { color: #185f9f; }
.repeat-detail-panel { overflow: hidden; }
.repeat-conclusion { margin-bottom: 16px; padding: 14px 16px; border-left: 4px solid #c18423; border-radius: 7px; background: #fff9e9; }
.repeat-conclusion.all_loss { border-left-color: var(--red); background: #fff3f4; }
.repeat-conclusion.all_profit { border-left-color: var(--green); background: #effaf5; }
.repeat-conclusion strong { display: block; margin-bottom: 5px; font-size: 14px; }
.repeat-conclusion.all_loss strong { color: #a92f40; }
.repeat-conclusion.all_profit strong { color: #14704c; }
.repeat-conclusion.mixed strong { color: #8a5b0b; }
.repeat-conclusion p { margin: 0; color: #606c7f; font-size: 12px; line-height: 1.65; }
.repeat-orders-table { min-width: 720px; }
.repeat-order-row { cursor: pointer; }
.repeat-order-row td:first-child { border-left: 3px solid transparent; }
.repeat-order-row.row-problem td:first-child { border-left-color: var(--red); }
.repeat-order-row.row-favorable td:first-child { border-left-color: var(--green); }
.repeat-order-hint { margin: 10px 0 0; color: #7f8999; font-size: 11px; }
.reconciliation-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.reconciliation-item { position: relative; min-width: 0; padding: 17px 18px; border: 1px solid #dfe3e9; border-radius: 9px; color: inherit; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.reconciliation-item span, .reconciliation-item strong, .reconciliation-item small { display: block; }
.reconciliation-item span { color: #687487; font-size: 12px; }
.reconciliation-item strong { margin: 8px 0 5px; font-size: 25px; }
.reconciliation-item small { color: #8c95a4; font-size: 11px; line-height: 1.45; }
a.reconciliation-item:hover { border-color: #9db8dc; box-shadow: 0 8px 20px rgba(25,55,91,.08); transform: translateY(-1px); }
.reconciliation-item::before { position: absolute; top: 0; right: 18px; left: 18px; height: 3px; border-radius: 0 0 3px 3px; background: #7d93b1; content: ""; }
.reconciliation-item.task-urgent::before { background: #d84f66; }
.finance-task-panel { margin-bottom: 16px; }
.finance-task-panel .panel-heading { align-items: center; }
.finance-task-panel .panel-heading > div { min-width: 0; }
.finance-task-panel .panel-heading small { display: block; margin-top: 5px; text-align: left; }
.finance-task-panel .panel-heading > strong { flex: 0 0 auto; color: #c23b53; font-size: 20px; }
.finance-task-table { min-width: 700px; }
.finance-task-table td:first-child, .finance-task-table td:nth-child(2) { min-width: 150px; }
.finance-task-table td:nth-child(3) { min-width: 135px; }
.finance-task-table td:last-child { min-width: 130px; }
.finance-task-table td small { display: block; margin-top: 5px; color: #8a94a5; }
.status-tag.status-attention { color: #a82c43; border-color: #efbdc6; background: #fff2f4; }
.task-action-muted { color: #8a94a5; font-size: 12px; }
.table-footnote { margin: 0; padding: 10px 20px 14px; color: #8a94a5; font-size: 11px; }
.finance-checklist { display: grid; gap: 0; margin: 0; padding: 0; counter-reset: finance-step; list-style: none; }
.finance-checklist li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 13px 0 13px 38px; border-bottom: 1px solid #e8ebf0; counter-increment: finance-step; }
.finance-checklist li:last-child { border-bottom: 0; }
.finance-checklist li::before { position: absolute; top: 11px; left: 0; display: grid; width: 24px; height: 24px; border-radius: 50%; color: #1e64a8; background: #eaf3fc; content: counter(finance-step); place-items: center; font-size: 11px; font-weight: 700; }
.finance-checklist strong { color: #263a59; font-size: 12px; }
.finance-checklist span { color: #6f7c90; font-size: 12px; line-height: 1.55; }
.reconciliation-analysis { grid-template-columns: 1fr 1fr; }

.user-create-panel { padding: 20px; margin-bottom: 16px; }
.user-create-panel form { display: grid; grid-template-columns: 1fr 1fr 190px auto; align-items: end; gap: 12px; }
.user-create-panel label, .password-reset label { display: grid; gap: 6px; color: #5f6b7d; font-size: 12px; font-weight: 700; }
.user-create-panel input, .user-create-panel select, .user-admin-cell input, .user-admin-cell select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d8dde6; border-radius: 7px; background: #fff; }
.user-create-panel .secondary-button { height: 40px; white-space: nowrap; }
.user-table-panel table { min-width: 800px; }
.user-admin-cell { min-width: 480px; }
.user-admin-cell > form:first-child { display: flex; align-items: center; gap: 8px; }
.user-admin-cell select { width: 145px; }
.password-reset { display: flex; align-items: end; gap: 8px; margin-top: 9px; }
.password-reset label { flex: 1; }
.small-button { height: 40px; white-space: nowrap; }

.finance-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
.finance-metrics small { display: block; overflow: hidden; margin-top: 6px; color: #8992a1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.finance-actions { grid-template-columns: 1fr 1fr; }
.finance-actions.account-adjustment-only { grid-template-columns: minmax(0, 1fr); }
.finance-actions .analysis-panel { margin-bottom: 0; }
.finance-actions p { min-height: 44px; color: #687487; font-size: 13px; line-height: 1.7; }
.finance-actions .primary-button, .payroll-generate .primary-button { width: auto; min-width: 170px; height: 42px; margin-top: 12px; }
.stack-form { display: grid; gap: 11px; }
.stack-form label, .inline-filter label { display: grid; gap: 6px; color: #5f6b7d; font-size: 12px; font-weight: 700; }
.stack-form input, .inline-filter input, .inline-review-form input, .inline-review-form select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #d8dde6; border-radius: 7px; background: #fff; }
.inline-filter { display: flex; align-items: end; gap: 12px; }
.inline-filter .primary-button { margin: 0; }
.inline-review-form { display: grid; grid-template-columns: minmax(170px,1fr) minmax(120px,.7fr) auto auto; gap: 6px; min-width: 610px; }
.inline-review-form button { min-height: 36px; padding: 0 10px; border: 1px solid #cfd6e1; border-radius: 6px; background: #f7f9fb; color: #344055; font-weight: 700; white-space: nowrap; }
.inline-review-form button[value="confirmed"] { border-color: #8fb9df; color: #185f9f; background: #eef6fc; }
.inline-review-form button:disabled { opacity: .45; cursor: not-allowed; }
.payroll-input { grid-template-columns: 74px 74px 90px auto; min-width: 390px; }
.payroll-assignment { grid-template-columns: minmax(120px,1fr) minmax(110px,1fr) auto; min-width: 390px; margin-bottom: 8px; }
.payroll-edit-form { display: grid; grid-template-columns: repeat(4,minmax(115px,1fr)); gap: 10px; min-width: 680px; padding-top: 10px; }
.payroll-edit-form label { display: grid; gap: 4px; color: #5f6b7d; font-size: 11px; font-weight: 700; }
.payroll-edit-form input, .payroll-edit-form select { width: 100%; height: 36px; padding: 0 9px; border: 1px solid #d8dde6; border-radius: 7px; background: #fff; }
.payroll-edit-form .primary-button { align-self: end; min-height: 36px; }
.payroll-version-actions, .payroll-run-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.table-action-button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 32px; padding: 0 12px; border: 1px solid #1d5d96; border-radius: 6px; color: #fff; background: #1d5d96; font-size: 11px; font-weight: 800; white-space: nowrap; box-shadow: 0 5px 12px rgba(29,93,150,.12); }
.table-action-button:hover { border-color: #174b79; background: #174b79; }
.table-action-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 9px; border: 1px solid #d3dbe5; border-radius: 6px; color: #315778; background: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.table-danger-link { min-height: 32px; padding: 0 8px; border: 0; color: #a23943; background: transparent; font-size: 11px; font-weight: 800; white-space: nowrap; }
.inline-delete-form { margin: 0; }
.danger-button { border: 1px solid #efb4b4; background: #fff5f5; color: #a52727; }
.compact-button { padding: 7px 12px; white-space: nowrap; }
.payroll-worker-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 175px; }
.payroll-sheet-table th:first-child, .payroll-sheet-table td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; }
.payroll-sheet-table thead th:first-child { z-index: 3; background: #f7f8fa; }
.payroll-edit-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 40px); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 24px 80px rgba(15,23,42,.28); }
.payroll-edit-dialog::backdrop { background: rgba(15,23,42,.48); backdrop-filter: blur(2px); }
.payroll-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 16px; border-bottom: 1px solid #e7eaf0; }
.payroll-dialog-heading h2, .payroll-dialog-heading small { margin: 0; }
.payroll-dialog-heading > button { width: 38px; height: 38px; border-radius: 50%; font-size: 24px; line-height: 1; }
.payroll-modal-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; min-width: 0; max-height: calc(100vh - 130px); overflow: auto; padding: 20px 24px 24px; }
.payroll-modal-form label { display: grid; gap: 6px; }
.payroll-wide-field, .payroll-dialog-actions { grid-column: 1 / -1; }
.payroll-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.finance-queue-nav { margin-bottom: 16px; }
.inline-review-form input[type="checkbox"] { width: auto; height: auto; }
.status-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #176b48; background: #eaf7f1; font-size: 11px; font-weight: 800; }
.status-badge.muted { color: #687487; background: #f0f2f5; }
.subtext { display: block; margin-top: 4px; color: #8a93a2; font-size: 10px; }
.payroll-generate { margin-bottom: 16px; }

@media (max-width: 1180px) {
  .order-filter-bar form { grid-template-columns: repeat(4, minmax(130px,1fr)); }
  .order-filter-bar .secondary-button, .order-filter-bar .outline-button { width: 100%; }
  .overview-chart-grid { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .metric-strip > div:nth-child(3) { border-right: 0; }
  .metric-strip > div:nth-child(-n+3) { border-bottom: 1px solid #e7eaf0; }
  .reconciliation-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .user-create-panel form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { width: 232px; }
  .content { padding: 20px 18px 42px; }
  .order-filter-bar form { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .repeat-layout, .reconciliation-analysis { grid-template-columns: 1fr; }
  .repeat-sidebar { max-height: 260px; }
  .pagination-bar { grid-template-columns: 1fr auto; }
  .pagination-bar > form { grid-column: 1 / -1; width: 116px; }
  .finance-actions { grid-template-columns: 1fr; }
  .order-workspace-heading { align-items: stretch; flex-direction: column; }
  .order-heading-tools { justify-items: start; }
  .order-signal-filter { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .topbar { min-height: 64px; }
  .menu-button { width: 46px; font-size: 12px; }
  .topbar h1 { font-size: 19px; }
  .order-data-line { gap: 6px 18px; }
  .order-subnav { gap: 20px; }
  .order-filter-bar { padding: 14px; }
  .order-filter-bar form { grid-template-columns: 1fr; }
  .metric-strip, .metric-strip.compact-metrics { grid-template-columns: 1fr 1fr; }
  .metric-strip > div, .metric-strip > div:nth-child(3) { border-right: 1px solid #e7eaf0; border-bottom: 1px solid #e7eaf0; }
  .metric-strip > div:nth-child(2n) { border-right: 0; }
  .metric-strip > div:last-child { border-bottom: 0; }
  .metric-strip strong { font-size: 22px; }
  .compact-chart .donut-layout { grid-template-columns: 1fr; }
  .pagination-bar { grid-template-columns: 1fr; }
  .pagination { overflow-x: auto; justify-content: flex-start; }
  .pagination-bar > form { grid-column: auto; }
  .order-drawer { width: 100vw; }
  .drawer-header, .drawer-source { padding-right: 16px; padding-left: 16px; }
  .drawer-scroll { padding-right: 16px; padding-left: 16px; }
  .reconciliation-grid { grid-template-columns: 1fr 1fr; }
  .finance-checklist li { grid-template-columns: 1fr; gap: 5px; }
  .user-create-panel form { grid-template-columns: 1fr; }
  .user-admin-cell { min-width: 410px; }
  .finance-metrics { grid-template-columns: 1fr; }
  .inline-filter { align-items: stretch; flex-direction: column; }
  .payroll-modal-form { grid-template-columns: 1fr; }
}

/* Finance workspaces: dense, task-first surfaces. */
.section-kicker { display: block; margin-bottom: 5px; color: #66758a; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.workspace-heading.compact { margin-bottom: 14px; }
.workspace-heading .primary-button { width: auto; height: 40px; margin: 0; padding: 0 16px; }
.finance-state { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: #8a5b12; background: #fff4d8; font-size: 11px; font-weight: 800; }
.finance-state.done { color: #176b48; background: #e9f7f0; }
.readonly-banner { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid #dbe4ef; border-radius: 8px; color: #526175; background: #f7f9fc; font-size: 12px; }
.readonly-banner strong { color: #1f3e62; }
.source-ownership { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 16px; padding: 12px 15px; border: 1px solid #dce4ec; border-radius: 9px; color: #617083; background: #fff; font-size: 12px; }
.source-ownership.compact { margin: 10px 0; padding: 9px 12px; }
.source-ownership b { color: #294d73; }

.bank-action-bar { display: flex; align-items: end; gap: 10px; margin: 14px 0 16px; padding: 13px; border: 1px solid #dfe4ea; border-radius: 10px; background: #fff; }
.bank-action-bar form { display: flex; align-items: end; gap: 8px; padding-right: 10px; border-right: 1px solid #e5e8ed; }
.bank-action-bar form:last-child { padding-right: 0; border-right: 0; }
.bank-action-bar span, .bank-action-bar label { display: grid; gap: 4px; color: #647184; font-size: 11px; font-weight: 700; }
.bank-action-bar span strong { color: #26364c; font-size: 12px; }
.bank-action-bar input, .bank-action-bar select { height: 36px; max-width: 210px; padding: 0 9px; border: 1px solid #d5dce5; border-radius: 6px; background: #fff; }
.bank-action-bar button { height: 36px; margin: 0; padding: 0 13px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f7f9fb; color: #334155; font-weight: 800; white-space: nowrap; }
.bank-action-bar .primary-button { width: auto; color: #fff; background: #1d5d96; }
.file-picker input { max-width: 190px; padding: 5px; }

.bank-role-heading { align-items: end; }
.bank-role-heading .secondary-view { color: #1d5d96; background: #eef5fb; box-shadow: none; }
.bank-outcome-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bank-outcome-metrics .metric-auto { box-shadow: inset 0 3px #2b8a69; background: #f7fcfa; }
.bank-outcome-metrics .metric-auto strong, .bank-count-positive { color: #197052; }
.bank-outcome-metrics .metric-action { box-shadow: inset 0 3px #d59534; background: #fffbf3; }
.bank-outcome-metrics .metric-action strong, .bank-count-warning { color: #a8670c; }
.bank-rule-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 14px 0; overflow: hidden; border: 1px solid #dfe5eb; border-radius: 10px; background: #dfe5eb; }
.bank-rule-strip span { padding: 13px 15px; color: #667386; background: #fff; font-size: 11px; line-height: 1.55; }
.bank-rule-strip b { display: block; margin-bottom: 2px; color: #27384e; font-size: 12px; }
.bank-boss-note { width: 100%; margin: 0; }
.bank-batch-table td { vertical-align: middle; }
.cost-table.bank-batch-table { min-width: 760px; }
.cost-table.bank-statement-table { min-width: 820px; }
.bank-batch-table .subtext { display: block; margin-top: 4px; color: #8a95a4; font-size: 10px; }
.bank-progress { display: grid; gap: 5px; min-width: 105px; }
.bank-progress > span { height: 5px; overflow: hidden; border-radius: 99px; background: #e5e9ee; }
.bank-progress i { display: block; height: 100%; border-radius: inherit; background: #2c8064; }
.bank-progress small { color: #6d7888; font-size: 10px; }
.bank-batch-heading { align-items: end; }
.bank-batch-heading form { margin: 0; }
.bank-batch-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.bank-batch-summary span { display: flex; align-items: baseline; gap: 7px; padding: 10px 13px; border: 1px solid #e0e5eb; border-radius: 8px; color: #718095; background: #fff; font-size: 11px; }
.bank-batch-summary b { color: #26384e; font-size: 19px; }
.bank-batch-summary .auto b { color: #197052; }
.bank-batch-summary .warning b { color: #a8670c; }
.readonly-pill { padding: 7px 11px; border: 1px solid #d8e0e8; border-radius: 99px; color: #6d7b8d; background: #f8fafc; font-size: 11px; font-weight: 800; }
.auto-match-banner { border-color: #b9dfd0; background: #f1faf6; }
.auto-match-banner strong { color: #17654c; }

.bank-reconcile-shell { display: grid; grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); width: 100%; height: calc(100vh - 250px); min-height: 620px; max-height: 900px; overflow: hidden; border: 1px solid #dce2e9; border-radius: 10px; background: #fff; }
.bank-transaction-list { min-width: 0; overflow-x: hidden; overflow-y: auto; border-right: 1px solid #dfe4ea; background: #f8fafc; }
.bank-list-heading { position: sticky; top: 0; z-index: 2; display: grid; gap: 9px; padding: 12px 14px; border-bottom: 1px solid #e2e7ed; background: #f8fafc; font-size: 12px; }
.bank-list-heading > div { display: flex; justify-content: space-between; align-items: center; }
.bank-list-heading span { color: #7a8798; }
.bank-list-heading form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.bank-list-heading input { min-width: 0; height: 32px; padding: 0 9px; border: 1px solid #ccd6e0; border-radius: 6px; background: #fff; }
.bank-list-heading button { min-height: 32px; padding: 0 10px; }
.bank-list-heading a { color: #1f659e; font-weight: 700; }
.account-date-preview { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid #dfe7ee; border-radius: 7px; background: #f8fafc; }
.account-date-preview span { color: #718095; font-size: 12px; }
.account-ledger-filter form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.account-ledger-filter input[type="date"] { min-height: 34px; }
.bank-transaction-card { display: grid; gap: 7px; padding: 14px 16px; border-bottom: 1px solid #e6eaf0; color: #657287; font-size: 11px; }
.bank-transaction-card:hover { background: #f1f6fb; }
.bank-transaction-card.active { box-shadow: inset 3px 0 #256aa5; background: #eaf3fb; }
.bank-transaction-top { display: flex; justify-content: space-between; gap: 12px; color: #233348; font-size: 13px; }
.bank-transaction-top b { color: #17263a; white-space: nowrap; }
.bank-transaction-card small { color: #8a5b12; }
.bank-transaction-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date amount" "counterparty amount" "summary summary"; gap: 4px 12px; width: 100%; min-width: 0; padding: 13px 16px; border-bottom: 1px solid #e4e9ef; color: #647287; background: #fff; font-size: 11px; }
.bank-transaction-row:hover { background: #f2f6fa; }
.bank-transaction-row.active { box-shadow: inset 3px 0 #256aa5; background: #eaf3fb; }
.bank-transaction-row > span { grid-area: date; overflow: hidden; color: #7a8798; text-overflow: ellipsis; white-space: nowrap; }
.bank-transaction-row > strong { grid-area: counterparty; min-width: 0; overflow: hidden; color: #203146; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.bank-transaction-row > small { grid-area: summary; min-width: 0; overflow: hidden; color: #748195; text-overflow: ellipsis; white-space: nowrap; }
.bank-transaction-row > b { grid-area: amount; align-self: center; color: #17263a; font-size: 14px; white-space: nowrap; }
.bank-reconcile-detail { min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 20px 22px 26px; }
.bank-reconcile-detail > * { min-width: 0; }
.bank-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #e6eaf0; }
.bank-detail-head h2 { margin: 0; font-size: 21px; }
.bank-detail-head p { margin: 6px 0 0; color: #788496; font-size: 11px; }
.bank-detail-head > strong { color: #17263a; font-size: 24px; }
.bank-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #e6eaf0; }
.bank-detail-heading > div { min-width: 0; }
.bank-detail-heading h2 { margin: 3px 0 0; overflow: hidden; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.bank-detail-heading p { margin: 6px 0 0; color: #788496; font-size: 11px; }
.bank-detail-heading > strong { flex: 0 0 auto; color: #17263a; font-size: 24px; white-space: nowrap; }
.bank-reference-card { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; margin: 14px 0 0; padding: 12px; border: 1px solid #cbdcec; border-radius: 9px; background: #f3f8fc; }
.bank-reference-card > div { display: grid; gap: 5px; min-width: 0; }
.bank-reference-card span { color: #64768a; font-size: 10px; font-weight: 800; }
.bank-reference-card strong { color: #172d46; font-size: 15px; line-height: 1.45; }
.bank-reference-card .bank-code-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px solid #d9e5ef; }
.bank-code-chips b { padding: 4px 8px; border-radius: 5px; color: #14588e; background: #dcecf8; font-size: 12px; }
.bank-balance { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin: 16px 0; padding: 14px 16px; border: 1px solid #dce3eb; border-radius: 9px; background: #f8fafc; }
.bank-balance span { display: grid; gap: 4px; color: #718095; font-size: 11px; }
.bank-balance strong { color: #25354a; font-size: 18px; }
.bank-balance i { color: #94a0af; font-style: normal; }
.bank-balance .remaining { padding-left: 12px; border-left: 2px solid #d49b42; }
.bank-balance .remaining strong { color: #9a6517; }
.bank-allocation-section, .bank-candidate-section { padding: 15px 0; border-top: 1px solid #e7eaf0; }
.bank-allocation-section h3, .bank-candidate-section h3 { margin: 0; font-size: 14px; }
.allocation-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid #cfe3d8; border-radius: 7px; background: #f4fbf7; }
.allocation-row span { display: grid; gap: 3px; font-size: 12px; }
.allocation-row small { color: #62766a; }
.allocation-row .purchase-links { margin-top: 3px; }
.allocation-row form { margin: 0; }
.text-danger { border: 0; color: #a23943; background: none; font-size: 11px; font-weight: 800; }
.empty-copy { margin: 7px 0 0; color: #8a95a5; font-size: 12px; }
.bank-saved-allocation { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 1px solid #cfe3d8; border-radius: 7px; background: #f4fbf7; }
.bank-saved-allocation > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bank-saved-allocation span { min-width: 0; overflow: hidden; color: #355147; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bank-saved-allocation strong { color: #176b48; font-size: 13px; white-space: nowrap; }
.bank-saved-allocation form { margin: 0; }
.bank-allocation-detail, .bank-candidate-detail { flex: 0 0 auto; color: #216496; font-size: 10px; font-weight: 800; white-space: nowrap; }
.bank-candidates { display: grid; gap: 7px; }
.bank-candidate-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 112px; align-items: center; gap: 10px; min-height: 58px; padding: 8px 11px; border: 1px solid #dfe4ea; border-radius: 7px; background: #fff; }
.candidate-main { display: grid; gap: 4px; min-width: 0; }
.candidate-main strong { overflow: hidden; color: #26364a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-main small { overflow: hidden; color: #7a8798; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-target-amount { display: inline-flex; align-items: baseline; gap: 6px; width: fit-content; padding: 3px 7px; border-radius: 5px; color: #27435f; background: #eef4f9; }
.candidate-target-amount small { color: #687a8d; font-size: 9px; font-weight: 800; }
.candidate-target-amount b { font-size: 12px; }
.confidence { padding: 4px 7px; border-radius: 999px; color: #79601d; background: #fff5d9; font-size: 10px; font-weight: 800; }
.confidence-高 { color: #176b48; background: #e9f7f0; }
.candidate-amount { width: 112px; height: 34px; padding: 0 8px; border: 1px solid #d2d9e2; border-radius: 6px; text-align: right; }
.allocation-amount-choice { display: grid; justify-items: end; gap: 3px; min-width: 112px; }
.allocation-amount-choice small { display: none; color: #66768a; font-size: 9px; font-weight: 800; }
.allocation-amount-choice .candidate-amount { display: none; }
.allocation-available { color: #68778a; font-size: 10px; font-weight: 800; text-align: right; white-space: nowrap; }
.bank-allocation-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1px solid #dfe4ea; border-radius: 7px; background: #fff; }
.bank-allocation-choice:hover { border-color: #b8ccdf; background: #fbfdff; }
.bank-allocation-choice > input[type="checkbox"] { width: 15px; height: 15px; }
.bank-allocation-choice > span { display: grid; gap: 4px; min-width: 0; }
.bank-allocation-choice > span strong, .bank-allocation-choice > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-allocation-choice > span strong { color: #26364a; font-size: 12px; }
.bank-allocation-choice > span small { color: #7a8798; font-size: 10px; }
.bank-allocation-choice .bank-candidate-detail { width: fit-content; margin-top: 2px; }
.bank-allocation-choice.is-selected { border-color: #91b8db; background: #f2f8fd; }
.bank-allocation-choice.is-selected .allocation-amount-choice small,
.bank-allocation-choice.is-selected .allocation-amount-choice .candidate-amount { display: block; }
.bank-allocation-choice.is-selected .allocation-available { display: none; }
.candidate-result-amount { color: #176b48; font-size: 11px; font-weight: 800; text-align: right; white-space: nowrap; }
.bank-reconcile-controls { position: sticky; bottom: 8px; z-index: 6; display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid #cad8e5; border-radius: 9px; background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(28,49,74,.13); backdrop-filter: blur(8px); }
.bank-reconcile-controls > input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d5dce5; border-radius: 6px; }
.bank-reconcile-controls > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bank-reconcile-controls button { min-height: 46px; padding: 0 13px; border: 1px solid #b8c9da; border-radius: 6px; background: #f7f9fb; color: #23527d; font-weight: 800; }
.bank-reconcile-controls .primary-button { width: auto; margin: 0; color: #fff; background: #1d5d96; }
.bank-identity { margin-top: 14px; color: #657287; font-size: 11px; }
.bank-identity .inline-review-form { margin-top: 9px; }
.bank-empty-state { display: grid; place-items: center; gap: 6px; min-height: 260px; color: #7d8999; text-align: center; }
.bank-empty-state strong { color: #425268; font-size: 15px; }
.bank-empty-state.compact { min-height: 90px; }
.bank-purchase-browser { padding: 15px 0; border-top: 1px solid #e7eaf0; }
.bank-purchase-browser .panel-heading > div { display: grid; gap: 3px; }
.bank-purchase-browser .panel-heading h3 { margin: 0; font-size: 14px; }
.bank-purchase-browser .panel-heading > a { color: #286493; font-size: 11px; font-weight: 800; }
.purchase-search-form { display: grid; grid-template-columns: minmax(230px, 1fr) 180px auto; gap: 7px; margin: 9px 0; }
.purchase-search-form input, .purchase-search-form select, .purchase-search-form button { height: 36px; padding: 0 9px; border: 1px solid #d0d9e3; border-radius: 6px; background: #fff; }
.purchase-search-form button { color: #fff; border-color: #28679c; background: #28679c; font-weight: 800; }
.account-period-guide { display: flex; gap: 9px; margin: 9px 0; padding: 10px 12px; border: 1px solid #ead7ad; border-radius: 7px; color: #745b28; background: #fffaf0; font-size: 11px; line-height: 1.55; }
.account-period-guide strong { flex: 0 0 auto; color: #8a5b0d; }
.account-draft-explainer { display: flex; align-items: start; gap: 12px; margin: 12px 0; padding: 12px 14px; border: 1px solid #e4cf9c; border-radius: 8px; color: #735821; background: #fff9eb; font-size: 11px; line-height: 1.6; }
.account-draft-explainer strong { flex: 0 0 auto; color: #815408; font-size: 12px; }
.bank-purchase-results { display: grid; gap: 7px; max-height: 520px; overflow-y: auto; padding-right: 3px; }
.bank-purchase-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 118px; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #dfe5eb; border-radius: 8px; background: #fff; }
.bank-purchase-row:hover { border-color: #b8ccdf; background: #fbfdff; }
.bank-purchase-row > input[type="checkbox"] { width: 15px; height: 15px; }
.purchase-row-spacer { width: 15px; }
.purchase-card-main { display: grid; gap: 5px; min-width: 0; }
.purchase-card-main > div:first-child { display: flex; align-items: center; gap: 7px; }
.purchase-card-main > div:first-child strong { color: #526176; font-size: 10px; }
.purchase-source-amount { display: grid; justify-items: end; gap: 1px; margin-left: auto; }
.purchase-source-amount small { color: #7a8797; font-size: 8px; font-weight: 700; }
.purchase-card-main > div:first-child .purchase-source-amount b { color: #1c2f47; font-size: 13px; }
.purchase-card-main h4 { margin: 0; overflow: hidden; color: #20344d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-card-main p { margin: 0; overflow: hidden; color: #7a8797; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.settlement-badge { padding: 3px 6px; border-radius: 99px; color: #166348; background: #e8f6ef; font-size: 9px; font-weight: 800; }
.settlement-账期 { color: #865916; background: #fff1d7; }
.settlement-待确认, .settlement-未发料 { color: #7b657a; background: #f1eaf1; }
.purchase-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.purchase-source-link, .account-status-link { color: #216496; font-size: 10px; font-weight: 800; }
.purchase-proof { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; padding: 3px 6px; border: 1px solid #d7e2eb; border-radius: 5px; color: #365978; background: #f7fafc; font-size: 9px; }
.purchase-proof img { width: 24px; height: 24px; border-radius: 3px; object-fit: cover; }
.purchase-proof b { color: #526a81; font-size: 9px; }
.purchase-proof span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-no-proof { color: #9a7b54; font-size: 9px; }
.account-status-link { display: inline-flex; justify-content: center; padding: 6px 7px; border-radius: 5px; background: #edf5fb; text-align: center; }
.account-status-link.pending { color: #8a5f1e; background: #fff5e2; }
.candidate-result-amount.warning { color: #94641e; }
.account-payment-row { border-color: #ead5a9; background: #fffdf8; }

.payroll-overview-tools { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin: 14px 0; }
.payroll-overview-tools > form { display: flex; align-items: end; gap: 8px; padding: 12px; border: 1px solid #dfe4ea; border-radius: 9px; background: #fff; }
.payroll-overview-tools label { display: grid; flex: 1; gap: 5px; color: #647184; font-size: 11px; font-weight: 700; }
.payroll-overview-tools input, .payroll-overview-tools select { height: 36px; padding: 0 9px; border: 1px solid #d4dbe4; border-radius: 6px; }
.payroll-overview-tools button { width: auto; height: 36px; margin: 0; padding: 0 12px; border-radius: 6px; }
.payroll-unit-settings { border: 1px solid #dfe4ea; border-radius: 9px; background: #fff; }
.payroll-unit-settings summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 10px 12px; cursor: pointer; list-style: none; }
.payroll-unit-settings summary::-webkit-details-marker { display: none; }
.payroll-unit-settings summary span { display: grid; gap: 4px; }
.payroll-unit-settings summary strong { color: #26364a; font-size: 12px; }
.payroll-unit-settings summary small { color: #7b8797; font-size: 10px; font-weight: 500; }
.payroll-unit-settings summary b { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1px solid #cbd5df; border-radius: 6px; color: #365978; background: #f7f9fb; font-size: 11px; white-space: nowrap; }
.payroll-unit-settings[open] summary { border-bottom: 1px solid #e4e8ed; }
.payroll-unit-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.payroll-unit-settings > form { display: flex; align-items: end; gap: 8px; padding: 10px 12px 12px; }
.payroll-filter-bar { display: flex; align-items: end; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 1px solid #dfe4ea; border-radius: 8px; background: #fff; }
.payroll-filter-bar label { display: grid; gap: 4px; color: #68768a; font-size: 10px; font-weight: 800; }
.payroll-filter-bar input, .payroll-filter-bar select { min-width: 130px; height: 34px; padding: 0 8px; border: 1px solid #d3dae3; border-radius: 6px; background: #fff; }
.payroll-filter-bar button, .payroll-filter-bar a { display: grid; place-items: center; height: 34px; padding: 0 12px; border: 1px solid #ccd5df; border-radius: 6px; background: #f7f9fb; color: #344256; font-size: 11px; font-weight: 800; }
.main-area:has(.payroll-sheet-shell) .topbar, .main-area:has(.bank-reconcile-shell) .topbar { display: none; }
.content:has(.payroll-sheet-shell), .content:has(.bank-reconcile-shell) { padding: 18px 20px 40px; }
.payroll-sheet-shell { min-height: 570px; overflow: hidden; border: 1px solid #dbe1e8; border-radius: 9px; background: #fff; }
.payroll-sheet-scroll { min-width: 0; max-height: 330px; overflow: auto; }
.payroll-edit-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.payroll-edit-table th, .payroll-edit-table td { height: 42px; padding: 0; border-right: 1px solid #e4e8ed; border-bottom: 1px solid #e4e8ed; background: #fff; white-space: nowrap; }
.payroll-edit-table th { position: sticky; top: 0; z-index: 5; height: 34px; padding: 0 8px; color: #526074; background: #f4f6f8; font-size: 10px; text-align: center; }
.payroll-edit-table thead tr:nth-child(2) th { top: 34px; }
.payroll-edit-table .group-source, .payroll-edit-table .source-cell { background: #edf6ff; }
.payroll-edit-table .group-portal { background: #f8f9fb; }
.payroll-edit-table .group-calc, .payroll-edit-table .calc-cell { background: #f3f5f7; }
.payroll-edit-table .sticky-index { position: sticky; left: 0; z-index: 7; width: 42px; min-width: 42px; padding: 0 8px; text-align: center; }
.payroll-edit-table .sticky-person { position: sticky; left: 42px; z-index: 7; width: 150px; min-width: 150px; }
.payroll-edit-table .sticky-assignment { position: sticky; left: 192px; z-index: 7; width: 190px; min-width: 190px; padding: 0 6px; box-shadow: 4px 0 8px rgba(28, 44, 66, .05); }
.payroll-edit-table thead .sticky-index, .payroll-edit-table thead .sticky-person, .payroll-edit-table thead .sticky-assignment { z-index: 10; background: #eef1f5; }
.sheet-input, .sheet-note { width: 94px; height: 41px; padding: 0 7px; border: 0; outline: 0; background: transparent; color: #26364a; text-align: right; }
.sheet-input:focus, .sheet-note:focus { box-shadow: inset 0 0 0 2px #3a78ad; background: #fff; }
.source-field { color: #1d5d96; font-weight: 800; }
.sheet-value { display: block; min-width: 94px; padding: 0 8px; text-align: right; }
.note-cell { min-width: 180px; }
.sheet-note { width: 180px; text-align: left; }
.sheet-note-readonly { display: block; overflow: hidden; width: 180px; padding: 0 8px; text-overflow: ellipsis; }
.calc-cell { min-width: 102px; padding: 0 8px !important; font-weight: 800; }
.status-cell { min-width: 90px; padding: 0 8px !important; }
.validation-pill { display: inline-flex; max-width: 130px; overflow: hidden; padding: 4px 7px; border-radius: 999px; color: #9a6517; background: #fff2cf; font-size: 10px; font-weight: 800; text-overflow: ellipsis; }
.validation-pill.ok { color: #176b48; background: #e8f7ef; }
.worker-inspector { display: grid; width: 100%; height: 41px; padding: 5px 9px; border: 0; background: transparent; text-align: left; }
.worker-inspector strong { overflow: hidden; color: #223348; font-size: 11px; text-overflow: ellipsis; }
.worker-inspector small { color: #8792a2; font-size: 9px; }
.sheet-assignment { display: grid; grid-template-columns: 1fr 1fr auto; gap: 3px; }
.sheet-assignment select { min-width: 0; height: 30px; padding: 0 4px; border: 1px solid #d6dde5; border-radius: 4px; background: #fff; font-size: 9px; }
.sheet-assignment button { height: 30px; padding: 0 5px; border: 1px solid #cbd5df; border-radius: 4px; background: #f6f8fa; font-size: 9px; }
.payroll-edit-table tr.row-dirty td { box-shadow: inset 0 2px #d89a37, inset 0 -2px #d89a37; }
.payroll-edit-table tr.selected td { background-color: #f0f6fb; }
.payroll-edit-table tr.row-exception .sticky-index { color: #a45d13; background: #fff8e8; }
.payroll-inspector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 215px; padding: 12px; border-top: 1px solid #dfe4ea; background: #fafbfc; }
.inspector-empty { display: grid; place-items: center; gap: 6px; min-height: 220px; color: #8a95a5; text-align: center; }
.inspector-empty, .inspector-heading { grid-column: 1 / -1; }
.inspector-heading { padding: 0 2px 10px; border-bottom: 1px solid #e1e5eb; }
.inspector-heading h3 { margin: 0; font-size: 17px; }
.inspector-heading p { margin: 5px 0 0; color: #7b8798; font-size: 10px; }
.payroll-inspector section { padding: 12px; border: 1px solid #e1e5eb; border-radius: 7px; background: #fff; }
.payroll-inspector h4 { margin: 0 0 8px; color: #536176; font-size: 11px; }
.payroll-inspector section > div { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; color: #7a8696; font-size: 10px; }
.payroll-inspector section strong { color: #2d3b4e; }
.payroll-inspector .history-row { display: block; line-height: 1.5; }
.payroll-save-bar { position: sticky; bottom: 12px; z-index: 15; display: grid; grid-template-columns: auto minmax(260px, 1fr) auto auto; align-items: center; gap: 9px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid #cfd8e3; border-radius: 9px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(30, 48, 72, .14); backdrop-filter: blur(8px); }
.payroll-save-bar span { color: #667489; font-size: 11px; }
.payroll-save-bar input { height: 36px; padding: 0 10px; border: 1px solid #d1d9e2; border-radius: 6px; }
.payroll-save-bar button { height: 36px; margin: 0; padding: 0 12px; border: 1px solid #cbd5df; border-radius: 6px; background: #f7f9fb; font-size: 11px; font-weight: 800; }
.payroll-save-bar .primary-button { width: auto; color: #fff; background: #1d5d96; }
.historical-bank-statements { margin-top: 18px; }
.historical-bank-statements summary { cursor: pointer; font-weight: 700; padding: 18px 20px; }
.bank-pending-kind-nav { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; }
.bank-pending-kind-nav a, .bank-pending-kind-nav > span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid #d6e0e9; border-radius: 7px; color: #5c6b7e; background: #fff; font-size: 11px; font-weight: 700; }
.bank-pending-kind-nav a:hover, .bank-pending-kind-nav a.active { color: #1e5f96; border-color: #8fb7d9; background: #eef6fc; }
.bank-pending-kind-nav strong { color: inherit; }
.bank-pending-kind-nav > span { margin-left: auto; color: #8793a3; background: #f6f8fa; }
.bank-reconcile-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 16px 0; }
.bank-reconcile-modes a { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #d7e0e9; border-radius: 7px; color: #2c435c; background: #fff; }
.bank-reconcile-modes a:hover { border-color: #91b8db; background: #f2f8fd; }
.bank-reconcile-modes strong { font-size: 12px; }
.bank-reconcile-modes small { color: #7a8798; font-size: 9px; }
.bank-supplier-picker, .bank-account-ledger { border-top: 1px solid #e1e5eb; margin-top: 22px; padding-top: 20px; }
.bank-supplier-picker .panel-heading, .bank-account-ledger .panel-heading, .bank-allocation-section .panel-heading, .bank-candidate-section .panel-heading { align-items: start; margin-bottom: 10px; }
.bank-supplier-picker .panel-heading h3, .bank-account-ledger .panel-heading h3, .bank-allocation-section .panel-heading h3, .bank-candidate-section .panel-heading h3 { margin: 0; font-size: 14px; }
.bank-supplier-picker .panel-heading small, .bank-account-ledger .panel-heading small, .bank-allocation-section .panel-heading small, .bank-candidate-section .panel-heading small { display: block; margin-top: 5px; color: #6d7b8d; font-size: 11px; line-height: 1.5; text-align: left; }
.supplier-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.supplier-search-row input, .supplier-search-row button, .bank-account-ledger select { min-width: 0; height: 40px; padding: 0 11px; border: 1px solid #cbd7e2; border-radius: 7px; background: #fff; font-size: 12px; }
.supplier-search-row button { color: #fff; border-color: #28679c; background: #28679c; font-weight: 800; }
.bank-supplier-filter { display: grid; gap: 7px; margin-bottom: 9px; color: #405168; font-size: 12px; font-weight: 800; }
.bank-payee-reference { margin: 9px 0 0; color: #68778a; font-size: 11px; line-height: 1.5; }
.bank-payee-reference strong { color: #31455e; }
.account-ledger-filter { display: flex; align-items: center; gap: 8px; }
[data-supplier-results] { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; margin-top: 10px; padding: 7px; border: 1px solid #d7e0e9; border-radius: 8px; background: #f8fafc; }
[data-supplier-results][hidden] { display: none; }
.supplier-result-button { align-items: center; display: flex; justify-content: space-between; width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d7e0e9; border-radius: 7px; color: #2d4057; background: #fff; font-size: 12px; text-align: left; }
.supplier-result-button:hover { border-color: #8fb7d9; background: #eef6fc; }
.supplier-result-button.is-duplicate { cursor: not-allowed; border-color: #e8c88c; color: #7a4d00; background: #fff8e8; opacity: 1; }
.supplier-result-button strong { font-size: 12px; }
.supplier-result-button small { color: #758397; font-size: 10px; }
.supplier-result-button.is-duplicate small { color: #9a6511; }
.bank-directed-search { grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; }
.bank-search-help { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; color: #6e7c8f; font-size: 10px; }
.bank-search-help strong { color: #425268; font-size: 11px; }
.purchase-match-list { display: grid; gap: 9px; margin-top: 12px; }
.purchase-match-card { display: grid; grid-template-columns: auto minmax(0, 1fr) 124px; align-items: center; gap: 12px; margin-top: 0; padding: 12px 13px; border: 1px solid #d8e2eb; border-radius: 9px; background: #fff; }
.purchase-match-card.is-warning { grid-template-columns: minmax(0, 1fr); border-color: #ead4a8; background: #fffaf1; }
.purchase-match-card.is-manual-review { grid-template-columns: auto minmax(0, 1fr); border-color: #e1bd73; background: #fffaf1; }
.purchase-match-card.is-manual-review.is-selected { border-color: #c6851d; box-shadow: 0 0 0 2px rgba(198, 133, 29, .13); }
.purchase-match-card.is-manual-review > .allocation-amount-choice { grid-column: 2; justify-self: end; }
.purchase-match-body { display: grid; gap: 10px; min-width: 0; }
.purchase-match-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.purchase-match-heading > strong { color: #31465f; font-size: 11px; }
.purchase-match-heading .bank-candidate-detail { margin-left: auto; }
.match-status { padding: 4px 7px; border-radius: 999px; color: #176b48; background: #e8f6ef; font-size: 10px; font-weight: 800; }
.match-status-待确认, .match-status-不匹配 { color: #8a5d19; background: #fff0cf; }
.purchase-fact-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr .72fr 1fr; gap: 8px; }
.purchase-fact-grid > span { display: grid; gap: 3px; min-width: 0; padding: 8px 9px; border-radius: 6px; background: #f6f8fb; }
.purchase-fact-grid small { color: #7b8797; font-size: 9px; font-weight: 700; }
.purchase-fact-grid b { overflow: hidden; color: #26384e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-match-reason { margin: 0; color: #6b798a; font-size: 10px; line-height: 1.55; }
.bank-reason-field { display: grid; gap: 6px; margin-top: 18px; color: #5e6c80; font-size: 11px; font-weight: 800; }
.bank-reason-field textarea { width: 100%; min-height: 76px; resize: vertical; padding: 9px 10px; border: 1px solid #d2dae4; border-radius: 7px; color: #26364a; font: inherit; font-weight: 400; }
.bank-decision-actions { position: sticky; bottom: 8px; z-index: 6; display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid #cad8e5; border-radius: 9px; background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(28,49,74,.13); backdrop-filter: blur(8px); }
.bank-decision-actions button { min-height: 40px; padding: 0 13px; border: 1px solid #b8c9da; border-radius: 6px; color: #23527d; background: #f7f9fb; font-weight: 800; }
.bank-decision-actions .primary-button { width: auto; height: 40px; margin: 0; color: #fff; background: #1d5d96; }
.account-selection-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 10px 0 12px; overflow: hidden; border: 1px solid #d8e2eb; border-radius: 9px; background: #d8e2eb; }
.account-selection-summary > span { display: grid; gap: 4px; padding: 10px 11px; background: #f7f9fb; }
.account-selection-summary small { color: #748195; font-size: 9px; font-weight: 700; }
.account-selection-summary strong { color: #26384e; font-size: 13px; }
.account-selection-summary .difference strong { color: #9a6517; }
.account-selection-summary.is-balanced .difference { background: #edf8f2; }
.account-selection-summary.is-balanced .difference strong { color: #176b48; }
.account-ledger-row { grid-template-columns: auto minmax(0, 1fr) 124px; align-items: stretch; padding: 12px 13px; }
.account-purchase-body { display: grid !important; gap: 9px !important; min-width: 0; }
.account-purchase-heading { display: flex !important; align-items: center; gap: 8px !important; }
.bank-import-progress { color: var(--blue); font-size: 12px; font-weight: 700; }
[data-bank-import-form][aria-busy="true"] .file-picker { opacity: .55; pointer-events: none; }
.account-purchase-heading b { color: #3a4d64; font-size: 11px; }
.account-purchase-heading em { padding: 3px 6px; border-radius: 99px; color: #176b48; background: #e9f6ef; font-size: 9px; font-style: normal; font-weight: 800; }
.account-ledger-row.return .account-purchase-heading em { color: #985338; background: #fceee8; }
.account-purchase-heading a { margin-left: auto; color: #216496; font-size: 10px; font-weight: 800; white-space: nowrap; }
.account-fact-grid { grid-template-columns: 1.1fr 1.1fr .8fr .72fr .86fr .85fr; }
.account-ledger-row > .allocation-amount-choice { align-self: center; }
.account-ledger-row.return { border-left: 3px solid #d97859; }
.account-ledger-row.purchase { border-left: 3px solid #4d9273; }

@media (max-width: 1100px) {
  .bank-action-bar, .payroll-filter-bar { align-items: stretch; flex-wrap: wrap; }
  .bank-outcome-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-rule-strip { grid-template-columns: 1fr; }
  .bank-reconcile-shell { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }
  .bank-reference-card { grid-template-columns: 1fr; }
  .bank-balance { gap: 7px; }
  .bank-directed-search { grid-template-columns: 1fr; }
  .bank-reconcile-modes { grid-template-columns: 1fr; }
  .purchase-fact-grid, .account-fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-selection-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payroll-sheet-shell { min-width: 0; overflow-x: auto; }
  .payroll-overview-tools { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .bank-reconcile-shell { grid-template-columns: 230px minmax(0, 1fr); }
  .bank-batch-summary { grid-template-columns: 1fr; }
  .bank-balance { gap: 7px; }
  .bank-reconcile-detail { padding: 16px; }
  .bank-detail-heading { flex-direction: column; gap: 8px; }
  .bank-decision-actions { align-items: stretch; flex-direction: column; }
  .bank-decision-actions button, .bank-decision-actions .primary-button { width: 100%; }
  .supplier-search-row { grid-template-columns: 1fr; }
  .bank-candidate-row { grid-template-columns: auto minmax(190px, 1fr) auto 100px; }
  .purchase-search-form { grid-template-columns: 1fr; }
  .bank-purchase-row { grid-template-columns: 20px minmax(330px, 1fr) 110px; }
  .payroll-save-bar { grid-template-columns: 1fr auto; }
  .payroll-save-bar input { grid-column: 1 / -1; grid-row: 1; }
  .payroll-inspector { grid-template-columns: 1fr; }
  .payroll-inspector .inspector-heading { grid-column: 1; }
}