:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #152033;
  background: #f4f7fb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f7fb; color: #152033; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .65; }
h1, h2, h3, h4, p { margin-top: 0; }
a { color: #2357d9; }
code, .mono { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 20% 15%, #dce8ff, transparent 34%), radial-gradient(circle at 85% 75%, #e3f7ee, transparent 30%), #f6f8fc; }
.login-card { width: min(460px, 100%); padding: 42px; border: 1px solid #dce3ee; border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 24px 80px rgba(34,55,91,.12); }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #132c5c; color: white; font-weight: 800; font-size: 22px; box-shadow: 0 8px 24px rgba(19,44,92,.25); }
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
.eyebrow { margin: 20px 0 6px; color: #66809f; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.muted { color: #65758b; line-height: 1.55; }
.fine-print { margin: 16px 0 0; color: #8490a2; font-size: 12px; line-height: 1.45; }
label { display: block; margin: 12px 0 6px; color: #43536a; font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #ccd5e2; border-radius: 10px; padding: 10px 12px; color: #17233a; background: #fff; outline: none; transition: border .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: #4f75d8; box-shadow: 0 0 0 3px rgba(79,117,216,.12); }
textarea { resize: vertical; }
.code-area { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }

.primary, .secondary { border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; font-weight: 750; }
.primary { background: #2459d6; color: white; box-shadow: 0 5px 14px rgba(36,89,214,.18); }
.primary:hover { background: #1d4cbe; }
.secondary { border-color: #cbd5e3; background: #fff; color: #293b55; }
.secondary:hover { background: #f7f9fc; }
.compact { padding: 7px 11px; font-size: 12px; }
.full { width: 100%; margin-top: 18px; }
.link-button, .icon-button { border: 0; background: transparent; color: #315fc5; padding: 4px 6px; font-weight: 700; }
.icon-button { font-size: 22px; }
.danger-text { color: #b33434 !important; }
.button-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.inline-input { max-width: 330px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; display: flex; flex-direction: column; background: #0e1e38; color: #d7e0ee; }
.sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 22px; }
.sidebar-brand strong, .sidebar-brand span { display: block; }
.sidebar-brand span { color: #8094b1; font-size: 12px; margin-top: 2px; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { width: 100%; text-align: left; border: 0; border-radius: 11px; padding: 11px 12px; background: transparent; color: #dbe4f0; }
.nav-item span, .nav-item small { display: block; }
.nav-item span { font-weight: 760; }
.nav-item small { margin-top: 3px; color: #7f93b0; font-size: 10px; line-height: 1.3; }
.nav-item:hover { background: #172b4b; }
.nav-item.active { background: #1d3c69; box-shadow: inset 3px 0 #75a0ff; }
.nav-item.active small { color: #adc3e6; }
.sidebar-footer { margin-top: auto; padding: 16px 8px 2px; border-top: 1px solid #263a58; display: grid; grid-template-columns: auto 1fr; gap: 8px 9px; align-items: center; }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer small { color: #8498b5; margin-top: 2px; }
.sidebar-footer .link-button { grid-column: 2; justify-self: start; color: #9cb8e8; padding-left: 0; }

.workspace { min-width: 0; padding: 28px 34px 60px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.topbar .eyebrow { margin-top: 0; }
.topbar h1 { margin-bottom: 6px; font-size: 28px; letter-spacing: -.025em; }
.topbar .muted { margin: 0; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.live-pill { display: inline-flex; gap: 7px; align-items: center; border: 1px solid #d4dde9; border-radius: 999px; background: #fff; padding: 8px 11px; color: #3b4b61; font-size: 12px; font-weight: 750; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; display: inline-block; border-radius: 50%; background: #99a5b5; }
.status-dot.online { background: #28a46c; box-shadow: 0 0 0 3px rgba(40,164,108,.12); }
.status-dot.offline { background: #a5adba; }

.alert { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-size: 13px; line-height: 1.5; }
.alert.success { border-color: #b9e1cd; background: #edf9f2; color: #216644; }
.alert.danger { border-color: #ecc2c2; background: #fff2f2; color: #8e2f2f; }
.alert.warning { border-color: #ead7a4; background: #fff9e9; color: #76591b; }

.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card, .panel { border: 1px solid #dfe5ee; background: #fff; border-radius: 15px; box-shadow: 0 4px 14px rgba(43,60,88,.035); }
.metric-card { padding: 18px 19px; }
.metric-card span, .metric-card small { display: block; color: #718096; }
.metric-card span { font-size: 12px; font-weight: 750; }
.metric-card strong { display: block; margin: 8px 0 4px; font-size: 24px; color: #17253d; }
.metric-card small { font-size: 11px; }
.panel { padding: 19px; min-width: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.panel-header h2 { margin-bottom: 3px; font-size: 17px; }
.panel-header p, .section-heading p { margin: 0; color: #76869b; font-size: 11px; line-height: 1.45; }
.two-column { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }
.two-column.equal { grid-template-columns: 1fr 1fr; }
.split-view { display: grid; grid-template-columns: minmax(280px,.34fr) minmax(0,.66fr); gap: 18px; align-items: start; }
.settings-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 18px; align-items: start; }
.secrets-panel { grid-column: 2; }

.list-row, .select-row { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border-bottom: 1px solid #edf0f4; }
.select-row { width: 100%; text-align: left; border: 0; border-bottom: 1px solid #edf0f4; background: transparent; border-radius: 8px; }
.select-row:hover, .select-row.selected { background: #f5f8fd; }
.select-row.selected { box-shadow: inset 3px 0 #4d76d5; }
.grow { flex: 1; min-width: 0; }
.grow strong, .grow small { display: block; }
.grow strong { color: #23344d; }
.grow small { margin-top: 3px; color: #7b899b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; border: 1px solid #d7dfe9; border-radius: 999px; padding: 4px 8px; background: #f8fafc; color: #607087; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge.good { border-color: #bfe1ce; background: #edf8f2; color: #27714c; }
.badge.bad { border-color: #edc2c2; background: #fff2f2; color: #9b3737; }
.badge.active { border-color: #c6d5f4; background: #eef4ff; color: #315bb7; }
.badge.warn { border-color: #ead7a7; background: #fff9e8; color: #7b5d18; }
.empty { padding: 28px 10px; text-align: center; color: #8a96a6; font-size: 12px; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; padding: 9px 8px; color: #738298; border-bottom: 1px solid #dfe5ee; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
td { padding: 11px 8px; border-bottom: 1px solid #edf0f4; vertical-align: top; color: #44536a; }
td strong { color: #26364d; }
.wrap-code { white-space: normal; overflow-wrap: anywhere; font-size: 10px; color: #536176; }

.form-grid { display: grid; gap: 10px 14px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid.three { grid-template-columns: 1fr 1.25fr 1fr; }
.span-two { grid-column: span 2; }
.span-three { grid-column: span 3; }
.checkbox { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-weight: 650; }
.checkbox input { width: auto; }
.check-stack { display: flex; gap: 18px; align-items: center; }
.hint { width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 50%; background: #e9eef7; color: #50698e; cursor: help; font-size: 10px; }
.section-heading { margin: 22px 0 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.section-heading h3 { margin-bottom: 2px; font-size: 14px; }
.step-card { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; margin-bottom: 10px; padding: 13px; border: 1px solid #dfe5ed; border-radius: 12px; background: #fbfcfe; }
.step-number { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #e8eef9; color: #365b9c; font-weight: 800; font-size: 11px; }
.step-content { min-width: 0; }
.inline-editor { margin-top: 18px; padding: 15px; border: 1px solid #dce3ed; border-radius: 12px; background: #f9fbfd; }
.inline-editor h3 { font-size: 14px; margin-bottom: 10px; }
.template-card { display: flex; gap: 11px; width: 100%; padding: 12px 7px; border: 0; border-bottom: 1px solid #edf0f4; background: transparent; text-align: left; }
.template-card:hover { background: #f7f9fd; }
.template-card strong, .template-card small { display: block; }
.template-card small { color: #7a899c; margin-top: 3px; line-height: 1.4; }
.template-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: #e8effb; color: #365eab; font-size: 10px; font-weight: 900; }
.revision-list { display: grid; gap: 5px; }
.revision-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #e8edf4; color: #66758a; font-size: 11px; }

.detail-panel { margin-top: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 14px 0; }
.detail-grid > div { padding: 11px; border-radius: 10px; background: #f7f9fc; }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: #77869a; font-size: 10px; }
.detail-grid strong { margin-top: 3px; font-size: 12px; }
.timeline { border-left: 2px solid #e2e8f1; margin-left: 6px; padding-left: 15px; }
.timeline-row { position: relative; padding: 0 0 14px; display: grid; grid-template-columns: 150px 140px 1fr auto; gap: 10px; align-items: baseline; font-size: 11px; }
.timeline-row::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #7190c9; left: -20px; top: 5px; }
.timeline-row span { color: #8390a1; }
.timeline-row p { margin: 0; color: #44546a; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(12,25,45,.52); backdrop-filter: blur(2px); }
.modal { width: min(560px,100%); padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.24); }
.modal h2 { margin-bottom: 6px; }
.modal p { color: #6e7c90; line-height: 1.5; }
.center-card { max-width: 540px; margin: 12vh auto; padding: 30px; background: white; border-radius: 16px; border: 1px solid #dde4ee; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .two-column, .two-column.equal, .split-view, .settings-grid { grid-template-columns: 1fr; }
  .secrets-panel { grid-column: auto; }
  .detail-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar nav { grid-template-columns: repeat(2,1fr); }
  .sidebar-footer { display: none; }
  .workspace { padding: 22px 16px 50px; }
  .topbar { display: block; }
  .top-actions { margin-top: 14px; }
  .metric-grid, .form-grid.two, .form-grid.three, .detail-grid { grid-template-columns: 1fr; }
  .span-two, .span-three { grid-column: auto; }
  .timeline-row { grid-template-columns: 1fr; gap: 2px; }
  .login-card { padding: 28px 22px; }
}