.com { color: #6e849a; }
.lit { color: #1b5f92; }
.pun, .opn, .clo { color: #6e849a; }
.fun { color: #b73446; }
.str, .atv { color: #9d4d0e; }
.kwd, .linenums .tag { color: #174b8b; }
.typ, .atn, .dec, .var { color: #1f8d82; }
.pln { color: #1f2e40; }

.prettyprint {
  padding: 8px;
  background-color: var(--bg-code);
  border: 1px solid var(--border-code);
}
.prettyprint.linenums {
  -webkit-box-shadow: inset 40px 0 0 rgba(218, 231, 247, 0.65), inset 41px 0 0 rgba(186, 204, 224, 0.6);
     -moz-box-shadow: inset 40px 0 0 rgba(218, 231, 247, 0.65), inset 41px 0 0 rgba(186, 204, 224, 0.6);
          box-shadow: inset 40px 0 0 rgba(218, 231, 247, 0.65), inset 41px 0 0 rgba(186, 204, 224, 0.6);
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin: 0 0 0 33px; /* IE indents via margin-left */
}
ol.linenums li {
  padding-left: 12px;
  color: #7f92a5;
  line-height: 18px;
  text-shadow: none;
}

html[data-theme="dark"] .com { color: #8da5bf; }
html[data-theme="dark"] .lit { color: #9cd0ff; }
html[data-theme="dark"] .pun,
html[data-theme="dark"] .opn,
html[data-theme="dark"] .clo { color: #8da5bf; }
html[data-theme="dark"] .fun { color: #ff8d94; }
html[data-theme="dark"] .str,
html[data-theme="dark"] .atv { color: #f6b26b; }
html[data-theme="dark"] .kwd,
html[data-theme="dark"] .linenums .tag { color: #9bc8ff; }
html[data-theme="dark"] .typ,
html[data-theme="dark"] .atn,
html[data-theme="dark"] .dec,
html[data-theme="dark"] .var { color: #7fd8c2; }
html[data-theme="dark"] .pln { color: #d5e0ec; }

html[data-theme="dark"] .prettyprint.linenums {
  -webkit-box-shadow: inset 40px 0 0 rgba(25, 45, 67, 0.72), inset 41px 0 0 rgba(53, 80, 109, 0.72);
     -moz-box-shadow: inset 40px 0 0 rgba(25, 45, 67, 0.72), inset 41px 0 0 rgba(53, 80, 109, 0.72);
          box-shadow: inset 40px 0 0 rgba(25, 45, 67, 0.72), inset 41px 0 0 rgba(53, 80, 109, 0.72);
}

html[data-theme="dark"] ol.linenums li {
  color: #9db1c6;
}
/* line 1, app/assets/stylesheets/navbar.sass */
.navbar-inner {
  background: linear-gradient(135deg, #1671bf 0%, #0b4f87 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(9, 34, 61, 0.16);
  padding: 4px 10px;
}

/* line 7, app/assets/stylesheets/navbar.sass */
.navbar-inner .brand {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 24px;
  gap: 10px;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 5px 0;
  padding: 10px 10px 10px 8px;
}

/* line 18, app/assets/stylesheets/navbar.sass */
.navbar-inner .brand .logo-mark {
  color: #fff;
  flex: none;
  height: 26px;
  width: 26px;
}

/* line 23, app/assets/stylesheets/navbar.sass */
.navbar-inner a {
  color: #FFF;
  text-shadow: none;
}

/* line 26, app/assets/stylesheets/navbar.sass */
.navbar-inner a:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* line 29, app/assets/stylesheets/navbar.sass */
.navbar-inner a:active {
  text-decoration: none;
  text-shadow: none !important;
}

/* line 33, app/assets/stylesheets/navbar.sass */
.navbar {
  margin-bottom: 0;
}

/* line 36, app/assets/stylesheets/navbar.sass */
.navbar .nav li > a, .navbar .nav a {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #FFF;
  line-height: 24px;
  display: block;
  margin: 6px 4px;
  padding: 10px 14px;
  float: left;
}

/* line 46, app/assets/stylesheets/navbar.sass */
.navbar .nav li > a:hover, .navbar .nav a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9) !important;
}

/* line 49, app/assets/stylesheets/navbar.sass */
.navbar .nav li > a:active, .navbar .nav a:active {
  text-shadow: none !important;
}

/* line 51, app/assets/stylesheets/navbar.sass */
.navbar .nav li > a:focus-visible, .navbar .nav a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* line 54, app/assets/stylesheets/navbar.sass */
.navbar .nav li > a.active, .navbar .nav a.active {
  background-color: rgba(255, 255, 255, 0.22);
}

/* line 56, app/assets/stylesheets/navbar.sass */
.navbar .nav li > a.active:hover, .navbar .nav a.active:hover {
  background-color: rgba(255, 255, 255, 0.27);
}

/* line 60, app/assets/stylesheets/navbar.sass */
.navbar .nav ul.dropdown-menu li a {
  border-radius: 0;
  margin: 0;
  padding: 8px 12px;
  text-shadow: none;
  color: #333;
}

/* line 67, app/assets/stylesheets/navbar.sass */
.navbar .nav ul.dropdown-menu li a:hover {
  background: #e8f2ff;
}

/* line 70, app/assets/stylesheets/navbar.sass */
.navbar .nav .caret {
  border-top-color: #fff;
  opacity: 0.8;
}

/* line 74, app/assets/stylesheets/navbar.sass */
.navbar .pull-right {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* line 83, app/assets/stylesheets/navbar.sass */
.navbar .nav .account-menu {
  position: relative;
  float: right;
  margin: 6px 4px;
}

/* line 88, app/assets/stylesheets/navbar.sass */
.navbar .nav .theme-menu {
  position: relative;
  float: right;
  margin: 6px 4px;
}

/* line 93, app/assets/stylesheets/navbar.sass */
.navbar .nav .nav-login-item {
  float: right;
  margin: 6px 4px;
}

/* line 97, app/assets/stylesheets/navbar.sass */
.account-trigger {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  transition: background-color 160ms ease, box-shadow 160ms ease;
  width: 44px;
}

/* line 109, app/assets/stylesheets/navbar.sass */
.account-trigger:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* line 111, app/assets/stylesheets/navbar.sass */
.account-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* line 115, app/assets/stylesheets/navbar.sass */
.account-avatar {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  text-transform: uppercase;
}

/* line 125, app/assets/stylesheets/navbar.sass */
.account-avatar-has-image {
  border-radius: 50%;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* line 131, app/assets/stylesheets/navbar.sass */
.account-avatar-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* line 137, app/assets/stylesheets/navbar.sass */
.account-avatar-lg {
  background: linear-gradient(135deg, var(--brand) 0%, #0047b3 100%);
  border-radius: 50%;
  flex: 0 0 44px;
  font-size: 18px;
  height: 44px;
  width: 44px;
}

/* line 145, app/assets/stylesheets/navbar.sass */
.account-avatar-lg.account-avatar-has-image {
  background: none;
}

/* line 148, app/assets/stylesheets/navbar.sass */
.account-popover {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(9, 34, 61, 0.24);
  display: none;
  margin: 10px 0 0;
  min-width: 288px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1050;
}

/* line 162, app/assets/stylesheets/navbar.sass */
.account-menu.is-open .account-popover {
  display: block;
}

/* line 165, app/assets/stylesheets/navbar.sass */
.account-identity {
  align-items: center;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 10px 10px 12px;
}

/* line 172, app/assets/stylesheets/navbar.sass */
.account-identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* line 177, app/assets/stylesheets/navbar.sass */
.account-name {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 185, app/assets/stylesheets/navbar.sass */
.account-role {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 192, app/assets/stylesheets/navbar.sass */
.account-section {
  padding: 8px 10px 4px;
}

/* line 195, app/assets/stylesheets/navbar.sass */
.account-section-label {
  color: var(--text-muted);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* line 204, app/assets/stylesheets/navbar.sass */
.theme-segmented {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
}

/* line 213, app/assets/stylesheets/navbar.sass */
.theme-option {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 6px;
  transition: background-color 140ms ease, color 140ms ease;
}

/* line 223, app/assets/stylesheets/navbar.sass */
.theme-option:hover {
  color: var(--text-primary);
}

/* line 225, app/assets/stylesheets/navbar.sass */
.theme-option.is-active {
  background: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(9, 34, 61, 0.16);
  color: var(--brand);
}

/* line 230, app/assets/stylesheets/navbar.sass */
.account-divider {
  background: var(--border-default);
  height: 1px;
  margin: 8px 6px;
}

/* line 235, app/assets/stylesheets/navbar.sass */
.navbar .nav .account-item {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  float: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  justify-content: space-between;
  margin: 0;
  padding: 10px;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  width: 100%;
}

/* line 259, app/assets/stylesheets/navbar.sass */
.navbar .nav .account-item:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary) !important;
}

/* line 263, app/assets/stylesheets/navbar.sass */
.account-item-hint {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* line 268, app/assets/stylesheets/navbar.sass */
.navbar .nav .account-item.account-item-danger {
  color: var(--danger);
}

/* line 270, app/assets/stylesheets/navbar.sass */
.navbar .nav .account-item.account-item-danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface));
  color: var(--danger) !important;
}

/* line 274, app/assets/stylesheets/navbar.sass */
.account-login {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
}

/* line 285, app/assets/stylesheets/navbar.sass */
.theme-trigger {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  transition: background-color 160ms ease, box-shadow 160ms ease;
  width: 44px;
}

/* line 298, app/assets/stylesheets/navbar.sass */
.theme-trigger:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* line 300, app/assets/stylesheets/navbar.sass */
.theme-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* line 304, app/assets/stylesheets/navbar.sass */
.theme-trigger-glyph {
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-block;
  height: 18px;
  width: 18px;
}

/* line 312, app/assets/stylesheets/navbar.sass */
.theme-popover {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(9, 34, 61, 0.24);
  display: none;
  margin: 10px 0 0;
  min-width: 220px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1050;
}

/* line 326, app/assets/stylesheets/navbar.sass */
.theme-menu.is-open .theme-popover {
  display: block;
}

/* line 329, app/assets/stylesheets/navbar.sass */
.navbar .nav .nav-login-button {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  color: var(--brand);
  float: none;
  font-weight: 700;
  margin: 0;
  padding: 10px 18px;
  text-shadow: none;
}

/* line 338, app/assets/stylesheets/navbar.sass */
.navbar .nav .nav-login-button:hover {
  background: #fff;
  color: var(--brand) !important;
}

/* line 342, app/assets/stylesheets/navbar.sass */
.btn-navbar {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 40px;
  padding: 0;
  margin: 6px 0;
  float: right;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  cursor: pointer;
}

/* line 356, app/assets/stylesheets/navbar.sass */
.btn-navbar .navbar-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
}

/* line 363, app/assets/stylesheets/navbar.sass */
.btn-navbar:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* line 367, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .navbar-inner {
  background: linear-gradient(135deg, #1c3a5a 0%, #16314d 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* line 373, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .navbar .nav li > a:hover,
html[data-theme="dark"] .navbar .nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* line 375, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .navbar .nav li > a.active,
html[data-theme="dark"] .navbar .nav a.active {
  background-color: rgba(95, 176, 255, 0.28);
}

/* line 377, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .navbar .nav ul.dropdown-menu li a {
  background: #1f2f44;
  color: #d8e5f2;
}

/* line 380, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .navbar .nav ul.dropdown-menu li a:hover {
  background: #2a405d;
}

/* line 382, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .account-popover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* line 384, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .theme-popover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* line 386, app/assets/stylesheets/navbar.sass */
html[data-theme="dark"] .theme-option.is-active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* line 391, app/assets/stylesheets/navbar.sass */
.account-popover,
.theme-popover {
  max-width: calc(100vw - 24px);
}
/* line 1, app/assets/stylesheets/tutorials.sass */
#page.tutorial {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
  max-width: 980px;
}

/* line 6, app/assets/stylesheets/tutorials.sass */
#page.tutorial h1, #page.tutorial h2 {
  color: var(--text-primary);
  font-weight: 700;
}

/* line 9, app/assets/stylesheets/tutorials.sass */
#page.tutorial p {
  font-size: 16px;
  line-height: 1.65;
}

/* line 12, app/assets/stylesheets/tutorials.sass */
#page.tutorial .section-header {
  font-size: 24px;
  margin: 48px 0 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
}

/* line 17, app/assets/stylesheets/tutorials.sass */
#page.tutorial .section-header:first-child {
  margin-top: 0;
}

/* line 20, app/assets/stylesheets/tutorials.sass */
#page.tutorial h3, #page.tutorial h4 {
  color: var(--text-primary);
  margin-top: 24px;
}

/* line 24, app/assets/stylesheets/tutorials.sass */
#page.tutorial ul {
  margin-bottom: 14px;
}

/* line 27, app/assets/stylesheets/tutorials.sass */
#page.tutorial pre {
  margin: 12px 0 18px;
}

/* line 30, app/assets/stylesheets/tutorials.sass */
#page.tutorial img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
/* line 1, app/assets/stylesheets/applications.sass */
body {
  background-image: none;
}

/* line 5, app/assets/stylesheets/applications.sass */
.sidebar h2:first-child {
  margin-top: 0;
}

/* line 9, app/assets/stylesheets/applications.sass */
body.applications textarea {
  min-height: 86px;
}

/* line 12, app/assets/stylesheets/applications.sass */
body.applications label.checkbox {
  display: inline-flex;
  gap: 8px;
  font-weight: normal;
  margin-top: 10px;
  padding-left: 0;
}

/* line 19, app/assets/stylesheets/applications.sass */
body.applications tr.banned {
  text-decoration: line-through;
}

/* line 21, app/assets/stylesheets/applications.sass */
body.applications tr.banned .ban {
  visibility: hidden;
}

/* line 24, app/assets/stylesheets/applications.sass */
.alert {
  border-radius: var(--radius-md);
}

@media (max-width: 980px) {
  /* line 29, app/assets/stylesheets/applications.sass */
  .navbar .nav-collapse {
    height: auto;
  }
  /* line 33, app/assets/stylesheets/applications.sass */
  .new_application .span8 {
    width: 100%;
  }
}

/* line 36, app/assets/stylesheets/applications.sass */
.bots-table {
  word-break: break-all;
}

/* line 39, app/assets/stylesheets/applications.sass */
.sidebar-description {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

/* line 45, app/assets/stylesheets/applications.sass */
.sidebar-description h2 {
  margin: 0 0 12px 0;
  padding: 0;
  border-bottom: none;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* line 52, app/assets/stylesheets/applications.sass */
.sidebar-description p {
  margin-bottom: 10px;
}

/* line 54, app/assets/stylesheets/applications.sass */
.sidebar-description ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 58, app/assets/stylesheets/applications.sass */
.sidebar-description li {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* line 63, app/assets/stylesheets/applications.sass */
.sidebar-description li:last-child {
  margin-bottom: 0;
}

/* line 65, app/assets/stylesheets/applications.sass */
.sidebar-description li b {
  color: var(--text-primary);
  display: block;
}

/* line 69, app/assets/stylesheets/applications.sass */
.create-app {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

/* line 75, app/assets/stylesheets/applications.sass */
.create-app__intro {
  margin-bottom: 4px;
}

/* line 77, app/assets/stylesheets/applications.sass */
.create-app__intro h1 {
  margin-bottom: 8px;
}

/* line 80, app/assets/stylesheets/applications.sass */
.create-app__aside .sidebar-description {
  position: sticky;
  top: var(--space-5);
}

/* line 86, app/assets/stylesheets/applications.sass */
.applications.edit #page {
  margin: 0 auto;
  max-width: 760px;
}

/* line 90, app/assets/stylesheets/applications.sass */
.form-section {
  border-top: 1px solid var(--border-default);
  margin-top: 28px;
  padding-top: 24px;
}

/* line 94, app/assets/stylesheets/applications.sass */
.form-section:first-of-type {
  border-top: 0;
  margin-top: 20px;
  padding-top: 0;
}

/* line 99, app/assets/stylesheets/applications.sass */
.form-section__title {
  border-bottom: none;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  padding: 0;
}

/* line 106, app/assets/stylesheets/applications.sass */
.form-section__hint {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 18px;
}

/* line 112, app/assets/stylesheets/applications.sass */
.form-field {
  margin-bottom: 18px;
}

/* line 114, app/assets/stylesheets/applications.sass */
.form-field:last-child {
  margin-bottom: 0;
}

/* line 116, app/assets/stylesheets/applications.sass */
.form-field label {
  margin-bottom: 6px;
}

/* line 118, app/assets/stylesheets/applications.sass */
.form-field input,
.form-field textarea,
.form-field select {
  margin-top: 0;
}

/* line 122, app/assets/stylesheets/applications.sass */
.form-field .help-block {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 6px 0 0;
  opacity: 0.9;
}

/* line 129, app/assets/stylesheets/applications.sass */
.form-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
}

/* line 134, app/assets/stylesheets/applications.sass */
.form-row .form-field {
  margin-bottom: 0;
}

/* line 137, app/assets/stylesheets/applications.sass */
.form-agreement {
  align-items: flex-start;
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 16px;
}

/* line 146, app/assets/stylesheets/applications.sass */
.form-agreement input[type="checkbox"] {
  accent-color: var(--brand);
  cursor: pointer;
  flex: 0 0 auto;
  height: 16px;
  margin: 3px 0 0;
  width: 16px;
}

/* line 154, app/assets/stylesheets/applications.sass */
body.applications .form-agreement label.checkbox {
  color: var(--text-secondary);
  display: inline;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* line 166, app/assets/stylesheets/applications.sass */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
}

/* line 173, app/assets/stylesheets/applications.sass */
.form-actions .btn {
  align-items: center;
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-width: 130px;
  padding: 10px 18px;
  text-decoration: none;
}

/* line 183, app/assets/stylesheets/applications.sass */
.form-actions .btn-secondary,
.form-actions .btn:not(.btn-primary) {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

/* line 189, app/assets/stylesheets/applications.sass */
.form-actions .btn-secondary:hover,
.form-actions .btn:not(.btn-primary):hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

@media (max-width: 880px) {
  /* line 195, app/assets/stylesheets/applications.sass */
  .create-app {
    grid-template-columns: 1fr;
  }
  /* line 197, app/assets/stylesheets/applications.sass */
  .create-app__aside .sidebar-description {
    position: static;
  }
}

@media (max-width: 520px) {
  /* line 201, app/assets/stylesheets/applications.sass */
  .form-row {
    grid-template-columns: 1fr;
  }
  /* line 206, app/assets/stylesheets/applications.sass */
  .form-actions {
    flex-direction: column;
  }
  /* line 209, app/assets/stylesheets/applications.sass */
  .form-actions .btn {
    width: 100%;
  }
}

/* line 212, app/assets/stylesheets/applications.sass */
.close {
  opacity: 0.6;
}

/* line 214, app/assets/stylesheets/applications.sass */
.close:hover {
  opacity: 1;
}

/* line 217, app/assets/stylesheets/applications.sass */
.section-header {
  padding: 0;
  margin: 0 0 1em 0;
  line-height: 27px;
  border-bottom: none;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

/* line 226, app/assets/stylesheets/applications.sass */
.nav-tabs a {
  margin-bottom: -1px;
  padding: 8px 12px;
  line-height: 18px;
  margin-right: 2px;
  display: list-item;
  float: left;
  color: var(--brand);
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--border-default);
  border-bottom-color: var(--border-default);
  background-color: var(--bg-surface-muted);
}

/* line 239, app/assets/stylesheets/applications.sass */
.nav-tabs a.active {
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-bottom-color: transparent;
  cursor: default;
  background: var(--bg-surface);
}

/* line 246, app/assets/stylesheets/applications.sass */
.entity-list-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* line 252, app/assets/stylesheets/applications.sass */
.entity-meta {
  color: var(--text-muted);
  font-size: 13px;
}

/* line 256, app/assets/stylesheets/applications.sass */
.entity-empty-state {
  align-items: center;
  background: var(--bg-surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

/* line 268, app/assets/stylesheets/applications.sass */
.entity-empty-icon {
  align-items: center;
  background: var(--brand-soft);
  border-radius: 50%;
  color: var(--brand-strong);
  display: flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

/* line 278, app/assets/stylesheets/applications.sass */
.entity-empty-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* line 284, app/assets/stylesheets/applications.sass */
.entity-empty-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
}

/* line 291, app/assets/stylesheets/applications.sass */
.entity-empty-action {
  margin-top: 4px;
}

/* line 294, app/assets/stylesheets/applications.sass */
.field-group {
  border-top: 1px solid var(--border-default);
  margin-top: 18px;
  padding-top: 16px;
}

/* line 298, app/assets/stylesheets/applications.sass */
.field-group:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* line 303, app/assets/stylesheets/applications.sass */
.form-kicker {
  color: var(--text-muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* line 312, app/assets/stylesheets/applications.sass */
.activity-badge {
  background: var(--brand-soft);
  border-radius: 999px;
  color: var(--brand-strong);
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
}

/* line 321, app/assets/stylesheets/applications.sass */
.danger-zone {
  background: var(--danger-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px;
}
@font-face {
  font-family: 'groupme';
  src:  url(/assets/groupme/groupme.eot?i0xf0c);
  src:  url(/assets/groupme/groupme.eot?i0xf0c#iefix) format('embedded-opentype'),
    url(/assets/groupme/groupme.ttf?i0xf0c) format('truetype'),
    url(/assets/groupme/groupme.woff?i0xf0c) format('woff'),
    url(/assets/groupme/groupme.svg?i0xf0c#groupme) format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="gmicon-"], [class*=" gmicon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'groupme' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gmicon-poundie:before {
  content: "\e61a";
}
/* line 1, app/assets/stylesheets/bots.sass */
.access-token {
  background-color: var(--danger-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin: 0 auto 16px;
  max-width: 640px;
  padding: 12px 14px;
  width: 100%;
}

/* line 10, app/assets/stylesheets/bots.sass */
.btn-warning, .btn-warning:hover {
  color: #000000;
}

/* line 13, app/assets/stylesheets/bots.sass */
.bots-stage {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface-muted) 84%, #ffffff 16%) 0%, color-mix(in srgb, var(--bg-surface) 94%, #ffffff 6%) 100%);
  border: 1px solid color-mix(in srgb, var(--border-default) 82%, var(--brand) 18%);
  border-radius: var(--radius-md);
  margin-top: 12px;
  padding: 12px;
  padding-top: 12px;
}

/* line 24, app/assets/stylesheets/bots.sass */
.bot-avatar-preview {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  max-height: 120px;
  max-width: 120px;
  padding: 4px;
}

/* line 31, app/assets/stylesheets/bots.sass */
.bots-collection {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  justify-items: start;
  margin-top: 0;
  padding-top: 0;
}

@media (min-width: 840px) {
  /* line 42, app/assets/stylesheets/bots.sass */
  .bots-collection {
    grid-template-columns: repeat(auto-fit, minmax(320px, 600px));
    justify-content: space-between;
  }
}

/* line 46, app/assets/stylesheets/bots.sass */
.bot-card {
  background: linear-gradient(145deg, rgba(0, 102, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%), var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--border-default) 78%, var(--brand) 22%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
  cursor: pointer;
  max-width: 600px;
  overflow: hidden;
  padding: 16px;
  position: relative;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
  width: 100%;
}

/* line 62, app/assets/stylesheets/bots.sass */
.bot-card:hover {
  border-color: color-mix(in srgb, var(--border-strong) 70%, var(--brand) 30%);
  box-shadow: 0 14px 30px rgba(10, 32, 58, 0.13);
  transform: translateY(-1px);
}

/* line 67, app/assets/stylesheets/bots.sass */
.bot-card::before {
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.42), rgba(44, 242, 255, 0.24), rgba(0, 102, 255, 0));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  content: "";
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* line 78, app/assets/stylesheets/bots.sass */
.bot-card-header {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

/* line 84, app/assets/stylesheets/bots.sass */
.bot-avatar {
  align-items: center;
  background: linear-gradient(160deg, var(--bg-surface-muted) 0%, color-mix(in srgb, var(--bg-surface-muted) 78%, #ffffff 22%) 100%);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  width: 48px;
}

/* line 97, app/assets/stylesheets/bots.sass */
.bot-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* line 103, app/assets/stylesheets/bots.sass */
.bot-avatar-fallback {
  color: var(--brand-strong);
  font-size: 16px;
  font-weight: 700;
}

/* line 108, app/assets/stylesheets/bots.sass */
.bot-title-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

/* line 116, app/assets/stylesheets/bots.sass */
.bot-name {
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}

/* line 122, app/assets/stylesheets/bots.sass */
.bot-name a {
  color: var(--text-primary);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

/* line 131, app/assets/stylesheets/bots.sass */
.bot-name a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* line 138, app/assets/stylesheets/bots.sass */
.bot-name a::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

/* line 147, app/assets/stylesheets/bots.sass */
.bot-name a:focus-visible {
  outline: none;
  text-decoration: underline;
}

/* line 151, app/assets/stylesheets/bots.sass */
.bot-name a:focus-visible::after {
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* line 155, app/assets/stylesheets/bots.sass */
.bot-badges {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 2;
}

/* line 163, app/assets/stylesheets/bots.sass */
.bot-badges .bot-badge:last-child {
  background: color-mix(in srgb, var(--brand-soft) 68%, #ffffff 32%);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border-default) 76%);
  color: color-mix(in srgb, var(--brand-strong) 88%, var(--text-secondary) 12%);
}

/* line 168, app/assets/stylesheets/bots.sass */
.bot-badge {
  align-items: center;
  background: color-mix(in srgb, var(--bg-surface-muted) 85%, #ffffff 15%);
  border: 1px solid color-mix(in srgb, var(--border-default) 82%, #ffffff 18%);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: default;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  text-transform: uppercase;
}

/* line 183, app/assets/stylesheets/bots.sass */
.bot-badge.is-active {
  background: var(--success-soft);
  border-color: #98d1aa;
  color: #1d5f35;
}

/* line 188, app/assets/stylesheets/bots.sass */
.bot-badge.is-inactive {
  background: var(--warning-soft);
  border-color: #e8c27b;
  color: #7f5714;
}

/* line 193, app/assets/stylesheets/bots.sass */
.bot-badge.is-active::before,
.bot-badge.is-inactive::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex: none;
  height: 6px;
  width: 6px;
}

/* line 202, app/assets/stylesheets/bots.sass */
html[data-theme="dark"] .bot-badge.is-active {
  background: rgba(46, 160, 90, 0.18);
  border-color: rgba(126, 215, 154, 0.5);
  color: #8fe0a6;
}

/* line 207, app/assets/stylesheets/bots.sass */
html[data-theme="dark"] .bot-badge.is-inactive {
  background: rgba(220, 165, 70, 0.16);
  border-color: rgba(232, 194, 123, 0.5);
  color: #f0c987;
}

/* line 212, app/assets/stylesheets/bots.sass */
.bot-meta {
  background: color-mix(in srgb, var(--bg-surface-muted) 82%, #ffffff 18%);
  border: 1px solid color-mix(in srgb, var(--border-default) 85%, #ffffff 15%);
  border-radius: var(--radius-sm);
  align-items: baseline;
  display: grid;
  gap: 10px 14px;
  grid-template-columns: 80px minmax(0, 1fr);
  margin: 0;
  padding: 12px;
}

/* line 223, app/assets/stylesheets/bots.sass */
.bot-meta dt {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

/* line 231, app/assets/stylesheets/bots.sass */
.bot-meta dd {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  min-width: 0;
}

/* line 238, app/assets/stylesheets/bots.sass */
.bot-id-row {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* line 247, app/assets/stylesheets/bots.sass */
.bot-id-value {
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  overflow-x: auto;
  padding: 6px 10px;
  white-space: nowrap;
}

/* line 265, app/assets/stylesheets/bots.sass */
.bot-id-value[data-revealed="true"] {
  background: var(--bg-surface-muted);
  border-color: var(--border-default);
}

/* line 269, app/assets/stylesheets/bots.sass */
.btn.bot-id-toggle {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* line 278, app/assets/stylesheets/bots.sass */
.btn.bot-id-toggle,
.copy-token-button.bot-id-copy {
  box-sizing: border-box;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.2;
  min-height: 32px;
  min-width: 72px;
  padding: 6px 12px;
  text-align: center;
}

/* line 289, app/assets/stylesheets/bots.sass */
.bot-id-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* line 293, app/assets/stylesheets/bots.sass */
.bot-id-toggle:focus,
.bot-id-copy:focus,
.bot-actions .btn:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 299, app/assets/stylesheets/bots.sass */
.bot-actions {
  border-top: 1px solid color-mix(in srgb, var(--border-default) 84%, var(--brand) 16%);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  position: relative;
  z-index: 2;
}

/* line 310, app/assets/stylesheets/bots.sass */
.bot-actions .btn {
  border-radius: 999px;
  font-weight: 700;
  min-width: 88px;
  margin-bottom: 0;
}

/* line 316, app/assets/stylesheets/bots.sass */
.bot-action-secondary {
  background: color-mix(in srgb, var(--bg-elevated) 88%, #ffffff 12%);
  border: 1px solid color-mix(in srgb, var(--border-default) 84%, var(--brand) 16%);
  color: var(--text-secondary);
}

/* line 321, app/assets/stylesheets/bots.sass */
.bot-action-secondary:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* line 325, app/assets/stylesheets/bots.sass */
.bot-action-primary {
  border-color: color-mix(in srgb, var(--brand-strong) 76%, #ffffff 24%);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.22);
}

/* line 329, app/assets/stylesheets/bots.sass */
.bot-action-primary:hover {
  transform: translateY(-1px);
}

/* line 332, app/assets/stylesheets/bots.sass */
.bot-action-danger {
  box-shadow: 0 5px 14px rgba(180, 58, 71, 0.18);
}

/* line 335, app/assets/stylesheets/bots.sass */
html[data-theme="dark"] .bot-action-secondary {
  background: color-mix(in srgb, var(--bg-elevated) 80%, #ffffff 20%);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

@media (max-width: 900px) {
  /* line 341, app/assets/stylesheets/bots.sass */
  .bots-stage {
    padding: 12px;
  }
  /* line 344, app/assets/stylesheets/bots.sass */
  .bot-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  /* line 348, app/assets/stylesheets/bots.sass */
  .bot-meta dt {
    margin-top: 6px;
  }
  /* line 351, app/assets/stylesheets/bots.sass */
  .bot-id-value {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  /* line 355, app/assets/stylesheets/bots.sass */
  .bot-card {
    max-width: 100%;
    padding: 14px;
  }
  /* line 359, app/assets/stylesheets/bots.sass */
  .bot-name {
    font-size: 18px;
  }
  /* line 362, app/assets/stylesheets/bots.sass */
  .bot-card-header {
    align-items: flex-start;
  }
  /* line 365, app/assets/stylesheets/bots.sass */
  .bot-avatar {
    flex-basis: 42px;
    height: 42px;
    width: 42px;
  }
}

/* line 374, app/assets/stylesheets/bots.sass */
.bot-form {
  max-width: 800px;
  margin: 0 auto;
}

/* line 380, app/assets/stylesheets/bots.sass */
.bots.new #page,
.bots.edit #page {
  margin: 0 auto;
  max-width: 848px;
}

/* line 385, app/assets/stylesheets/bots.sass */
.form-notice {
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.08) 0%, rgba(0, 102, 255, 0) 100%);
  border: 1px solid color-mix(in srgb, var(--border-default) 84%, var(--brand) 16%);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  padding: 14px 16px;
}

/* line 392, app/assets/stylesheets/bots.sass */
.form-notice-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

/* line 397, app/assets/stylesheets/bots.sass */
.form-notice-text strong {
  color: var(--text-primary);
}

/* line 400, app/assets/stylesheets/bots.sass */
.form-notice-text em {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 600;
}

/* line 405, app/assets/stylesheets/bots.sass */
.form-section {
  border-top: 1px solid var(--border-default);
  margin-top: 24px;
  padding-top: 22px;
}

/* line 410, app/assets/stylesheets/bots.sass */
.form-section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* line 415, app/assets/stylesheets/bots.sass */
.form-section.is-hidden {
  display: none;
}

/* line 418, app/assets/stylesheets/bots.sass */
.form-section-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
}

/* line 425, app/assets/stylesheets/bots.sass */
.form-section-help {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 16px;
}

/* line 430, app/assets/stylesheets/bots.sass */
.form-mode-toggle {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 12px;
}

/* line 436, app/assets/stylesheets/bots.sass */
.form-mode-option {
  align-items: stretch;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* line 448, app/assets/stylesheets/bots.sass */
.form-mode-option input {
  appearance: none;
  margin: 0;
  position: absolute;
  opacity: 0;
}

/* line 454, app/assets/stylesheets/bots.sass */
.form-mode-option:hover {
  border-color: color-mix(in srgb, var(--border-default) 72%, var(--brand) 28%);
}

/* line 457, app/assets/stylesheets/bots.sass */
.form-mode-option.is-active {
  background: linear-gradient(145deg, rgba(0, 102, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(0, 102, 255, 0.18);
}

/* line 462, app/assets/stylesheets/bots.sass */
.form-mode-label {
  color: var(--text-primary);
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

/* line 469, app/assets/stylesheets/bots.sass */
.form-mode-desc {
  color: var(--text-muted);
  display: block;
  font-size: 13px;
}

/* line 474, app/assets/stylesheets/bots.sass */
.form-field {
  display: block;
  margin-bottom: 20px;
}

/* line 478, app/assets/stylesheets/bots.sass */
.form-field:last-child {
  margin-bottom: 0;
}

/* line 481, app/assets/stylesheets/bots.sass */
.form-label {
  align-items: baseline;
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 14px;
  gap: 8px;
  margin-bottom: 6px;
}

/* line 491, app/assets/stylesheets/bots.sass */
.form-required {
  color: var(--danger);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/* line 498, app/assets/stylesheets/bots.sass */
.form-optional {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 1px 8px;
  text-transform: uppercase;
}

/* line 510, app/assets/stylesheets/bots.sass */
.form-helper {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: normal;
}

/* line 517, app/assets/stylesheets/bots.sass */
.form-input {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* line 528, app/assets/stylesheets/bots.sass */
.form-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
  outline: none;
}

/* line 533, app/assets/stylesheets/bots.sass */
.form-input::placeholder {
  color: var(--text-muted);
}

/* line 536, app/assets/stylesheets/bots.sass */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 40px 10px 12px;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
}

/* line 557, app/assets/stylesheets/bots.sass */
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239AA4B2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* line 560, app/assets/stylesheets/bots.sass */
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
  outline: none;
}

/* line 565, app/assets/stylesheets/bots.sass */
.form-avatar-preview {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: block;
  margin-top: 8px;
  object-fit: cover;
}

/* line 572, app/assets/stylesheets/bots.sass */
.bot-form .form-actions {
  align-items: center;
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
}

/* line 582, app/assets/stylesheets/bots.sass */
.bot-form .form-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

/* line 588, app/assets/stylesheets/bots.sass */
.bot-form .form-actions .btn {
  min-width: 120px;
}

/* line 591, app/assets/stylesheets/bots.sass */
.btn-lg {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
}

@media (max-width: 900px) {
  /* line 603, app/assets/stylesheets/bots.sass */
  .bot-form {
    max-width: 100%;
  }
  /* line 606, app/assets/stylesheets/bots.sass */
  .form-mode-toggle {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  /* line 611, app/assets/stylesheets/bots.sass */
  .form-section {
    margin-top: 20px;
    padding-top: 20px;
  }
  /* line 615, app/assets/stylesheets/bots.sass */
  .form-section-title {
    font-size: 16px;
  }
  /* line 618, app/assets/stylesheets/bots.sass */
  .form-mode-toggle {
    grid-template-columns: 1fr;
  }
  /* line 621, app/assets/stylesheets/bots.sass */
  .form-actions {
    flex-direction: column;
  }
  /* line 624, app/assets/stylesheets/bots.sass */
  .bot-form .form-actions-buttons {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
  }
  /* line 629, app/assets/stylesheets/bots.sass */
  .btn-lg {
    width: 100%;
  }
}

/* line 636, app/assets/stylesheets/bots.sass */
.detail-topbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* line 644, app/assets/stylesheets/bots.sass */
.detail-back-link {
  align-items: center;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  text-decoration: none;
}

/* line 653, app/assets/stylesheets/bots.sass */
.detail-back-link:hover {
  color: var(--text-primary);
}

/* line 656, app/assets/stylesheets/bots.sass */
.detail-back-icon {
  font-size: 16px;
  line-height: 1;
}

/* line 660, app/assets/stylesheets/bots.sass */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* line 665, app/assets/stylesheets/bots.sass */
.detail-actions .btn {
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 0;
  min-width: 88px;
}

/* line 671, app/assets/stylesheets/bots.sass */
.detail-actions .btn:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 675, app/assets/stylesheets/bots.sass */
.detail-list__value a {
  color: var(--brand-strong);
  word-break: break-all;
}

/* line 679, app/assets/stylesheets/bots.sass */
.detail-list__value--empty {
  color: var(--text-muted);
  font-style: italic;
}

/* line 683, app/assets/stylesheets/bots.sass */
.bot-test {
  margin-top: 28px;
}

/* line 686, app/assets/stylesheets/bots.sass */
.bot-test-title {
  font-size: 20px;
  margin: 0 0 6px;
}

/* line 690, app/assets/stylesheets/bots.sass */
.bot-test-lead {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 16px;
}

/* line 695, app/assets/stylesheets/bots.sass */
.bot-test-form {
  max-width: 640px;
}

/* line 698, app/assets/stylesheets/bots.sass */
.bot-test-form .form-field {
  margin-bottom: 12px;
}

/* line 701, app/assets/stylesheets/bots.sass */
.bot-test-form textarea {
  margin-bottom: 0;
}

/* line 704, app/assets/stylesheets/bots.sass */
.bot-test-cli {
  margin-top: 24px;
}

/* line 707, app/assets/stylesheets/bots.sass */
.bot-test-cli-title {
  font-size: 15px;
  margin: 0 0 4px;
}

/* line 711, app/assets/stylesheets/bots.sass */
.bot-test-cli-lead {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 10px;
}

/* line 716, app/assets/stylesheets/bots.sass */
.code-block {
  position: relative;
}

/* line 719, app/assets/stylesheets/bots.sass */
.code-block-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* line 725, app/assets/stylesheets/bots.sass */
.code-block-reveal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  line-height: 1.2;
  padding: 6px 10px;
}

/* line 733, app/assets/stylesheets/bots.sass */
.code-block-reveal:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* line 737, app/assets/stylesheets/bots.sass */
.code-block-reveal:focus,
.code-block-copy:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 742, app/assets/stylesheets/bots.sass */
.bot-id-value--inline {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border: none;
  border-radius: 4px;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  max-width: none;
  min-height: 0;
  padding: 1px 5px;
  white-space: normal;
}

/* line 754, app/assets/stylesheets/bots.sass */
.code-block pre {
  margin: 0;
}
/*
 * Owned layout primitives — replaces the vendored Bootstrap 2/3 grid that was
 * removed for security (Bootstrap 3.3.7 JS carried published XSS CVEs and was
 * dead weight). Only the classes still referenced in the portal markup are
 * implemented here; every component (.btn, .alert, .table, .well, .nav-list,
 * navbar, dropdown) is already styled with design tokens in the redesign CSS,
 * so this file deliberately stays small.
 */

/* Page width wrapper. Mirrors Bootstrap 2's responsive .container widths so
   the overall page width does not shift after the upgrade. */
.container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
  width: 100%;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .container {
    max-width: 724px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Flex grid. The two-column layouts (content + sidebar) and full-width rows
   used across docs, bots, and tutorials map cleanly onto flexbox. */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.row > [class*="span"] {
  box-sizing: border-box;
  min-width: 0;
}

.span12 {
  flex: 1 1 100%;
}

.span9 {
  flex: 1 1 0%;
  min-width: 0;
}

.span4 {
  flex: 1 1 300px;
}

.span3 {
  flex: 0 0 240px;
}

@media (max-width: 767px) {
  .span3,
  .span4,
  .span9,
  .span12 {
    flex: 1 1 100%;
  }
}

/* Button variants Bootstrap previously supplied; base .btn lives in the
   tokenized application.css. */
.btn-large {
  font-size: 16px;
  padding: 11px 19px;
}

.btn-secondary {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* List reset previously inherited from Bootstrap's base .nav. */
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hide {
  display: none;
}

.row::after,
.navbar-inner::after,
.navbar .navbar-inner .container::after {
  clear: both;
  content: "";
  display: table;
}

/* button_to wraps its control in a <form>; display: contents lets that button
   participate directly in the surrounding flex/inline layout exactly as the
   old <a> link did, so action rows keep their spacing. */
.bot-action-form,
.account-logout-form {
  display: contents;
}

.inline-form {
  display: inline;
  margin: 0;
}
/*
 * Mona Sans heading font. ERB-processed so `asset_path` emits the DIGESTED URL
 * (e.g. /assets/groupme/Mona-Sans-<digest>.woff2). This must match the
 * `<link rel="preload">` in layouts/application.haml (which also uses
 * asset_path); a hardcoded non-digested url() would (a) 404 under
 * `config.assets.compile = false` and (b) never match the preload, triggering
 * the "preloaded but not used" console warning.
 *
 * Auto-included into application.css via `*= require_directory './'`.
 */
@font-face {
  font-family: "Mona Sans";
  src: url(/assets/groupme/Mona-Sans-008159de0bd173a28a35ecfeb56a0434a48bc960b7a80190ebe45c5d129e53ce.woff2) format("woff2 supports variations"),
    url(/assets/groupme/Mona-Sans-008159de0bd173a28a35ecfeb56a0434a48bc960b7a80190ebe45c5d129e53ce.woff2) format("woff2-variations");
  font-display: swap;
  font-stretch: 75% 125%;
  font-weight: 200 900;
}
/* line 2, app/assets/stylesheets/terms.sass */
body.terms #page {
  max-width: 980px;
  margin: 0 auto;
}

/* line 7, app/assets/stylesheets/terms.sass */
body.terms.brand_standards .container {
  max-width: 1080px;
  width: auto;
}

/* line 11, app/assets/stylesheets/terms.sass */
body.terms.brand_standards #page img {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: block;
  margin: 0 0 18px;
  width: 100%;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *







*/
:root {
  --font-body: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-headings: "Mona Sans", "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 8px 24px rgba(10, 32, 58, 0.08);
  --focus-ring: 0 0 0 3px rgba(18, 113, 255, 0.32);

  --bg-canvas: #eef4fb;
  --bg-canvas-accent: #e4eef9;
  --bg-surface: #ffffff;
  --bg-surface-muted: #f5f9ff;
  --bg-elevated: #ffffff;
  --bg-code: #f4f8fd;
  --bg-code-header: #e7eef8;

  --text-primary: #1d2b3d;
  --text-secondary: #3f536b;
  --text-muted: #61748a;
  --text-on-brand: #ffffff;

  --border-default: #cedaea;
  --border-strong: #abc1dc;
  --border-code: #cfdeef;

  --brand: #0066ff;
  --brand-strong: #0052cc;
  --brand-soft: #e6f0ff;
  --brand-gradient: linear-gradient(315.5deg, #3c16d3 18.33%, #1271ff 58.05%, #2cf2ff 107.1%);
  --success-soft: #e7f7ec;
  --warning-soft: #fff7e8;
  --danger-soft: #ffe9ea;
  --danger: #b43a47;
}

html[data-theme="dark"] {
  --bg-canvas: #0f1928;
  --bg-canvas-accent: #132135;
  --bg-surface: #18263a;
  --bg-surface-muted: #1d3048;
  --bg-elevated: #213550;
  --bg-code: #132235;
  --bg-code-header: #223650;

  --text-primary: #e5edf7;
  --text-secondary: #c3d0de;
  --text-muted: #a7b8ca;
  --text-on-brand: #f6f8fb;

  --border-default: #334a65;
  --border-strong: #496584;
  --border-code: #355170;

  --brand: #3385ff;
  --brand-strong: #5ba0ff;
  --brand-soft: #16294d;
  --success-soft: #1f4530;
  --warning-soft: #4a3a1b;
  --danger-soft: #4a2126;
  --danger: #ff7f89;
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.36);
  --focus-ring: 0 0 0 3px rgba(51, 133, 255, 0.45);
}

/* No-JS fallback: honor the OS preference when no explicit theme is chosen. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-canvas: #0f1928;
    --bg-canvas-accent: #132135;
    --bg-surface: #18263a;
    --bg-surface-muted: #1d3048;
    --bg-elevated: #213550;
    --bg-code: #132235;
    --bg-code-header: #223650;

    --text-primary: #e5edf7;
    --text-secondary: #c3d0de;
    --text-muted: #a7b8ca;
    --text-on-brand: #f6f8fb;

    --border-default: #334a65;
    --border-strong: #496584;
    --border-code: #355170;

    --brand: #3385ff;
    --brand-strong: #5ba0ff;
    --brand-soft: #16294d;
    --success-soft: #1f4530;
    --warning-soft: #4a3a1b;
    --danger-soft: #4a2126;
    --danger: #ff7f89;
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.36);
    --focus-ring: 0 0 0 3px rgba(51, 133, 255, 0.45);
  }
}

html,
body {
  background: linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-canvas-accent) 100%);
  background-attachment: fixed;
  /* Solid fallback color so the mobile overscroll/rubber-band area (which is
     painted with the root element's background-color, not the fixed gradient)
     matches the page instead of showing the browser's default white sliver. */
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
}

body {
  padding-bottom: var(--space-6);
}

h1,
h2,
h3,
h4 {
  color: var(--text-primary);
  font-family: var(--font-headings);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  border-bottom: 1px solid var(--border-default);
  font-size: 27px;
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-2);
}

h3 {
  font-size: 22px;
  margin-top: var(--space-5);
}

h4 {
  font-size: 18px;
  margin-top: var(--space-5);
}

p,
li,
dt,
dd,
label,
input,
textarea,
select,
button {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

a {
  color: var(--brand);
  text-decoration: none;
  text-decoration-color: rgba(0, 102, 255, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-strong);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
.nav a:focus,
.dropdown-menu a:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.skip-link {
  background: var(--brand-strong);
  border-radius: var(--radius-sm);
  color: var(--text-on-brand);
  left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  position: absolute;
  top: -200px;
  z-index: 1000;
}

.skip-link:focus {
  top: var(--space-3);
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.shell-main-header {
  margin-top: var(--space-2);
  position: sticky;
  top: var(--space-2);
  z-index: 900;
}

.shell-main {
  margin-top: var(--space-5);
}

#page {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
}

#page a.btn,
#page ul.nav a {
  text-decoration: none;
}

section {
  padding-top: var(--space-5);
}

section:first-child {
  padding-top: 0;
}

section > h2:first-child,
section > h3:first-child {
  margin-top: 0;
}

.section-header {
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 24px;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
}

.section_body {
  margin-top: var(--space-3);
  padding-left: var(--space-4);
}

.section_footer {
  margin-top: var(--space-4);
}

.well {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  margin: 0;
  padding: var(--space-4);
}

.doc-card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-4);
}

/* Data tables: token-based override for legacy Bootstrap .table markup. */
.table {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  overflow: hidden;
  width: 100%;
}

.table th,
.table td {
  border-top: 1px solid var(--border-default);
  font-size: 14px;
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--bg-surface-muted);
  border-top: 0;
  border-bottom: 2px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.table tbody tr:first-child td,
.table > tr:first-child td {
  border-top: 0;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background: var(--bg-surface-muted);
}

.table-striped tbody tr:nth-child(even) td,
.table-striped tbody tr:nth-child(even) th {
  background: var(--bg-surface);
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background: var(--brand-soft);
}

/* Detail list: tokenized key/value card replacing legacy show-page tables. */
.detail-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  margin: 0 0 var(--space-5);
  overflow: hidden;
  position: relative;
}

.detail-list::before {
  background: var(--brand-gradient);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.detail-list__head {
  align-items: center;
  background: linear-gradient(145deg, rgba(0, 102, 255, 0.06) 0%, rgba(0, 102, 255, 0) 62%);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
}

.detail-list__avatar {
  align-items: center;
  background: linear-gradient(160deg, var(--bg-surface-muted) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.detail-list__avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.detail-list__avatar-fallback {
  color: var(--brand-strong);
  font-size: 16px;
  font-weight: 700;
}

.detail-list__heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.detail-list__title {
  color: var(--text-primary);
  font-family: var(--font-headings);
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-list__subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.detail-list__status {
  align-items: center;
  border-radius: 6px;
  cursor: default;
  display: inline-flex;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.detail-list__status::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex: none;
  height: 6px;
  width: 6px;
}

.detail-list__status.is-active {
  background: var(--success-soft);
  border: 1px solid #98d1aa;
  color: #1d5f35;
}

.detail-list__status.is-inactive {
  background: var(--warning-soft);
  border: 1px solid #e8c27b;
  color: #7f5714;
}

html[data-theme="dark"] .detail-list__status.is-active {
  background: rgba(46, 160, 90, 0.18);
  border-color: rgba(126, 215, 154, 0.5);
  color: #8fe0a6;
}

html[data-theme="dark"] .detail-list__status.is-inactive {
  background: rgba(220, 165, 70, 0.16);
  border-color: rgba(232, 194, 123, 0.5);
  color: #f0c987;
}

.detail-list__row {
  border-top: 1px solid var(--border-default);
  display: grid;
  gap: var(--space-1) var(--space-4);
  grid-template-columns: minmax(140px, 220px) 1fr;
  padding: var(--space-3) var(--space-4);
}

.detail-list__row:first-child {
  border-top: 0;
}

.detail-list__label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.detail-list__value {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.detail-list__value code {
  word-break: break-all;
}

@media (max-width: 560px) {
  .detail-list__row {
    gap: var(--space-1);
    grid-template-columns: 1fr;
  }
}

pre,
code {
  font-family: Consolas, "Courier New", monospace;
}

pre {
  background-color: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  padding: var(--space-3);
}

code {
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 1px 6px;
}

pre code {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}

pre.header {
  background: var(--bg-code-header);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-primary);
  font-weight: 600;
  margin: 0;
}

pre.body {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-top: 1px solid var(--border-code);
}

.code-block-wrap {
  margin-bottom: var(--space-4);
  position: relative;
}

.copy-code-button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 8px;
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
}

.copy-code-button:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.token-copy-row {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  min-width: 0;
}

.token-value {
  align-items: center;
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  color: var(--text-primary);
  display: inline-flex;
  flex: 0 1 auto;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  overflow-x: auto;
  padding: 6px 10px;
  white-space: nowrap;
}

.token-copy-row .copy-token-button,
.token-copy-row .token-reveal-button {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  line-height: 1.2;
  min-height: 32px;
  min-width: 72px;
}

.copy-token-button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  min-width: 64px;
  padding: 6px 12px;
  text-align: center;
}

.copy-token-button:hover,
.copy-token-button:focus,
.copy-token-button:active {
  background: var(--bg-elevated);
  background-image: none;
  border-color: var(--border-strong);
  box-shadow: none;
  color: var(--text-primary);
}

/* Access token modal --------------------------------------------------- */
#tokenModal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 32, 58, 0.28);
  overflow: hidden;
}

#tokenModal::before {
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 50%, #2cf2ff 50%) 55%, rgba(0, 102, 255, 0) 100%);
  content: "";
  display: block;
  height: 4px;
}

#tokenModal .modal-header {
  background: transparent;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.token-modal-heading {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.token-modal-icon {
  align-items: center;
  background: var(--brand-soft);
  border-radius: 50%;
  color: var(--brand-strong);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

#tokenModal .modal-header h3 {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

#tokenModal .close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  opacity: 1;
  position: absolute;
  right: var(--space-3);
  text-shadow: none;
  top: var(--space-3);
  width: 28px;
  z-index: 1;
}

#tokenModal .close:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

#tokenModal .modal-body {
  background: var(--bg-surface);
  padding: var(--space-4);
}

.token-modal-lead {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 var(--space-3);
}

.token-value[data-revealed="false"] {
  color: var(--text-muted);
  letter-spacing: 0.18em;
}

.token-reveal-button {
  background: var(--bg-elevated);
  background-image: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  min-width: 64px;
  padding: 6px 12px;
  text-align: center;
  text-shadow: none;
}

/* Cover Bootstrap's .btn :active/:focus/.active gradient + inset shadow, which
   otherwise sticks as a washed-out state after a tap on touch devices. */
.token-reveal-button:hover,
.token-reveal-button:focus,
.token-reveal-button:active,
.token-reveal-button.active {
  background: var(--bg-elevated);
  background-image: none;
  border-color: var(--border-strong);
  box-shadow: none;
  color: var(--text-primary);
}

.token-warning {
  align-items: flex-start;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border-default) 68%);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
}

.token-warning-icon {
  color: var(--danger);
  flex: 0 0 auto;
  line-height: 0;
  margin-top: 1px;
}

.token-warning-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.token-warning-text strong {
  color: var(--danger);
}

/* Styled confirmation dialog (replaces window.confirm) ----------------- */
.gm-confirm-overlay {
  align-items: center;
  background: rgba(10, 22, 41, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-4);
  position: fixed;
  z-index: 1100;
}

.gm-confirm-overlay[hidden] {
  display: none;
}

.gm-confirm {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 32, 58, 0.28);
  box-sizing: border-box;
  max-width: 420px;
  overflow: hidden;
  padding: var(--space-5) var(--space-5) var(--space-4);
  width: 100%;
}

.gm-confirm__icon {
  align-items: center;
  background: var(--danger-soft);
  border-radius: 50%;
  color: var(--danger);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: var(--space-3);
  width: 44px;
}

.gm-confirm__title {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

.gm-confirm__body {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: var(--space-2) 0 0;
}

.gm-confirm__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.gm-confirm__actions .btn {
  align-items: center;
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 38px;
  min-width: 104px;
  padding: 8px 16px;
}

.gm-confirm__cancel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.gm-confirm__cancel:hover,
.gm-confirm__cancel:focus {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

@media (max-width: 520px) {
  .gm-confirm__actions {
    flex-direction: column-reverse;
  }

  .gm-confirm__actions .btn {
    width: 100%;
  }
}


dl {
  margin-left: var(--space-4);
}

dl dt small,
dl dd small {
  color: var(--text-muted);
  font-style: italic;
  font-weight: normal;
}

dl dd {
  margin-bottom: var(--space-3);
}

.required {
  color: var(--danger);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  margin-left: var(--space-1);
  vertical-align: middle;
}

.param-required {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: color-mix(in srgb, var(--danger) 62%, var(--text-muted) 38%);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-left: var(--space-2);
  padding: 3px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.center {
  text-align: center;
}

.sidebar,
.sidebar-description,
.sidebar-nav {
  color: var(--text-secondary);
}

/* Flex row lets the sidebar column stretch to the full content height so
   position: sticky has room to pin the nav across the entire page scroll. */
.docs-layout {
  align-items: stretch;
  display: flex;
}

.docs-layout > .span9 {
  min-width: 0;
}

.sidebar-nav {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: var(--space-3);
  position: sticky;
  top: var(--space-4);
}

.sidebar-nav .nav-list {
  margin: 0;
  padding: 0;
}

.sidebar-nav .nav-list > li > a,
.sidebar-nav .nav-header {
  margin-left: 0;
  margin-right: 0;
  text-shadow: none;
}

.sidebar-nav .nav-header {
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.sidebar-nav .nav-header:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.sidebar-nav .nav-header > a {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-nav .nav-header > a:hover {
  color: var(--brand-strong);
}

.sidebar-nav .nav-list > li > a {
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  display: block;
  font-size: 13px;
  margin-bottom: var(--space-1);
  padding: 5px 8px;
  text-shadow: none;
}

.sidebar-nav .nav-list > li > a:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.sidebar-nav .nav-list > li > a.is-active {
  background: var(--brand-soft);
  border-left-color: var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--brand-strong);
  font-weight: 600;
}

/* "On this page" disclosure toggle — hidden on desktop, shown on mobile where
   the table of contents collapses above the content. */
.sidebar-toc-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  display: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  justify-content: space-between;
  padding: var(--space-2) var(--space-1);
  width: 100%;
}

.sidebar-toc-toggle-chevron {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: inline-block;
  height: 8px;
  margin-right: var(--space-1);
  transform: rotate(45deg);
  transition: transform 160ms ease;
  width: 8px;
}

.sidebar-nav.is-open .sidebar-toc-toggle-chevron {
  transform: rotate(225deg);
}

.docs-intro-lead {
  color: var(--text-secondary);
  font-size: 17px;
  max-width: 70ch;
}

.docs-callout {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 70ch;
  padding: var(--space-4);
}

.docs-callout p {
  margin: 0;
}

.docs-callout__link {
  align-self: flex-start;
  font-weight: 600;
}

.endpoint {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
  padding: var(--space-4);
}

.endpoint h3 {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.endpoint h3 i {
  color: var(--brand);
  vertical-align: middle;
}

.endpoint .section_body {
  padding-left: 0;
}

/* Base button reset. Bootstrap previously supplied the box model (display,
   alignment, border, line-height, cursor); it was removed with the vendored
   bundle, so the essentials live here. Background/colour are intentionally left
   to the variant/component rules so this base never clobbers them. */
.btn {
  align-items: center;
  background-image: none;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: 600;
  justify-content: center;
  line-height: 1.4;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

.btn:disabled,
.btn[disabled] {
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.55;
}

.btn-primary {
  background: linear-gradient(180deg, #1b82d7 0%, #0e69b4 100%);
  border: 1px solid #0d64ab;
  color: #ffffff;
}

.btn-warning {
  background: linear-gradient(180deg, #ffd36f 0%, #f5ba37 100%);
  border: 1px solid #e7a91f;
  color: #3e3012;
}

.btn-danger {
  background: linear-gradient(180deg, #d86470 0%, #bb4451 100%);
  border: 1px solid #a73843;
  color: #ffffff;
}

.btn.btn-link {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--brand);
  padding-left: 0;
  padding-right: 0;
}

.form-actions {
  background: transparent;
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-5);
  padding-left: 0;
  padding-right: 0;
}

label {
  color: var(--text-primary);
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  margin-top: var(--space-1);
  min-height: 38px;
  padding: 8px 12px;
  width: 100%;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.help-block {
  color: var(--text-muted);
  font-size: 13px;
  margin: -6px 0 var(--space-3);
}

.alert {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  text-shadow: none;
}

.alert .close {
  color: var(--text-muted);
  float: right;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin-left: var(--space-3);
  opacity: 0.75;
  position: static;
  right: auto;
  text-shadow: none;
  top: auto;
}

.alert .close:hover {
  color: var(--text-primary);
  opacity: 1;
}

.alert-success {
  background: var(--success-soft);
  border-left-color: #2f9e5f;
  color: var(--text-primary);
}

.alert-error {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: var(--text-primary);
}

.alert-error ul {
  margin-bottom: 0;
}

span.alert {
  display: inline-block;
  margin-bottom: 6px;
}

/* Toasts: transient flash messages that overlay content (top-right stack). */
.toast-container {
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  left: auto;
  max-width: calc(100vw - 2 * var(--space-4));
  pointer-events: none;
  position: fixed;
  right: var(--space-4);
  top: var(--space-4);
  width: 360px;
  z-index: 1100;
}

.toast {
  align-items: flex-start;
  animation: toast-in 0.28s cubic-bezier(0.21, 1.02, 0.73, 1) both;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 36px rgba(10, 32, 58, 0.24);
  color: var(--text-primary);
  display: flex;
  font-size: 14px;
  gap: var(--space-3);
  line-height: 1.5;
  overflow: hidden;
  padding: var(--space-3) var(--space-4);
  pointer-events: auto;
  position: relative;
}

.toast.is-hiding {
  animation: toast-out 0.22s ease forwards;
}

.toast-icon {
  align-items: center;
  background: var(--brand);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 20px;
}

.toast-icon::before {
  content: "i";
}

.toast-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-content ul {
  margin: 0;
  padding-left: var(--space-4);
}

.toast-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  margin: -2px -4px 0 0;
  padding: 0;
}

.toast-close:hover {
  color: var(--text-primary);
}

.toast-progress {
  background: var(--brand);
  bottom: 0;
  height: 3px;
  left: 0;
  opacity: 0.55;
  position: absolute;
  transform: scaleX(1);
  transform-origin: left center;
  width: 100%;
}

.toast.alert-success {
  border-left-color: #2f9e5f;
}

.toast.alert-success .toast-icon,
.toast.alert-success .toast-progress {
  background: #2f9e5f;
}

.toast.alert-success .toast-icon::before {
  content: "\2713";
}

.toast.alert-error {
  border-left-color: var(--danger);
}

.toast.alert-error .toast-icon,
.toast.alert-error .toast-progress {
  background: var(--danger);
}

.toast.alert-error .toast-icon::before {
  content: "!";
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(14px);
  }
}

@media (max-width: 640px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
  }
}

.recaptcha-field {
  margin: var(--space-4) 0 var(--space-5);
}

.recaptcha-field .g-recaptcha {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  display: inline-block;
  padding: 3px;
  transition: border-color 0.2s ease;
}

.recaptcha-field.is-invalid .g-recaptcha {
  border-color: var(--danger);
}

.auth-page {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  max-width: 480px;
  overflow: hidden;
  padding: var(--space-6) var(--space-6) var(--space-5);
  position: relative;
  width: 100%;
}

.auth-card::before {
  background: var(--brand-gradient);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.auth-card__header {
  margin-bottom: var(--space-5);
  text-align: center;
}

.logo-mark {
  display: inline-block;
  fill: currentColor;
  flex: none;
}

.auth-card__badge {
  align-items: center;
  background: var(--brand-gradient);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(18, 113, 255, 0.35);
  color: #fff;
  display: inline-flex;
  height: 64px;
  justify-content: center;
  line-height: 1;
  margin-bottom: var(--space-4);
  width: 64px;
}

.auth-card__badge .logo-mark {
  height: 34px;
  width: 34px;
}

.auth-card__title {
  margin: 0 0 var(--space-2);
}

.auth-card__subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0 auto;
  max-width: 36ch;
}

.auth-form {
  margin: 0 auto;
  max-width: 400px;
}

.auth-card .auth-form {
  margin: 0;
  max-width: none;
}

.auth-form .form-field {
  margin-bottom: var(--space-4);
}

.auth-form .help-block {
  margin: var(--space-2) 0 0;
}

.auth-form .recaptcha-field {
  display: flex;
  justify-content: center;
  margin: var(--space-4) 0 0;
}

.auth-form .form-actions {
  border-top: 0;
  margin-top: var(--space-5);
}

.auth-form .btn-primary {
  width: 100%;
}

.auth-card__footer {
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  text-align: center;
}

.auth-resend-label {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 var(--space-3);
}

.auth-resend-form,
.auth-secondary-form {
  margin: 0;
}

.auth-resend-btn {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--brand);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-width: 200px;
  overflow: hidden;
  padding: 10px 18px;
  position: relative;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.auth-resend-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-strong);
}

.auth-resend-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.auth-resend-btn.is-cooldown {
  background: var(--bg-surface-muted);
  border-color: var(--border-default);
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

.auth-resend-btn__fill {
  background: var(--brand);
  bottom: 0;
  height: 3px;
  left: 0;
  position: absolute;
  width: 0;
  z-index: 0;
}

.auth-resend-btn__label {
  position: relative;
  z-index: 1;
}

.auth-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: var(--space-3) 0;
}

.auth-secondary-action {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.auth-secondary-action:hover {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}

.auth-secondary-action:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Progressive enhancement: the segmented 4-box OTP UI is hidden until
   portal_ui.js initializes and adds .otp-enhanced to the form. Until then
   — including when JS is disabled or fails to load — the single PIN field
   stays visible and is the submitted control, so the code is never lost. */
.form-field--otp {
  display: none;
  text-align: center;
}

.otp-enhanced .form-field--otp {
  display: block;
}

.otp-enhanced .form-field--pin-fallback {
  display: none;
}

.otp-input {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.otp-input .otp-digit {
  -moz-appearance: textfield;
  appearance: textfield;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 600;
  height: 56px;
  margin: 0;
  min-height: 0;
  /* Flex so the boxes share the available width and never overflow the card,
     regardless of code length (4, 6, 8…). Cap width so short codes still look
     like discrete boxes rather than stretching full-width. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 52px;
  padding: 0;
  text-align: center;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.otp-input .otp-digit::-webkit-outer-spin-button,
.otp-input .otp-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-input .otp-digit:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

.otp-input.is-invalid .otp-digit {
  border-color: var(--danger);
}

.form-field--pin-variable input {
  letter-spacing: 0.4em;
  text-align: center;
}

.form-field--pin-variable input.is-invalid {
  border-color: var(--danger);
}

footer {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--text-secondary);
  font-size: 14px;
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  display: inline-flex;
}

footer p {
  font-size: 13px;
  margin-top: var(--space-3);
}

input.inline {
  display: inline;
}

.theme-toggle {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.theme-toggle select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23808a99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 12px;
  margin-bottom: 0;
  max-width: 140px;
  min-height: 30px;
  padding: 4px 30px 4px 10px;
}

.cc-banner {
  display: none;
}

/* Wraps wide data tables so they scroll horizontally on small screens instead
   of forcing the whole page wider. Applied to content tables via JS. */
.table-scroll {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow-x: auto;
}

/* Only surfaced inside the mobile nav drawer (see the 979px breakpoint). */
.nav-drawer-theme {
  display: none;
}

@media (max-width: 640px) {
  h1,
  .auth-card__title {
    font-size: 26px;
  }

  h2 {
    font-size: 21px;
  }

  h3 {
    font-size: 17px;
  }

  #page {
    padding: var(--space-3);
  }

  /* Comfortable tap targets for primary controls. */
  .btn,
  .account-trigger,
  .theme-trigger,
  .btn-navbar,
  .copy-token-button {
    min-height: 44px;
  }

  /* Flex centering lets the taller tap target vertically center its label and
     keeps full-width buttons from spilling past their container. */
  .btn,
  .copy-token-button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  /* Full-width primary actions read better on a phone. */
  .entity-list-header .btn,
  .form-actions .btn {
    width: 100%;
  }

  .entity-list-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Give the stacked sidebar column (Get Started / Related Content) clear
     separation from the content card above it once it wraps below. */
  .span3.sidebar {
    border-top: 1px solid var(--border-default);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}

/* Desktop (>=980px): keep the header on a single row — brand on the left, the
   primary nav links next to it, and the account/theme controls pinned to the
   right. */
@media (min-width: 980px) {
  .navbar .navbar-inner .container {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
  }

  /* The float-clearfix pseudo would otherwise become a stray flex item. */
  .navbar .navbar-inner .container::after {
    display: none;
  }

  .navbar .brand {
    flex: 0 0 auto;
    order: 0;
  }

  #primary-nav.nav-collapse {
    flex: 1 1 auto;
    margin-left: var(--space-2);
    min-width: 0;
    order: 1;
  }

  /* Lay the links out inline so the collapsible wrapper keeps its height
     (the inner links float left in the legacy/mobile rules). */
  #primary-nav .nav {
    align-items: center;
    display: flex;
  }

  #primary-nav .nav a {
    float: none;
  }

  .navbar .nav.account-bar {
    flex: 0 0 auto;
    margin: 0;
    order: 2;
  }
}

@media (max-width: 979px) {
  .shell-main {
    margin-top: var(--space-4);
  }

  #page {
    padding: var(--space-4);
  }

  /* Docs: stack into a single column and lift the table of contents above the
     content as a collapsible "On this page" disclosure. */
  .docs-layout {
    display: flex;
    flex-direction: column;
  }

  .docs-layout > .span9,
  .docs-layout > .span3 {
    float: none;
    margin-left: 0;
    width: auto;
  }

  .docs-layout > .span3 {
    order: -1;
  }

  .sidebar-nav {
    margin: 0 0 var(--space-4);
    max-height: none;
    position: static;
  }

  .sidebar-toc-toggle {
    display: flex;
  }

  .sidebar-nav .nav-list {
    display: none;
  }

  .sidebar-nav.is-open .nav-list {
    display: block;
    margin-top: var(--space-3);
  }

  /* Nav: the hamburger collapses ONLY the page links. The avatar/theme
     controls stay persistent in the top bar so they are never clipped. */
  .btn-navbar {
    display: inline-flex;
  }

  .navbar .navbar-inner .container {
    position: relative;
  }

  #primary-nav.nav-collapse {
    clear: both;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    width: 100%;
  }

  #primary-nav.nav-collapse.is-open {
    max-height: 520px;
  }

  #primary-nav .nav,
  #primary-nav .nav li > a,
  #primary-nav .nav a {
    float: none;
  }

  .navbar .nav.account-bar {
    float: right;
    margin: 0;
  }

  .navbar .nav.account-bar > li {
    float: right;
  }

  /* Logged out: fold the standalone theme circle into the page-links drawer
     (mirrors how the logged-in theme picker lives inside the account popover),
     so the top bar stays brand + Log In + hamburger on a single row. */
  .navbar .brand {
    font-size: 18px;
    padding-left: var(--space-3);
    padding-right: var(--space-2);
  }

  /* Shrink the logo to track the smaller brand text so the mark and the
     "Developers" label stay optically aligned (at 24px desktop text the 26px
     mark looks balanced; at 18px it dominates and reads as misaligned). */
  .navbar .brand .logo-mark {
    height: 20px;
    width: 20px;
  }

  /* Breathing room between the Log In button and the hamburger. */
  .navbar .btn-navbar {
    margin-left: var(--space-3);
  }

  .navbar .nav.account-bar .theme-menu {
    display: none;
  }

  .navbar .nav-login-button {
    padding: 10px 14px;
  }

  .nav-drawer-theme {
    clear: both;
    display: block;
    padding: var(--space-3) 14px var(--space-1);
  }

  .nav-drawer-theme .account-section-label {
    color: rgba(255, 255, 255, 0.78);
    display: block;
  }

  .nav-drawer-theme .theme-segmented {
    margin-top: var(--space-2);
    max-width: 280px;
  }

  .theme-toggle {
    padding: 8px 10px;
  }

  /* Pin the access-token dialog to the top of the viewport with a small margin
     so it can never be cut off or stranded mid-scroll. Bootstrap's responsive
     stylesheet sets .modal{position:absolute} and .modal.fade.in{top:auto},
     which leaves it sitting in document flow near the page bottom on phones. */
  #tokenModal,
  #tokenModal.fade.in {
    bottom: auto;
    left: 16px;
    margin: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    position: fixed;
    right: 16px;
    top: 16px;
    width: auto;
  }

  /* Gentle slide-in from just above its resting spot (never off-screen). */
  #tokenModal.fade {
    top: 16px;
    transform: translateY(-12px);
    transition: opacity 0.25s linear, transform 0.25s ease-out;
  }

  #tokenModal.fade.in {
    transform: translateY(0);
  }

  /* Let the dialog use the available height instead of Bootstrap's 400px cap. */
  #tokenModal .modal-body {
    max-height: none;
  }
}

@media (max-width: 359px) {
  /* Keep the signed-out top bar (brand + Log In + hamburger) on a single row
     on very narrow phones by trimming the brand a touch further. */
  .navbar .brand {
    font-size: 16px;
  }

  .navbar .brand .logo-mark {
    height: 18px;
    width: 18px;
  }

  .navbar .nav-login-button {
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}