:root {
  --rit-range-orange: #f76902;
  --rit-range-black: #121212;
  --rit-range-charcoal: #1f2933;
  --rit-range-cloud: #f8fafc;
  --rit-range-bg: #f4f6fb;
  --rit-range-panel: #ffffff;
  --rit-range-surface: #ffffff;
  --rit-range-surface-2: #f8fafc;
  --rit-range-surface-3: #eef2f7;
  --rit-range-border: #d8dee8;
  --rit-range-text: #111827;
  --rit-range-muted: #5b6472;
  --rit-range-link: #c75300;
  --rit-range-hover: rgba(247, 105, 2, 0.12);
  --rit-range-active: rgba(247, 105, 2, 0.18);
}

body::before {
  background: var(--rit-range-orange);
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

.rit-range-banner {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  color: #7c2d12;
  display: flex;
  font-size: 12px;
  gap: 8px;
  line-height: 18px;
  margin: 0 0 12px;
  padding: 8px 10px;
}

.rit-range-banner strong {
  color: #9a3412;
  font-weight: 600;
}

.rit-login-title {
  color: var(--rit-range-text);
  letter-spacing: 0;
}

.rit-cilogon-login {
  background: var(--rit-range-surface);
  border: 1px solid var(--rit-range-border);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  margin: 0 0 16px;
  padding: 12px;
  width: 310px;
}

.rit-cilogon-header {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.rit-cilogon-logo {
  display: block;
  flex: 0 0 auto;
  height: 24px;
  width: 24px;
}

.rit-cilogon-title {
  color: var(--rit-range-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.rit-cilogon-helper {
  color: var(--rit-range-muted);
  font-size: 13px;
  line-height: 18px;
  margin: 0 0 12px;
}

.rit-cilogon-button {
  appearance: none;
  background: var(--rit-range-orange);
  border: 1px solid var(--rit-range-orange);
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  height: 40px;
  line-height: 20px;
  padding: 0 12px;
  width: 100%;
}

.rit-cilogon-button:hover,
.rit-cilogon-button:focus {
  background: #d95d02;
  border-color: #d95d02;
  outline: 2px solid rgba(247, 105, 2, 0.24);
  outline-offset: 1px;
}

.rit-cilogon-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.rit-cilogon-status {
  color: var(--rit-range-muted);
  font-size: 12px;
  line-height: 16px;
  min-height: 0;
  padding-top: 6px;
}

.rit-range-open-terminal {
  border-color: var(--rit-range-orange) !important;
  color: var(--rit-range-link) !important;
  font-weight: 600;
}

.rit-range-open-terminal:hover,
.rit-range-open-terminal:focus {
  border-color: var(--rit-range-orange) !important;
  color: var(--rit-range-orange) !important;
}

.rit-range-terminal-modal {
  align-items: center;
  background: rgba(15, 23, 42, 0.58);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10050;
}

.rit-range-terminal-dialog {
  background: #0f1117;
  border: 1px solid rgba(248, 250, 252, 0.16);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  display: flex;
  flex-direction: column;
  height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  width: min(1120px, calc(100vw - 48px));
}

.rit-range-terminal-modal.is-fullscreen {
  padding: 0;
}

.rit-range-terminal-modal.is-fullscreen .rit-range-terminal-dialog {
  border-radius: 0;
  height: 100vh;
  width: 100vw;
}

.rit-range-terminal-header {
  align-items: center;
  background: #171a21;
  border-bottom: 1px solid rgba(248, 250, 252, 0.14);
  color: #f8fafc;
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr auto;
  min-height: 48px;
  padding: 8px 12px;
}

.rit-range-terminal-title {
  border-left: 3px solid var(--rit-range-orange);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  padding-left: 10px;
}

.rit-range-terminal-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.rit-range-terminal-status {
  color: #cbd5e1;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rit-range-terminal-status[data-state="ok"] {
  color: #86efac;
}

.rit-range-terminal-status[data-state="warn"] {
  color: #fde68a;
}

.rit-range-terminal-status[data-state="error"] {
  color: #fca5a5;
}

.rit-range-terminal-fullscreen,
.rit-range-terminal-close {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(248, 250, 252, 0.26);
  border-radius: 4px;
  color: #f8fafc;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  height: 30px;
  padding: 0 10px;
}

.rit-range-terminal-fullscreen:hover,
.rit-range-terminal-fullscreen:focus,
.rit-range-terminal-close:hover,
.rit-range-terminal-close:focus {
  border-color: var(--rit-range-orange);
  color: #ffffff;
  outline: 2px solid rgba(247, 105, 2, 0.28);
  outline-offset: 1px;
}

.rit-range-terminal-screen {
  background: #0f1117;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

[class*="base-layout-right"].rit-vpnaas-host {
  position: relative;
  z-index: 0;
}

[class*="base-layout-right"]:has(.rit-vpnaas-frame-shell) {
  position: relative;
  z-index: 0;
}

html.rit-vpnaas-active [class*="base-layout-sider"],
html.rit-vpnaas-active [class*="base-layout-sider-hover"],
html.rit-vpnaas-active .ant-menu-submenu-popup {
  z-index: 1001 !important;
}

.rit-vpnaas-menu-item {
  color: var(--rit-range-text);
}

.rit-vpnaas-frame-shell {
  background: var(--rit-range-bg);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  min-height: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 50;
}

.rit-vpnaas-frame-toolbar {
  align-items: center;
  background: var(--rit-range-panel);
  border-bottom: 1px solid var(--rit-range-border);
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
}

.rit-vpnaas-frame-title {
  border-left: 3px solid var(--rit-range-orange);
  color: var(--rit-range-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  padding-left: 10px;
}

.rit-vpnaas-frame-open {
  color: var(--rit-range-link);
  font-size: 13px;
  font-weight: 600;
}

.rit-vpnaas-frame {
  background: #ffffff;
  border: 0;
  flex: 1;
  min-height: 0;
  width: 100%;
}

@media (max-width: 680px) {
  .rit-cilogon-login {
    width: 100%;
  }

  .rit-range-terminal-modal {
    padding: 10px;
  }

  .rit-range-terminal-dialog {
    height: calc(100vh - 20px);
    width: calc(100vw - 20px);
  }

  .rit-range-terminal-header {
    grid-template-columns: 1fr auto;
  }

  .rit-range-terminal-status {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}