:root { font-family: Inter, "Segoe UI", system-ui, sans-serif; color: #17243a; background: #f5f7fa; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fa; }
a { color: #235ba8; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #133f7d; }
button, input { font: inherit; }
.mud-layout { min-height: 100vh; background: #f5f7fa; }
.control-bar { height: 64px; padding: 0 28px; border-bottom: 1px solid #d9e1eb; }
.product-mark { display: flex; align-items: center; gap: 10px; color: #17243a; font-size: 16px; font-weight: 720; letter-spacing: -.01em; }
.product-mark__glyph { display: inline-grid; width: 26px; height: 26px; place-items: center; background: #275dad; color: white; border-radius: 5px; font-size: 14px; font-weight: 800; }
.environment-label { margin-left: 17px; padding-left: 17px; border-left: 1px solid #d9e1eb; color: #66758a; font-size: 13px; }
.top-status { display: flex; gap: 7px; align-items: center; color: #526176; font-size: 13px; }
.user-name { margin-left: 24px; color: #34445b; font-size: 13px; }
.logout-form { display: inline; margin-left: 10px; }
.quiet-button, .button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 650; text-decoration: none; cursor: pointer; }
.quiet-button { background: transparent; color: #42536a; }
.quiet-button:hover { background: #eef2f7; color: #17243a; }
.button-primary { background: #275dad; color: white; box-shadow: 0 1px 1px rgb(17 38 67 / .14); }
.button-primary:hover { background: #1f4f96; color: white; }
.button-primary:disabled { cursor: not-allowed; opacity: .52; }
.button-secondary { border-color: #c8d3e0; background: white; color: #244872; }
.control-nav { width: 236px !important; top: 64px !important; height: calc(100% - 64px) !important; border-right: 1px solid #d9e1eb; background: #fbfcfe; }
.control-nav .mud-drawer-content { display: flex; flex-direction: column; }
.control-nav nav { padding: 21px 12px; }
.nav-section-label { margin: 13px 10px 8px; color: #7a899b; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.nav-section-label:first-child { margin-top: 0; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 8px 10px; border-radius: 5px; color: #4d5e74; font-size: 14px; font-weight: 560; text-decoration: none; }
.nav-link:hover { background: #eef3fa; color: #1e4f94; }
.nav-link.active { background: #e6eefb; color: #194b92; font-weight: 700; }
.nav-symbol { width: 15px; color: currentColor; text-align: center; font-size: 16px; line-height: 1; }
.nav-footer { margin-top: auto; padding: 17px 20px 20px; border-top: 1px solid #e4e9f0; color: #718096; font-size: 11px; line-height: 1.45; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: #728198; }
.status-dot--ok { background: #168167; box-shadow: 0 0 0 3px #dff4ec; }.status-dot--neutral { background: #8190a5; }
.workspace { max-width: 1520px; margin: 0 auto; padding: 38px 42px 56px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 27px; border-bottom: 1px solid #d9e1eb; }
.eyebrow { margin: 0 0 7px; color: #3567ad; font-size: 11px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 9px; color: #17243a; font-size: 27px; line-height: 1.2; letter-spacing: -.025em; } h2 { margin-bottom: 4px; color: #203149; font-size: 16px; line-height: 1.3; }
.page-heading p:not(.eyebrow) { max-width: 720px; margin-bottom: 0; color: #5d6d82; font-size: 14px; line-height: 1.55; }.muted { color: #66758a; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0; }.metric { min-height: 142px; padding: 18px 19px; border: 1px solid #d9e1eb; border-top: 3px solid #4f76b6; background: white; border-radius: 6px; }.metric:nth-child(2) { border-top-color: #b36b18; }.metric:nth-child(3) { border-top-color: #b54545; }.metric:nth-child(4) { border-top-color: #508273; }.metric span { display: block; color: #5d6d82; font-size: 12px; font-weight: 650; }.metric strong { display: block; margin: 13px 0 9px; color: #17243a; font-size: 31px; line-height: 1; letter-spacing: -.04em; }.metric small { color: #7a899b; font-size: 11px; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 25px; }.content-grid--wide { grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr); }.panel { overflow: hidden; border: 1px solid #d9e1eb; background: white; border-radius: 6px; }.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 18px 19px 14px; border-bottom: 1px solid #e5eaf1; }.panel-heading p { margin-bottom: 0; color: #718096; font-size: 12px; line-height: 1.45; }.panel-heading a { padding-top: 2px; font-size: 12px; font-weight: 650; white-space: nowrap; }.data-table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; } th { padding: 10px 15px; background: #f8fafc; color: #65758a; font-size: 10px; font-weight: 750; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; } td { padding: 12px 15px; border-top: 1px solid #e8edf3; color: #42536a; vertical-align: middle; } td strong { color: #24364f; } code { border-radius: 3px; color: #425775; font-family: "Cascadia Code", Consolas, monospace; font-size: .92em; }
.status { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 99px; background: #edf1f5; color: #596a7f; font-size: 10px; font-weight: 700; white-space: nowrap; }.status--succeeded, .status--healthy, .status--current, .status--nodrift { background: #e5f5ee; color: #146648; }.status--running, .status--pending, .status--planning { background: #e8f0fc; color: #24589e; }.status--awaitingconfirmation, .status--degraded, .status--unknown { background: #fbefd9; color: #87530e; }.status--failed, .status--unreachable, .status--invalidcredentials { background: #fbe8e6; color: #a1322b; }
.empty-state { display: grid; gap: 6px; padding: 30px 20px; color: #6b7a8e; font-size: 13px; line-height: 1.5; }.empty-state strong { color: #35465e; }.empty-state--page { margin-top: 26px; border: 1px dashed #bfcbd9; background: #fbfcfe; border-radius: 6px; text-align: center; place-items: center; min-height: 180px; }.activity-list { margin: 0; padding: 0; list-style: none; }.activity-list li { display: grid; grid-template-columns: 71px 1fr; gap: 10px; padding: 12px 18px; border-top: 1px solid #e8edf3; }.activity-list li:first-child { border-top: 0; }.activity-time { padding-top: 2px; color: #748297; font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; }.activity-list strong, .activity-list span:not(.activity-time) { display: block; }.activity-list strong { color: #31435c; font-size: 12px; }.activity-list span:not(.activity-time) { margin-top: 2px; color: #76859a; font-size: 11px; }.resource-list { margin: 0; padding: 0; list-style: none; }.resource-list li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; border-top: 1px solid #e8edf3; color: #53647a; font-size: 12px; }.resource-list li:first-child { border-top: 0; }.resource-list strong { color: #2d4059; }
.login-shell { display: grid; min-height: 100vh; place-content: center; gap: 18px; padding: 30px; background: #f4f7fb; }.login-brand { display: flex; justify-content: center; align-items: center; gap: 9px; color: #263951; font-size: 15px; font-weight: 750; }.login-card, .access-message { width: min(100%, 420px); padding: 31px; border: 1px solid #d8e1ec; background: white; border-radius: 7px; box-shadow: 0 12px 30px rgb(34 57 92 / .08); }.login-card h1, .access-message h1 { margin-bottom: 9px; }.login-footnote { margin: 0; color: #8390a2; font-size: 11px; text-align: center; }.login-form { display: grid; gap: 8px; margin-top: 22px; }.login-form label { color: #42536a; font-size: 12px; font-weight: 650; }.login-form input { min-height: 40px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid #bdcad9; border-radius: 5px; color: #17243a; }.login-form input:focus { border-color: #275dad; outline: 3px solid #dce8fb; }.login-form .button-primary { width: 100%; margin-top: 7px; }.form-error { margin: 18px 0 0; padding: 9px 10px; border-left: 3px solid #b42318; background: #fff2f1; color: #8d2923; font-size: 12px; line-height: 1.45; }.access-message { text-align: center; }.access-message .button-primary { margin-top: 8px; }
.wizard-shell { max-width: 900px; margin: 28px auto 0; }.wizard-steps { display: flex; gap: 0; margin: 0 0 18px; padding: 0; list-style: none; }.wizard-steps li { display: flex; align-items: center; gap: 8px; flex: 1; color: #748297; font-size: 12px; font-weight: 650; }.wizard-steps li:not(:last-child)::after { content: ""; height: 1px; flex: 1; margin: 0 14px; background: #d7e0eb; }.wizard-steps span { display: inline-grid; width: 23px; height: 23px; place-items: center; border: 1px solid #c5d0de; border-radius: 99px; background: white; color: #66758a; font-size: 11px; }.wizard-steps .active { color: #24589e; }.wizard-steps .active span { border-color: #275dad; background: #275dad; color: white; }.wizard-panel { padding-bottom: 20px; }.data-form { padding: 18px 20px 0; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }.form-grid__full { grid-column: 1 / -1; }.form-grid label { display: block; margin-bottom: 6px; color: #45566d; font-size: 12px; font-weight: 650; }.form-grid input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #becbda; border-radius: 5px; color: #1f3048; background: white; }.form-grid input:focus { border-color: #275dad; outline: 3px solid #dce8fb; }.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e4eaf1; }
.form-grid select { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #becbda; border-radius: 5px; color: #1f3048; background: white; }.form-content { padding: 18px 20px; }.plan-steps { padding: 18px 20px 0; }.plan-steps h3 { margin: 0 0 10px; color: #34465e; font-size: 13px; }.plan-steps ol { margin: 0; padding-left: 22px; }.plan-steps li { display: grid; gap: 2px; padding: 7px 0; color: #68778a; font-size: 12px; }.plan-steps strong { color: #33455d; }.risk-note { margin: 18px 20px 0; padding: 12px; border-left: 3px solid #aa620e; background: #fff6e8; color: #70501d; font-size: 12px; line-height: 1.5; }
.confirmation-box { display: grid; gap: 14px; margin: 14px 20px 0; padding: 15px; border: 1px solid #e3c68d; background: #fffaf0; border-radius: 5px; }.confirmation-box label { display: flex; gap: 9px; align-items: flex-start; color: #5f4a25; font-size: 12px; line-height: 1.5; }.confirmation-box input { margin-top: 3px; }.confirmation-box .button-primary { justify-self: start; }.permission-note { margin: 14px 20px 0; color: #6d7d91; font-size: 12px; line-height: 1.5; }
.check-label { display: flex; gap: 9px; margin: 14px 20px 0; color: #526276; font-size: 12px; line-height: 1.5; }.check-label input { margin-top: 3px; }
.panel-actions { padding: 16px 18px; border-top: 1px solid #e8edf3; }
.step-list { margin: 0; padding: 0; list-style: none; }.step-list li { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; padding: 13px 18px; border-top: 1px solid #e8edf3; }.step-list strong, .step-list span:not(.status) { display: block; }.step-list strong { color: #34465e; font-size: 12px; }.step-list span:not(.status) { margin-top: 2px; color: #748398; font-size: 11px; }.step-list p { grid-column: 1 / -1; margin: 0; color: #9a3630; font-size: 11px; }
.action-row { display: flex; gap: 8px; }
.runtime-value { font-size: 20px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
.operation-row { display: flex; gap: 8px; margin: 20px 0 0; }
.audit-filter { display: flex; align-items: end; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #e8edf3; }.audit-filter label { display: grid; gap: 5px; color: #55677e; font-size: 11px; font-weight: 650; }.audit-filter input { width: 180px; min-height: 33px; padding: 6px 8px; border: 1px solid #c5d0de; border-radius: 4px; }.audit-filter .button-secondary, .audit-filter .quiet-button { min-height: 33px; }
@media (max-width: 1060px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.content-grid, .content-grid--wide { grid-template-columns: 1fr; }.workspace { padding: 30px 28px; } }
@media (max-width: 760px) { .control-nav { width: 196px !important; }.control-bar { padding: 0 16px; }.environment-label, .top-status, .user-name { display: none; }.workspace { padding: 25px 18px; }.page-heading { display: grid; }.metric-grid { grid-template-columns: 1fr; } }