:root { --ink:#172033; --muted:#667085; --line:#e4e9f0; --panel:#fff; --navy:#111c2d; --accent:#f04438; --success:#067647; --warning:#b54708; }
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); background: #f4f6f9; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: #2457a7; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.75rem, 2.8vw, 2.65rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: .65rem; color: #121a2a; }
h2 { font-size: 1.05rem; letter-spacing: -.015em; margin-bottom: .25rem; }
p { color: var(--muted); line-height: 1.55; }
.eyebrow { color: #6b778c; display: block; font-size: .66rem; font-weight: 800; letter-spacing: .13em; margin-bottom: .65rem; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.page-heading p { max-width: 760px; margin-bottom: 0; }
.page-heading.compact h1 { font-size: clamp(1.65rem, 2.3vw, 2.2rem); }
.home-heading { padding: .65rem 0 .35rem; }
.home-heading p { font-size: 1.02rem; }
.button { border: 1px solid transparent; border-radius: .62rem; min-height: 2.55rem; padding: .64rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; font-size: .8rem; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:not(:disabled):hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button.primary { background: #172b4d; color: white; box-shadow: 0 6px 18px rgba(23,43,77,.18); }
.button.primary:hover { background: #203a63; }
.button.secondary { background: white; color: #344054; border-color: #d0d5dd; }
.button.tertiary { color: #344054; background: #f5f7fa; border-color: #e4e7ec; }
.status-banner { background: white; border: 1px solid var(--line); border-left-width: 4px; border-radius: .7rem; padding: .82rem 1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .85rem; box-shadow: 0 3px 12px rgba(16,24,40,.035); }
.status-banner.warning { border-left-color: #f79009; }
.status-banner.danger { border-left-color: #d92d20; }
.status-banner.success { border-left-color: #12b76a; }
.status-banner strong { display: block; font-size: .82rem; }
.status-banner span:not(.status-icon):not(.status-code) { color: var(--muted); display: block; font-size: .76rem; margin-top: .1rem; }
.status-icon { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; color: #b54708; background: #fff4e8; font-weight: 900; }
.status-code { margin-left: auto; color: #9a3412; font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.metric-card { position: relative; background: white; border: 1px solid var(--line); border-radius: .8rem; padding: 1rem 1.05rem; box-shadow: 0 3px 12px rgba(16,24,40,.025); overflow: hidden; }
.metric-card::before { content: ""; width: 2px; background: #cfd6e1; position: absolute; left: 0; top: .75rem; bottom: .75rem; }
.metric-card.accent::before { width: 3px; background: var(--accent); }
.metric-label { display: block; color: #667085; font-size: .7rem; font-weight: 700; margin-bottom: .35rem; }
.metric-card strong { display: block; font-size: 1.55rem; letter-spacing: -.04em; }
.metric-card small { color: #98a2b3; font-size: .67rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 1rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: .85rem; box-shadow: 0 3px 14px rgba(16,24,40,.03); padding: 1.25rem; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.panel-heading .eyebrow { margin-bottom: .35rem; }
.panel-note { color: #98a2b3; font-size: .7rem; }
.process-flow { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem .35rem 1.55rem; }
.process-step { display: flex; align-items: center; gap: .55rem; min-width: 120px; }
.process-step > span { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: #667085; background: #f2f4f7; border: 1px solid #e4e7ec; font-size: .65rem; font-weight: 800; }
.process-step.active > span { color: white; background: #172b4d; border-color: #172b4d; }
.process-step strong, .process-step small { display: block; }
.process-step strong { font-size: .76rem; }
.process-step small { color: #98a2b3; font-size: .63rem; margin-top: .15rem; }
.process-line { flex: 1; height: 1px; background: #e4e7ec; margin: 0 .6rem; }
.empty-worklist { background: #f8fafc; border: 1px dashed #d8dee8; border-radius: .7rem; display: flex; align-items: center; gap: .85rem; padding: 1rem; }
.empty-worklist .empty-mark { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .55rem; background: #ecfdf3; color: #067647; }
.empty-worklist strong { font-size: .78rem; }
.empty-worklist p { font-size: .72rem; margin: .15rem 0 0; }
.control-list { margin: 0; }
.control-list div, .result-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid #edf0f4; }
.control-list dt, .result-list dt { color: #667085; font-size: .72rem; font-weight: 500; }
.control-list dd, .result-list dd { margin: 0; color: #344054; font-size: .74rem; font-weight: 750; text-align: right; }
.pending-text { color: #b54708 !important; }
.security-note { display: flex; gap: .65rem; background: #f5f7fa; border-radius: .6rem; padding: .78rem; margin-top: 1rem; }
.security-note > span { color: #52657f; }
.security-note p { font-size: .67rem; margin: 0; }
.security-note strong { color: #344054; display: block; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px,.7fr); gap: 1rem; align-items: start; }
.form-panel { padding: 1.4rem; }
.section-title { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.section-title.divided { border-top: 1px solid #e9edf2; padding-top: 1.35rem; margin-top: 1.35rem; }
.section-title > span { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: #edf2f8; color: #344054; display: grid; place-items: center; font-size: .72rem; font-weight: 850; }
.section-title p { margin: 0; font-size: .72rem; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
label > span { display: block; color: #475467; font-size: .69rem; font-weight: 700; margin-bottom: .35rem; }
.form-control, .form-select { border: 1px solid #d0d5dd; border-radius: .55rem; background-color: white; min-height: 2.5rem; color: #344054; font-size: .78rem; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.form-control:focus, .form-select:focus { border-color: #617b9f; box-shadow: 0 0 0 3px rgba(76,111,159,.12); }
.check-field { display: flex; align-items: center; align-self: end; min-height: 2.5rem; gap: .55rem; }
.check-field span { margin: 0; }
.line-editor { display: grid; gap: .65rem; }
.line-row { display: grid; grid-template-columns: 1.25fr .65fr .65fr .8fr .8fr .55fr; gap: .55rem; align-items: end; padding: .8rem; border: 1px solid #e4e7ec; border-radius: .65rem; background: #fbfcfd; }
.line-row.compact-lines { grid-template-columns: 1.4fr .7fr .75fr .9fr auto; }
.line-remove { width: 2.25rem; height: 2.5rem; border: 1px solid #e4e7ec; border-radius: .5rem; color: #b42318; background: white; }
.comments-field { display: block; margin-top: 1rem; }
.compact-check { justify-content: center; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; }
.calculation-panel { position: sticky; top: 5.5rem; }
.calculation-empty { min-height: 230px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed #d8dee8; border-radius: .7rem; background: #fafbfc; padding: 1.2rem; }
.calculation-empty span { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .7rem; background: #eef2f7; color: #53657f; font-weight: 900; margin-bottom: .6rem; }
.calculation-empty p { font-size: .75rem; max-width: 220px; }
.result-list { margin: 1rem 0; }
.result-list .result-total { border: 0; padding-top: 1rem; }
.result-list .result-total dd { color: #067647; font-size: 1.05rem; }
.inline-error, .inline-warning { padding: .65rem; border-radius: .45rem; font-size: .7rem; }
.inline-error { color: #b42318; background: #fef3f2; }
.inline-warning { color: #9a3412; background: #fff7ed; margin-top: 1rem; }
.hash-label { color: #98a2b3; font-size: .62rem; overflow-wrap: anywhere; }
.calculated-line { display: grid; grid-template-columns: 1fr auto auto; gap: .55rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #edf0f4; font-size: .68rem; }
.calculated-line span { color: #667085; }
.calculated-line b { color: #172b4d; }
.filters { display: grid; grid-template-columns: minmax(220px,1fr) 220px auto; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid #e9edf2; }
.empty-table { min-height: 285px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-table > span { color: #98a2b3; font-size: 1.4rem; margin-bottom: .5rem; }
.empty-table h2 { font-size: .9rem; }
.empty-table p { font-size: .75rem; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .72rem; }
th { color: #667085; font-size: .64rem; letter-spacing: .04em; text-align: left; padding: .75rem .6rem; border-bottom: 1px solid #e4e7ec; }
td { color: #344054; padding: .8rem .6rem; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
td small { color: #98a2b3; display: block; margin-top: .15rem; }
.row-actions { display: flex; align-items: center; gap: .55rem; }
.row-actions button,.row-actions a { border: 0; background: transparent; color: #2457a7; font-size: .68rem; font-weight: 750; text-decoration: none; padding: 0; }
.review-reason { max-width: 620px; padding-bottom: 1rem; border-bottom: 1px solid #edf0f4; margin-bottom: .4rem; }
.review-actions { min-width: 230px; flex-wrap: wrap; }
.row-actions .danger-action { color: #b42318; }
.admin-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 1rem; }
.state-pill { border-radius: 2rem; padding: .28rem .62rem; font-size: .64rem; font-weight: 800; }
.state-pill.active { background: #ecfdf3; color: #067647; }
.state-pill.draft { background: #fff4e8; color: #b54708; }
.tier-list { display: grid; gap: .35rem; }
.tier-list > div { display: flex; justify-content: space-between; align-items: center; padding: .7rem .75rem; background: #f8fafc; border-radius: .5rem; font-size: .72rem; color: #667085; }
.tier-list strong { color: #344054; }
.tier-list b { color: #172b4d; }
.user-list { display: grid; gap: .35rem; }
.user-list > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .65rem; border-bottom: 1px solid #edf0f4; }
.user-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .55rem; background: #edf2f8; color: #344054; font-size: .68rem; font-weight: 850; }
.user-list strong,.user-list small { display: block; }
.user-list strong { font-size: .74rem; }
.user-list small { color: #98a2b3; font-size: .62rem; margin-top: .12rem; }
.user-list b { font-size: .62rem; }
.user-active { color: #067647; }
.user-inactive { color: #b42318; }
.notification-list { display: grid; }
.notification-list a { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .85rem .4rem; border-bottom: 1px solid #edf0f4; color: #344054; text-decoration: none; }
.notification-list a.unread { background: #f8fbff; }
.notification-list strong,.notification-list small { display: block; }
.notification-list strong { font-size: .75rem; }
.notification-list small { color: #98a2b3; font-size: .64rem; margin-top: .15rem; }
.notification-list b { color: #667085; font-size: .62rem; }
.notification-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #2e69b3; }
.notification-list .read .notification-dot { background: #d0d5dd; }
.health-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.health-card { display: flex; gap: .9rem; align-items: flex-start; }
.health-card small { color: #98a2b3; font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.health-card h2 { margin-top: .25rem; }
.health-card p { font-size: .72rem; margin-bottom: 0; }
.health-dot { width: .65rem; height: .65rem; border-radius: 50%; margin-top: .3rem; background: #12b76a; box-shadow: 0 0 0 5px #ecfdf3; }
.health-card.warning .health-dot { background: #f79009; box-shadow: 0 0 0 5px #fff6ed; }
.health-card.blocked .health-dot { background: #f04438; box-shadow: 0 0 0 5px #fef3f2; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #12b76a; }
.invalid { outline: 1px solid #d92d20; }
.validation-message { color: #b42318; }
.blazor-error-boundary { background: #b42318; padding: 1rem; color: white; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(3,1fr); } .content-grid,.form-layout,.admin-grid { grid-template-columns: 1fr; } .calculation-panel { position: static; } .line-row { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px) { .page-heading { align-items: flex-start; flex-direction: column; gap: 1rem; } .metric-grid,.metric-grid.four,.health-grid { grid-template-columns: repeat(2,1fr); } .process-flow { align-items: flex-start; flex-direction: column; gap: .75rem; } .process-line { height: 18px; width: 1px; margin-left: 1rem; } .field-grid,.line-row,.filters { grid-template-columns: 1fr; } .status-code { display: none; } }
@media (max-width: 430px) { .metric-grid,.metric-grid.four,.health-grid { grid-template-columns: 1fr; } }