* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--surface)
}

button,input,select,textarea {
  font:inherit
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.55;
  cursor:wait
}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #38a8af80;
  outline-offset:3px
}

button {
  border:0
}

a {
  color:inherit
}

.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  vertical-align:middle
}

h1,h2,h3,p {
  margin:0
}

h1 {
  font-size:29px;
  letter-spacing:-.5px;
  font-weight:650
}

h2 {
  font-size:17px;
  font-weight:650
}

h3 {
  font-size:16px
}

p {
  line-height:1.8
}

.muted {
  color:var(--muted);
  line-height:1.8
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:650;
  color:var(--muted)
}

.pill,.planned {
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:5px;
  font-size:11px;
  color:#85919b;
  background:#f1f4f6;
  border:1px solid #e8edf1
}

.pill {
  color:#8a7243;
  background:#fbf7ed;
  border-color:#f0e5cb
}

.button {
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  padding:11px 16px;
  font-weight:550;
  white-space:nowrap
}

.primary {
  background:var(--accent);
  color:white
}

.primary:hover {
  filter:brightness(.95)
}

.secondary {
  background:white;
  color:#526675;
  border:1px solid #dce4ea
}

.danger {
  background:#fff1f1;
  color:#b65555;
  border:1px solid #f0d6d6
}

.wide {
  width:100%
}

.text-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:none;
  color:var(--accent);
  padding:0;
  font-size:12px
}

.text-button .icon {
  width:16px;
  height:16px
}

label {
  display:block;
  font-weight:550;
  font-size:12px;
  margin:21px 0 9px
}

input,select,textarea {
  width:100%;
  border:1px solid #dce4e9;
  border-radius:6px;
  padding:11px 12px;
  background:white;
  color:var(--ink)
}

textarea {
  resize:vertical
}

#toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  padding:14px 23px;
  background:#183a35;
  color:white;
  border-radius:9px;
  box-shadow:0 8px 30px #102d3220;
  z-index:1000;
  display:none;
  max-width:90vw
}

#toast.visible {
  display:block
}

#toast.error {
  background:#924545
}

.boot {
  display:grid;
  min-height:100vh;
  place-items:center;
  color:var(--muted)
}

.login-card {
  width:100%;
  max-width:365px
}

.login-card h2 {
  font-size:27px;
  margin:20px 0 10px
}

.identity-tabs {
  display:flex;
  margin:30px 0 28px;
  background:#f4f7f9;
  border-radius:7px;
  padding:4px;
  gap:4px
}

.identity-tabs button {
  flex:1;
  background:none;
  padding:11px 0;
  color:#7a8997;
  border-radius:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px
}

.identity-tabs button.active {
  background:white;
  color:var(--accent);
  box-shadow:0 2px 8px #1833480a;
  font-weight:600
}

.login-card .wide {
  margin-top:25px;
  padding:13px
}

.demo-notice {
  display:flex;
  gap:11px;
  background:#f7f9fa;
  border:1px solid var(--line);
  border-radius:7px;
  padding:15px;
  color:#7d8d9a;
  line-height:1.8;
  font-size:11px;
  margin-top:28px
}

.demo-notice .icon {
  color:#8fa5b2;
  margin-top:2px
}

.login-card #login-error {
  color:#b65555;
  min-height:8px;
  font-size:12px;
  margin-top:10px
}

.workspace {
  display:flex;
  min-height:100vh
}

.bank-workspace {
  --accent:#356baa;
  --accent-soft:#edf3fa
}

.sidebar {
  width:238px;
  flex-shrink:0;
  background:var(--navy);
  color:#b6c6d2;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  bottom:0;
  padding:32px 21px;
  z-index:10
}

.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:8px
}

.nav-item {
  display:flex;
  gap:13px;
  align-items:center;
  padding:13px 14px;
  border-radius:7px;
  background:none;
  color:#93aabd;
  font-size:13px;
  text-align:left;
  width:100%
}

.nav-item:hover {
  background:#ffffff04
}

.nav-item.selected {
  background:#2d5c602d;
  color:#a3e0d4
}

.bank-workspace .nav-item.selected {
  background:#35577455;
  color:#b3d8fc
}

.nav-item .icon {
  width:18px;
  height:18px
}

.nav-count {
  margin-left:auto;
  font-size:10px;
  background:#ffffff0b;
  border-radius:4px;
  padding:3px 6px;
  color:#a2b5c2
}

.sidebar-bottom {
  margin-top:auto
}

.account {
  display:flex;
  gap:10px;
  align-items:center
}

.avatar {
  width:34px;
  height:34px;
  border-radius:9px;
  background:#294a57;
  color:#9ccbbc;
  display:grid;
  place-items:center;
  font-weight:600;
  flex-shrink:0;
  font-size:12px
}

.account strong {
  font-size:10px;
  font-weight:550;
  display:block;
  color:#bac9d4
}

.account small {
  font-size:9px;
  display:block;
  color:#67869d;
  margin-top:5px
}

.logout {
  display:flex;
  align-items:center;
  gap:8px;
  color:#6f8b9f;
  background:none;
  font-size:11px;
  padding:17px 0 0;
  margin-left:44px
}

.logout .icon {
  width:14px;
  height:14px
}

.main-shell {
  margin-left:238px;
  width:calc(100% - 238px)
}

.avatar.small {
  width:29px;
  height:29px;
  font-size:10px;
  background:var(--accent-soft);
  color:var(--accent)
}

.content {
  padding:35px 38px 20px;
  max-width:1600px;
  margin:auto
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:20px
}

.page-heading .eyebrow {
  margin-bottom:8px;
  font-size:9px
}

.page-heading p {
  color:#8795a1;
  font-size:12px;
  margin-top:9px
}

.environment-note {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  background:#edf3f6;
  border:1px solid #e0e8ee;
  color:#778d9b;
  padding:11px 15px;
  font-size:10px;
  border-radius:7px;
  margin-bottom:25px;
  line-height:1.8
}

.dot {
  width:6px;
  height:6px;
  background:#79a2a7;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0
}

.note-separator {
  padding:0 5px;
  color:#c0ccd4
}

.metric-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-bottom:25px
}

.metric-card {
  background:white;
  border:1px solid var(--line);
  border-radius:9px;
  padding:20px 22px;
  box-shadow:var(--shadow)
}

.metric-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#7a8b98
}

.metric-top>span {
  background:#f5f7f9;
  padding:7px;
  border-radius:7px
}

.metric-top .icon {
  width:16px;
  height:16px;
  color:#8d9fad
}

.metric-card strong {
  display:block;
  font-size:34px;
  font-weight:550;
  margin:8px 0
}

.metric-card small {
  color:#9aa6af;
  font-size:10px
}

.metric-card.accent {
  border-top:2px solid var(--accent);
  padding-top:19px
}

.metric-card.accent strong {
  color:var(--accent)
}

.metric-card.accent .metric-top>span {
  background:var(--accent-soft)
}

.metric-card.accent .icon {
  color:var(--accent)
}

.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:var(--shadow);
  overflow:hidden
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:23px 24px 20px;
  gap:15px
}

.panel-heading p {
  font-size:10px;
  color:#9aa6b0;
  margin-top:5px
}

.overview-grid {
  display:grid;
  grid-template-columns:minmax(0,2.25fr) minmax(250px,1fr);
  gap:23px;
  margin-bottom:25px
}

.process-panel {
  padding:24px
}

.process-panel .eyebrow {
  font-size:9px;
  color:#9daab4
}

.process-panel h2 {
  margin-top:10px
}

.step-list {
  list-style:none;
  margin:25px 0 0;
  padding:0
}

.step-list li {
  display:flex;
  gap:13px;
  position:relative;
  margin-bottom:24px
}

.step-list li>span {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid #dbe8e5;
  background:#f5faf9;
  color:#699b93;
  border-radius:50%;
  font-size:10px;
  flex-shrink:0;
  z-index:1
}

.step-list li:not(:last-child):after {
  content:"";
  position:absolute;
  top:25px;
  bottom:-24px;
  left:12px;
  background:#eaf0ee;
  width:1px
}

.step-list strong {
  font-size:11px;
  font-weight:550
}

.step-list p {
  color:#9da8b1;
  font-size:10px;
  margin-top:5px
}

.process-foot {
  border-top:1px solid var(--line);
  padding-top:17px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#9aa9b4;
  font-size:9px
}

.process-foot .icon {
  width:14px;
  height:14px
}

.table-scroll {
  overflow:auto
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px;
  white-space:nowrap
}

th {
  padding:12px 20px;
  background:#fbfcfd;
  font-weight:500;
  color:#91a0ac;
  font-size:10px;
  border-block:1px solid #edf1f4
}

td {
  padding:20px;
  border-bottom:1px solid #f0f3f5;
  color:#6e8190
}

tbody tr:last-child td {
  border-bottom:0
}

tbody tr:hover {
  background:#fcfdfd
}

.row-title {
  background:none;
  color:#364f60;
  padding:0;
  font-weight:550;
  font-size:11px;
  text-align:left
}

.row-title:hover {
  color:var(--accent)
}

td small {
  display:block;
  font-size:9px;
  color:#acb7c0;
  margin-top:7px
}

.date-cell {
  font-size:10px;
  color:#94a3ae
}

.row-action {
  padding:5px;
  color:#9dafbc;
  background:none
}

.row-action .icon {
  width:15px;
  height:15px
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f3f5f7;
  color:#9aa5ad;
  font-size:10px;
  border-radius:4px;
  padding:5px 8px;
  white-space:nowrap
}

.badge>span {
  width:4px;
  height:4px;
  background:currentColor;
  border-radius:50%
}

.badge.submitted {
  background:#edf4fc;
  color:#6691bf
}

.badge.reviewing {
  background:#f0f0fc;
  color:#8781bd
}

.badge.needs_info {
  background:#fcf6e9;
  color:#bd9b53
}

.badge.approved {
  background:#eaf7f1;
  color:#61a88a
}

.badge.rejected {
  background:#faeeee;
  color:#bd8080
}

.capability-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:0 24px 24px;
  gap:18px
}

.capability-item {
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid #edf1f3;
  background:#fdfefe;
  padding:17px 13px;
  border-radius:7px
}

.capability-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:#f1f5f8;
  border-radius:9px;
  color:#91a5b3;
  flex-shrink:0
}

.capability-icon .icon {
  width:20px;
  height:20px
}

.capability-item strong {
  font-size:11px;
  font-weight:550
}

.capability-item p {
  font-size:9px;
  color:#9aa8b2;
  margin-top:4px
}

.capability-item .planned {
  margin-left:auto;
  white-space:nowrap;
  font-size:9px;
  padding:4px 6px
}

.workspace-footer {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#b0bbc4;
  margin-top:30px;
  padding-bottom:5px
}

.empty {
  padding:60px 20px;
  text-align:center;
  color:#a0afba
}

.empty>.icon {
  width:32px;
  height:32px;
  display:block;
  margin:0 auto 17px;
  color:#c0ced7
}

.empty h3 {
  font-size:14px;
  font-weight:500
}

.empty p {
  font-size:11px;
  margin-top:10px
}

.list-toolbar {
  display:flex;
  align-items:center;
  gap:14px;
  padding:23px 24px
}

.search-box {
  display:flex;
  align-items:center;
  border:1px solid #dce4e9;
  border-radius:6px;
  padding:0 12px;
  max-width:350px;
  width:100%;
  gap:9px;
  color:#a4b3bf
}

.search-box input {
  border:0;
  padding:10px 0;
  font-size:11px;
  outline:none
}

.search-box .icon {
  width:15px;
  height:15px
}

.list-toolbar select {
  width:140px;
  font-size:11px;
  padding:9px 12px
}

.list-toolbar>.muted {
  margin-left:auto;
  font-size:10px
}

.activity-panel .timeline {
  padding:4px 24px 28px
}

.timeline-entry {
  display:flex;
  gap:18px;
  padding-bottom:27px;
  position:relative
}

.timeline-entry:not(:last-child):after {
  content:"";
  width:1px;
  background:#e8edf1;
  position:absolute;
  top:31px;
  bottom:0;
  left:14px
}

.timeline-marker {
  width:29px;
  height:29px;
  background:#f4f7f9;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:#9aadb9;
  position:relative;
  z-index:1
}

.timeline-marker .icon {
  width:14px;
  height:14px
}

.timeline-entry>div {
  flex:1;
  padding-top:5px
}

.event-header {
  display:flex;
  justify-content:space-between
}

.event-header strong {
  font-size:12px;
  font-weight:550
}

.event-header time {
  font-size:10px;
  color:#acb8c0
}

.timeline-entry .text-button {
  margin-top:10px
}

.timeline-entry p {
  font-size:11px;
  color:#8e9eab;
  margin-top:7px
}

.timeline-entry small {
  font-size:9px;
  color:#b2bdc5
}

.integration-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#eaf0f4;
  border:1px solid #dde7ee;
  border-radius:9px;
  padding:30px 35px;
  margin-bottom:25px
}

.integration-intro h2 {
  font-size:25px;
  font-weight:550;
  margin:12px 0
}

.integration-intro p {
  font-size:12px;
  color:#8498a6;
  line-height:2
}

.integration-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:23px;
  margin-bottom:25px
}

.integration-card {
  padding:24px;
  position:relative
}

.integration-card>.planned {
  position:absolute;
  right:23px;
  top:26px
}

.integration-card h3 {
  margin:24px 0 12px
}

.integration-card p {
  font-size:12px;
  color:#8a9aa7;
  min-height:65px
}

.integration-foot {
  border-top:1px solid var(--line);
  padding-top:19px;
  margin-top:17px;
  font-size:10px;
  color:#a1afb9
}

.scope-panel {
  padding:24px
}

.scope-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:27px
}

.scope-grid>div {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  color:#7f929f
}

.scope-grid .icon {
  width:15px;
  height:15px;
  color:var(--accent)
}

.back-button {
  margin:0 0 18px
}

.detail-summary {
  padding:27px 25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:23px;
  gap:15px
}

.detail-summary h2 {
  font-size:22px;
  margin:11px 0 10px
}

.detail-summary p {
  font-size:11px;
  color:#8d9eab
}

.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(270px,1fr);
  gap:23px
}

.detail-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0;
  padding:5px 25px 25px;
  gap:24px
}

.detail-fields dt {
  color:#9aa9b4;
  font-size:10px
}

.detail-fields dd {
  margin:9px 0 0;
  font-size:12px;
  color:#536d7e
}

.latest-feedback {
  margin:0 25px 25px;
  background:#f7f9fb;
  border:1px solid #edf1f4;
  padding:16px;
  border-radius:6px
}

.latest-feedback strong {
  font-size:10px;
  font-weight:600;
  color:#8298a6
}

.latest-feedback p {
  font-size:12px;
  margin-top:7px;
  color:#78909f;
  overflow-wrap:anywhere
}

.detail-service {
  margin-top:23px
}

.detail-service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:0 24px 25px;
  gap:15px
}

.detail-service-grid>div {
  padding:20px;
  text-align:center;
  background:#fafbfd;
  border:1px solid #edf1f4;
  border-radius:7px
}

.detail-service-grid .icon {
  color:#b3c0ca;
  width:24px;
  height:24px
}

.detail-service-grid strong {
  font-size:11px;
  display:block;
  margin-top:13px;
  color:#7f929f
}

.detail-service-grid small {
  font-size:9px;
  display:block;
  margin-top:8px;
  color:#a9b6c0
}

.action-panel {
  padding:24px
}

.action-panel>p {
  font-size:11px;
  margin-top:9px
}

.action-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:23px 0
}

.action-buttons>.button {
  flex:1;
  font-size:12px
}

.action-note {
  border-top:1px solid var(--line);
  padding-top:16px;
  display:flex;
  gap:8px;
  font-size:9px;
  color:#a1b0ba;
  line-height:1.8
}

.action-note .icon {
  width:15px;
  height:15px;
  flex-shrink:0
}

.mini-timeline {
  padding:24px;
  margin-top:23px
}

.mini-timeline h2 {
  margin-bottom:24px
}

.mini-event {
  display:flex;
  gap:12px;
  margin-bottom:20px;
  position:relative
}

.mini-event>.dot {
  margin-top:5px
}

.mini-event strong {
  font-size:11px;
  font-weight:550;
  display:block
}

.mini-event small {
  display:block;
  font-size:9px;
  color:#acb8c0;
  margin-top:6px
}

.mini-event p {
  font-size:10px;
  color:#97a8b4;
  margin-top:8px;
  overflow-wrap:anywhere
}

.modal-backdrop {
  position:fixed;
  inset:0;
  background:#14263875;
  display:grid;
  place-items:center;
  padding:25px;
  z-index:100
}

.modal {
  background:white;
  border-radius:11px;
  width:100%;
  max-width:480px;
  padding:27px;
  box-shadow:0 20px 80px #102c3333;
  max-height:90vh;
  overflow:auto
}

.modal-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px
}

.modal-heading>.close-modal {
  font-size:24px;
  font-weight:300;
  background:none;
  color:#99a8b2;
  padding:0 3px
}

.modal .muted {
  font-size:12px
}

.modal-actions {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  padding-top:18px
}

.checkbox-label {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:400;
  color:#81939f
}

.checkbox-label input {
  width:15px;
  height:15px;
  flex-shrink:0;
  accent-color:var(--accent)
}

#modal-error {
  font-size:11px;
  color:#ba6565;
  min-height:6px;
  margin-top:12px
}

@media(min-width:1600px) {
  .content {
    padding-top:45px
  }

  .overview-grid {
    grid-template-columns:minmax(0,2.4fr) minmax(300px,1fr)
  }

}

@media(max-width:1200px) {
  .sidebar {
    width:210px;
    padding-inline:17px
  }

  .main-shell {
    margin-left:210px;
    width:calc(100% - 210px)
  }

  .content {
    padding:28px 24px 20px
  }

  .overview-grid {
    grid-template-columns:1fr
  }

  .process-panel {
    display:none
  }

  .capability-grid {
    gap:10px;
    padding-inline:18px
  }

  .capability-item {
    flex-wrap:wrap;
    padding:14px 12px
  }

  .capability-item .planned {
    margin-left:47px
  }

  .metric-card {
    padding:18px
  }

  .metric-card.accent {
    padding-top:17px
  }

  .detail-grid {
    grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr)
  }

}

@media(max-width:900px) {

  .sidebar {
    width:175px;
    padding:24px 13px
  }

  .account strong {
    font-size:9px
  }

  .main-shell {
    margin-left:175px;
    width:calc(100% - 175px)
  }

  .metric-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .capability-grid,.integration-cards {
    grid-template-columns:1fr
  }

  .capability-item .planned {
    margin-left:auto
  }

  .capability-item p {
    font-size:10px
  }

  .scope-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .detail-grid {
    grid-template-columns:1fr
  }

  .detail-service-grid>div {
    padding:18px 10px
  }

}

@media(max-width:620px) {
  .workspace {
    display:block
  }

  .sidebar {
    position:static;
    width:100%;
    padding:16px;
    display:block
  }

  .sidebar nav {
    flex-direction:row;
    gap:2px;
    margin-top:18px
  }

  .nav-item {
    justify-content:center;
    padding:10px 7px;
    font-size:10px;
    gap:5px
  }

  .nav-item .icon {
    width:14px;
    height:14px
  }

  .nav-count,.sidebar-bottom {
    display:none
  }

  .main-shell {
    margin:0;
    width:100%
  }

  .content {
    padding:25px 16px 16px
  }

  .page-heading {
    align-items:flex-start;
    gap:12px
  }

  h1 {
    font-size:23px
  }

  .page-heading p {
    font-size:10px;
    max-width:205px
  }

  .heading-actions .button {
    font-size:10px;
    padding:10px
  }

  .heading-actions .icon {
    width:13px;
    height:13px
  }

  .environment-note {
    font-size:9px;
    margin-bottom:19px
  }

  .metric-grid {
    gap:11px;
    margin-bottom:19px
  }

  .metric-card strong {
    font-size:30px
  }

  .metric-card small {
    font-size:9px
  }

  .panel-heading {
    padding:20px 17px
  }

  .panel-heading h2 {
    font-size:15px
  }

  .overview-grid {
    margin-bottom:19px
  }

  .workspace-footer {
    font-size:8px
  }

  .capability-grid {
    padding-inline:17px
  }

  .list-toolbar {
    flex-wrap:wrap;
    padding:17px
  }

  .search-box {
    max-width:none
  }

  .list-toolbar select {
    width:140px
  }

  .integration-intro {
    padding:25px 22px
  }

  .integration-intro h2 {
    font-size:20px
  }

  .scope-grid {
    grid-template-columns:1fr;
    gap:18px
  }

  .detail-summary h2 {
    font-size:18px
  }

  .detail-summary {
    padding:22px 17px;
    align-items:flex-start
  }

  .detail-fields {
    grid-template-columns:1fr;
    padding-inline:20px;
    gap:21px
  }

  .detail-service-grid {
    gap:8px;
    padding-inline:15px
  }

  .detail-service-grid small {
    font-size:8px
  }

  .modal {
    padding:23px
  }

  .activity-panel .timeline {
    padding-inline:17px
  }

  .timeline-entry {
    gap:12px
  }

}