:root {
  font-family: 'Salesforce Sans', Arial, sans-serif;
  color: #17233c;
  background: #f5f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f5f7fb; }
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; color: #17233c; }
.slds-global-header_container { position: sticky; top: 0; z-index: 4; box-shadow: 0 1px 5px #17233c12; }
.slds-global-header { height: 66px; padding: 0 clamp(20px, 5vw, 76px); background: #fff; }
.slds-global-header__item { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; background: #4169e1; color: white; font-weight: 700; font-size: 19px; }
.brand-name, .login-brand { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.header-caption { margin-right: 14px; color: #79849a; font-size: 12px; }
.logout-button { border-color: #e0e5ef; color: #55627a; }
.main-content { width: min(1240px, calc(100% - 48px)); margin: 0 auto; flex: 1; padding: 44px 0 70px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
.eyebrow { margin: 0 0 8px; color: #7585a5; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
h1, h2, h3, p { margin-top: 0; }
.page-heading h1, .login-card h1 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -1.2px; font-weight: 700; }
.subtitle { margin: 0; color: #7d8799; font-size: 14px; line-height: 1.65; }
.summary-row { margin: 0 -12px 24px; }
.summary-row > .slds-col { padding: 0 12px; }
.summary-card { height: 94px; display: flex; align-items: center; gap: 15px; padding: 18px 22px; background: #fff; border: 1px solid #e9edf4; border-radius: 12px; box-shadow: 0 3px 12px #15294b06; }
.summary-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; font-weight: 700; }
.route-icon { background: #edf2ff; color: #4169e1; }
.log-icon { background: #ebf8f2; color: #199b6b; }
.retention-icon { background: #fff6e8; color: #d78a1c; }
.summary-card p { margin: 0 0 4px; color: #7d8799; font-size: 12px; }
.summary-card strong { font-size: 21px; font-weight: 700; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 22px; }
.panel { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e9edf4; border-radius: 12px; box-shadow: 0 3px 12px #15294b06; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; min-height: 77px; padding: 16px 21px; border-bottom: 1px solid #edf0f5; }
.panel-heading h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.panel-heading p { margin: 0; color: #929bac; font-size: 11px; }
.refresh-button { color: #7585a5; font-size: 20px; }
.route-list { padding: 4px 20px; }
.route-item { padding: 17px 0 16px; border-bottom: 1px solid #edf0f5; }
.route-item:last-child { border-bottom: 0; }
.route-topline, .route-status, .route-url, .route-actions { display: flex; align-items: center; }
.route-topline { justify-content: space-between; margin-bottom: 9px; }
.method-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 4px 7px; border-radius: 5px; font: 700 9px/1.2 'Salesforce Sans', Arial, sans-serif; letter-spacing: .3px; }
.method-get { color: #16794c; background: #e8f7ef; }
.method-post { color: #2563b6; background: #eaf2ff; }
.method-put { color: #a16a08; background: #fff4dc; }
.method-patch { color: #7947b7; background: #f3ebff; }
.method-delete { color: #bd3b45; background: #fff0ef; }
.method-options, .method-head { color: #52627c; background: #eef1f6; }
.route-status { gap: 6px; color: #748198; font-size: 10px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot.online { background: #1fa779; box-shadow: 0 0 0 3px #1fa7791c; }
.status-dot.offline { background: #b2b9c5; }
.route-item h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.route-item code { color: #46536b; font: 12px 'JetBrains Mono', monospace; }
.route-url { justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 10px; border-radius: 6px; background: #f7f8fb; color: #78849b; font: 10px 'JetBrains Mono', monospace; }
.route-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-button, .text-button { padding: 0; border: 0; background: none; color: #4768c9; cursor: pointer; font-size: 11px; }
.route-actions { gap: 15px; margin-top: 11px; }
.danger-text { color: #c24852; }
.request-list { max-height: 590px; overflow: auto; }
.request-row { width: 100%; min-height: 57px; display: grid; grid-template-columns: 53px minmax(0, 1fr) 44px 42px; align-items: center; gap: 10px; padding: 9px 18px; border: 0; border-bottom: 1px solid #f0f2f6; background: #fff; text-align: left; cursor: pointer; }
.request-row:hover { background: #f8faff; }
.request-path { overflow: hidden; color: #46536b; font: 10px 'JetBrains Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.response-status { color: #16835d; font-size: 11px; font-weight: 700; }
.response-status.failed { color: #c24852; }
.request-row time { color: #929bac; text-align: right; font-size: 10px; }
.empty-state { min-height: 320px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px; text-align: center; }
.compact-empty { min-height: 270px; }
.empty-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 14px; background: #eef2ff; color: #4768c9; font-size: 21px; }
.empty-state h3 { margin: 0 0 6px; font-size: 14px; }
.empty-state p { margin: 0 0 17px; color: #8791a3; font-size: 12px; }
.login-layout { min-height: min(690px, 76vh); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: white; border: 1px solid #e9edf4; border-radius: 16px; box-shadow: 0 12px 42px #15294b0c; }
.login-art { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 550px; background: linear-gradient(145deg, #274db4, #557fe9 65%, #7199f2); }
.art-orbit { position: absolute; width: 420px; height: 420px; border: 1px solid #ffffff20; border-radius: 50%; }
.orbit-one { transform: translate(-50px, 70px); }
.orbit-two { width: 560px; height: 560px; transform: translate(60px, -20px); }
.art-card { z-index: 1; width: min(330px, 80%); padding: 21px; border: 1px solid #ffffff31; border-radius: 12px; background: #162f6ca8; box-shadow: 0 20px 60px #10245445; color: white; transform: rotate(-3deg); }
.art-method { padding: 4px 7px; border-radius: 4px; background: #66e0ae2b; color: #8af0c8; font-size: 9px; font-weight: 700; }
.art-path { margin-left: 10px; font: 11px 'JetBrains Mono', monospace; }
.art-status { float: right; color: #8af0c8; font-size: 10px; }
.art-card pre { margin: 20px 0 0; color: #d6e1ff; font: 12px 'JetBrains Mono', monospace; }
.art-caption { position: absolute; bottom: 32px; color: #ffffffc9; font-size: 12px; letter-spacing: .4px; }
.login-card { align-self: center; max-width: 420px; padding: 60px clamp(28px, 6vw, 76px); }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 52px; }
.login-card .eyebrow { margin-bottom: 10px; }
.login-card .subtitle { margin-bottom: 30px; }
.login-card .slds-form-element__label, .field { display: block; margin-bottom: 8px; color: #44516a; font-size: 12px; font-weight: 600; }
.login-input { height: 44px; border-color: #dfe4ed; border-radius: 7px; }
.login-error, .form-error { margin: 10px 0 0; color: #bd3b45; font-size: 12px; }
.login-button { width: 100%; height: 44px; margin-top: 20px; border-radius: 7px; background: #4169e1; }
.privacy-note { margin: 17px 0 0; color: #9aa3b2; font-size: 10px; line-height: 1.6; }
.notice { margin-bottom: 20px; border-radius: 7px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; overflow: auto; padding: 24px; background: #14213b80; }
.modal-card { width: min(650px, 100%); max-height: min(90vh, 900px); overflow: auto; padding: 25px; border-radius: 12px; background: white; box-shadow: 0 24px 80px #10245440; }
.modal-heading { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.modal-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.4px; }
.close-button { align-self: start; border: 0; background: transparent; color: #7c8798; cursor: pointer; font-size: 24px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin: 0; }
.field-wide { grid-column: 1 / -1; }
.field .slds-input, .field .slds-select, .field .slds-textarea { margin-top: 7px; border-color: #dfe4ed; border-radius: 6px; font-weight: 400; }
.code-input { font: 11px/1.55 'JetBrains Mono', monospace; }
.modal-actions { display: flex; justify-content: end; gap: 10px; margin-top: 22px; }
.log-modal { width: min(760px, 100%); }
.log-detail { display: grid; gap: 8px; }
.log-detail h3 { margin: 8px 0 0; color: #69758b; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.log-detail pre { max-height: 280px; overflow: auto; margin: 0; padding: 12px; border-radius: 6px; background: #f6f7fa; color: #38455d; font: 11px/1.6 'JetBrains Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-footer { padding: 20px; color: #a0a8b6; text-align: center; font-size: 10px; }
.app-footer span { margin: 0 6px; }
.slds-spinner_container { position: fixed; inset: 66px 0 0; z-index: 5; background: #f5f7fb99; }

@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .summary-card { padding: 14px; }
}
@media (max-width: 640px) {
  .main-content { width: min(100% - 30px, 1240px); padding-top: 30px; }
  .page-heading { align-items: start; flex-direction: column; }
  .login-layout { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-card { width: 100%; max-width: none; padding: 42px 28px; }
  .login-brand { margin-bottom: 40px; }
  .request-row { grid-template-columns: 49px minmax(0, 1fr) 38px; gap: 7px; padding-inline: 12px; }
  .request-row time { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .modal-backdrop { padding: 12px; }
  .modal-card { padding: 20px; }
}