html {
    font-size: 16px;
    font-weight: 500;
    scrollbar-color: var(--bs-border-color) transparent;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--bs-border-color);
    border-radius: 6px;
}

::selection {
    background: var(--bastillion-accent);
    color: #0d1117;
}

body {
    padding-top: 75px;
}

a {
    color: var(--bastillion-accent);
}

a:hover {
    color: var(--bastillion-accent-hover);
}

.form-control:focus, .form-select:focus {
    border-color: var(--bastillion-accent);
}

table {
    border-collapse: collapse;
    min-width: 50%;
    margin-bottom: 15px;
}

table tbody {
    overflow-x: auto;
}

tr{
    padding: 10px 0;
}

td {
    padding: 5px;
}

.container a {
    text-decoration: underline;
}
.container table a {
    text-decoration: none;
}

.navbar .container a {
    text-decoration: none;
}

.table-striped  {
    border: 1px solid var(--bs-border-color);
}

.table-striped  colgroup,  .table-striped  th {
    border-bottom: 1px solid var(--bs-border-color);
}

.table-striped th, .table-striped td {
    padding: 15px 20px 15px 20px;
}

.error, .error a {
    color: #f85149;
}

.warning {
    font-weight: bold;
    color: #e3b341;
}

.success {
    font-weight: bold;
    color: var(--bastillion-accent);
}

.sort, .asc, .desc {
    position: relative;
    cursor: pointer;
    padding-right: 16px !important;
}

.table-sort-label {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
}

.table-sort-label:focus-visible,
.assignment-sort:focus-visible {
    outline: 2px solid var(--bastillion-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

.sort::before,
.sort::after,
.asc::after,
.desc::after {
    content: "";
    position: absolute;
    right: 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.sort::before {
    top: calc(50% - 6px);
    border-bottom: 4px solid var(--bs-secondary-color);
}

.sort::after {
    top: calc(50% + 2px);
    border-top: 4px solid var(--bs-secondary-color);
}

.asc::after {
    top: 50%;
    border-bottom: 5px solid var(--bastillion-accent);
    transform: translateY(-50%);
}

.desc::after {
    top: 50%;
    border-top: 5px solid var(--bastillion-accent);
    transform: translateY(-50%);
}

div.term {
    margin: 10px;
    border: 1px solid var(--bs-border-color);
}

div.termwrapper {
    width: 145%;
    margin: 0 10px 0 10px;
}

div.termwrapper div h6 {
    margin: 8px 0 0 8px;
}

.term-header {
    font-size: 15px;
    white-space: nowrap;
    cursor: move;
}

.run_cmd {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.run_cmd_active {
    background: #12261a;
    border: 1px solid var(--bastillion-accent);
}

.run_cmd_active h6 {
    color: #f0f0f0;
}

.run_cmd {
    border-radius: 4px;
    margin: 5px;
    float: left;
}

.term {
    background-color: #000;
}

.term-header {
    cursor: move;
}

.clear {
    clear: both;
}

.output {
    margin: 5px;
    z-index: 100;
}

.terminal {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 12px;
    color: #000;
    line-height: 1.231;
}

.terminal pre {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 12px;
    border: none;
    line-height: 1.231;
}

.navbar-brand {
    font-weight: bold;
}

.align_left {
    padding-left: 0;
    margin-left: 0;
}

.spacer {
    display: inline-block;
}

.spacer-middle {
    margin: 0 5px;
}

.spacer-left {
    margin: 0 5px 0 0;
}

.spacer-right {
    margin: 0 0 0 5px;
}

.spacer-bottom {
    margin: 5px 0 0 0;
}

a.btn {
    text-decoration: none;
}

.existing_key_label .alert, .new_key_label .alert {
    float: right;
    margin-right: 30px;
    padding: 6px 18px;
}

.scrollWrapperActive {
    overflow-y: scroll;
    height: 450px;
    display: inline-block;
}

.uploadScrollWrapperActive {
    overflow-y: scroll;
    height: 200px;
    display: inline-block;
}

.uploadScrollableTable {
    min-width: 600px;
}

.scrollableTable {
    min-width: 750px;
}

.scrollableTable th {
    background-color: var(--bs-tertiary-bg);
}

.scrollableTable tbody tr:hover, .uploadScrollableTable tbody tr:hover {
    /* !important needed: even rows get an inline background-color from JS zebra-striping */
    background-color: #33393f !important;
}

table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: var(--bs-body-bg);
}

.show {
    display: block;
}

.hidden {
    display: none;
    visibility: hidden;
}

.invisible {
    visibility: hidden;
}

.btn-secondary {
    color: #ffffff;
    background-color: #474949;
    text-shadow: none;
    border-color: #474949;
}

.btn-secondary:focus, .btn-secondary.focus {
    color: #ffffff;
    background-color: #2e2f2f;
    border-color: var(--bastillion-accent);
}

.btn-secondary:hover {
    color: #ffffff;
    background-color: #2e2f2f;
    border-color: #292a2a;
}

.btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
    color: #ffffff;
    background-color: #2e2f2f;
    background-image: none;
    border-color: #292a2a;
}

.btn-secondary:active:hover, .btn-secondary.active:hover, .open > .dropdown-toggle.btn-secondary:hover, .btn-secondary:active:focus, .btn-secondary.active:focus, .open > .dropdown-toggle.btn-secondary:focus, .btn-secondary:active.focus, .btn-secondary.active.focus, .open > .dropdown-toggle.btn-secondary.focus {
    color: #ffffff;
    background-color: #1c1d1d;
    border-color: #080808;
}

.btn-secondary.disabled:hover, .btn-secondary[disabled]:hover, fieldset[disabled] .btn-secondary:hover, .btn-secondary.disabled:focus, .btn-secondary[disabled]:focus, fieldset[disabled] .btn-secondary:focus, .btn-secondary.disabled.focus, .btn-secondary[disabled].focus, fieldset[disabled] .btn-secondary.focus {
    background-color: #474949;
    border-color: #474949;
}

.list-group a {
    text-decoration: none;
}

.modal-body .modal-content .row {
    width: 75%;
    margin-left: 15px;
}

.modal-content {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

.confirm-dialog {
    max-width: 480px;
}

.confirm-dialog .modal-body p {
    margin: 0;
}

/* pages rendered inside an iframe (upload/push) don't need room for the fixed navbar */
.iframe-body {
    width: 100%;
    min-height: 100%;
    padding: 20px;
    overflow-x: hidden;
    background: var(--bastillion-surface);
}

.upload-push-dialog {
    width: min(1100px, calc(100vw - 32px));
    max-width: 1100px;
    margin: 16px auto;
}

.upload-push-dialog .modal-content {
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}

.upload-push-dialog .modal-header {
    flex: 0 0 auto;
}

.upload-push-modal-body {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.upload-push-frame {
    display: block;
    width: 100%;
    height: min(62vh, 540px);
    min-height: 340px;
    background: var(--bastillion-surface);
    border: 0;
}

/* The picker is intentionally compact; the post-upload status table keeps the wider dialog. */
.upload-form-state .upload-push-dialog {
    width: min(720px, calc(100vw - 32px));
    max-width: 720px;
}

.upload-form-state .upload-push-frame {
    height: 350px;
    min-height: 350px;
}

.upload-form,
.upload-field {
    display: grid;
    gap: 8px;
}

.upload-form {
    width: 100%;
    gap: 18px;
}

.upload-field .error:empty {
    display: none;
}

.upload-actions {
    display: flex;
    justify-content: flex-end;
}

.uploadScrollWrapper {
    width: 100%;
    max-width: 100%;
    overflow: auto;
}

.settings-page {
    max-width: 1500px;
    margin-inline: auto;
}

.settings-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 28px;
}

.settings-heading h1 {
    margin: 4px 0 8px;
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.settings-heading p,
.settings-card-header p {
    margin: 0;
}

.settings-danger-label {
    color: var(--bastillion-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.settings-card {
    min-width: 0;
    padding: 24px;
    background: linear-gradient(145deg, var(--bastillion-surface-raised), var(--bastillion-surface));
    border: 1px solid var(--bastillion-border);
    border-radius: 16px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}

.settings-card-wide {
    grid-column: 1 / -1;
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

/* Copy / Download sitting together on the right of a settings card header. The header is
   already flex with space-between, so this only has to keep the pair from colliding. */
.settings-card-actions {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

.settings-card-header h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.settings-card-header p {
    color: var(--bastillion-muted);
    font-size: .9rem;
}

.settings-form,
.settings-field {
    display: grid;
    gap: 8px;
}

.settings-form {
    gap: 18px;
}

.settings-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-field .form-label {
    margin: 0;
}

.settings-field .error:empty {
    display: none;
}

.settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
}

.settings-page .btn {
    text-decoration: none;
}

.settings-toggle-row {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--bastillion-border);
    border-radius: 11px;
}

.settings-toggle-title,
.settings-help {
    display: block;
}

.settings-toggle-title {
    color: var(--bastillion-text);
    font-weight: 700;
}

.settings-help,
.settings-optional {
    color: var(--bastillion-muted);
    font-size: .78rem;
    font-weight: 500;
}

.settings-toggle-row .theme-setting {
    min-height: auto;
}

.settings-key {
    overflow-x: auto;
    margin: 0;
    padding: 16px 18px;
    color: #c9f7d5;
    background: rgba(3, 7, 10, .72);
    border: 1px solid var(--bastillion-border-strong);
    border-radius: 11px;
    font-size: .84rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-admin-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.settings-danger {
    padding: 0;
    overflow: hidden;
    border-color: rgba(248, 81, 73, .26);
}

.settings-danger summary {
    display: flex;
    min-height: 108px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    cursor: pointer;
    list-style: none;
    transition: background-color .18s ease;
}

.settings-danger summary::-webkit-details-marker {
    display: none;
}

.settings-danger summary:hover {
    background: rgba(248, 81, 73, .04);
}

.settings-danger summary::after {
    width: 10px;
    height: 10px;
    margin-left: 18px;
    border-right: 2px solid var(--bastillion-muted);
    border-bottom: 2px solid var(--bastillion-muted);
    content: "";
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.settings-danger[open] summary::after {
    transform: rotate(225deg);
}

.settings-danger summary span,
.settings-danger summary strong,
.settings-danger summary small {
    display: block;
}

.settings-danger summary strong {
    margin: 4px 0;
    color: var(--bastillion-text);
    font-size: 1.05rem;
}

.settings-danger summary small {
    color: var(--bastillion-muted);
}

.settings-danger-content {
    padding: 0 24px 24px;
    border-top: 1px solid var(--bastillion-border);
}

.settings-warning {
    margin: 20px 0;
    padding: 14px 16px;
    color: #f6c8c5;
    background: rgba(248, 81, 73, .08);
    border: 1px solid rgba(248, 81, 73, .25);
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.55;
}

.settings-warning strong {
    display: block;
    margin-bottom: 3px;
    color: #ff9b94;
}

.settings-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--bastillion-muted);
    font-size: .86rem;
    line-height: 1.5;
}

.settings-confirm .form-check-input {
    flex: 0 0 auto;
}

.settings-license {
    display: flex;
    flex-direction: column;
}

.settings-license-status {
    flex: 1;
}

.settings-license-status p {
    margin: 10px 0 0;
    font-size: .9rem;
}

.settings-status-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.settings-status-active {
    color: #8df0a8;
    background: rgba(74, 222, 128, .1);
    border: 1px solid rgba(74, 222, 128, .22);
}

.settings-status-limited {
    color: #f0c45a;
    background: rgba(240, 196, 90, .1);
    border: 1px solid rgba(240, 196, 90, .22);
}

.settings-license > .settings-actions {
    margin-top: 24px;
    justify-content: flex-start;
}

/* Modern dark interface */
:root,
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bastillion-bg: #080b10;
    --bastillion-surface: #10151c;
    --bastillion-surface-raised: #151b24;
    --bastillion-surface-hover: #1a222d;
    --bastillion-border: rgba(255, 255, 255, .09);
    --bastillion-border-strong: rgba(255, 255, 255, .15);
    --bastillion-text: #f3f6f8;
    --bastillion-muted: #aab5c2;
    --bastillion-accent: #4ade80;
    --bastillion-accent-hover: #6ee79a;
    --bastillion-accent-deep: #22a447;
    --bastillion-danger: #ef5b64;
    --bastillion-shadow-md: 0 18px 48px rgba(0, 0, 0, .28);
    --bs-body-bg: var(--bastillion-bg);
    --bs-body-color: var(--bastillion-text);
    --bs-border-color: var(--bastillion-border);
    --bs-tertiary-bg: var(--bastillion-surface-raised);
    --bs-secondary-color: var(--bastillion-muted);
    --bs-focus-ring-color: rgba(74, 222, 128, .24);
}

html {
    min-height: 100%;
    font-weight: 450;
}

body {
    min-height: 100vh;
    padding-top: 96px;
    background:
        radial-gradient(circle at 12% -10%, rgba(46, 160, 67, .13), transparent 32rem),
        radial-gradient(circle at 90% 15%, rgba(57, 211, 83, .06), transparent 24rem),
        var(--bastillion-bg);
    color: var(--bastillion-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -.005em;
}

body > .container:not(.login-wrap):not(.term-container) {
    padding-bottom: 48px;
}

body > .container:not(.login-wrap):not(.term-container) > h3:first-of-type {
    margin-bottom: 8px;
}

/* page subtitle under an h3 - status paragraphs keep their own colour */
body > .container:not(.login-wrap):not(.term-container) > h3:first-of-type + p:not(.error):not(.warning):not(.success),
body > .container:not(.login-wrap):not(.term-container) > form:first-child > h3:first-of-type + p:not(.error):not(.warning):not(.success) {
    margin-bottom: 24px;
    color: var(--bastillion-muted);
}

.container {
    width: calc(100% - 64px);
    max-width: none;
}

a {
    text-underline-offset: 3px;
    transition: color .18s ease, opacity .18s ease;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bastillion-text);
    font-weight: 700;
    letter-spacing: -.025em;
}

h3 {
    margin: 8px 0 22px;
    font-size: clamp(1.5rem, 2vw, 2rem);
}

p {
    color: #c6ced8;
}

code, pre {
    color: #d9fbe4;
}

.navbar {
    min-height: 68px;
    padding: 10px 0;
    background: rgba(8, 11, 16, .88);
    border-bottom: 1px solid var(--bastillion-border);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.navbar .container {
    gap: 28px;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.navbar-toggler {
    width: 42px;
    height: 42px;
    padding: 9px;
    color: var(--bastillion-text);
    border: 1px solid var(--bastillion-border-strong);
    border-radius: 9px;
    box-shadow: none;
}

.navbar-toggler:hover {
    background: rgba(255, 255, 255, .05);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
}

.navbar-toggler-icon {
    width: 20px;
    height: 16px;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    background-size: 20px 2px;
}

.brand-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    filter: drop-shadow(0 5px 13px rgba(46, 160, 67, .24));
}

.navbar-collapse {
    min-width: 0;
}

.navbar-nav {
    align-items: center;
    gap: 4px;
}

.navbar .nav-link {
    padding: 8px 11px !important;
    border-radius: 8px;
    color: #aeb8c5;
    font-size: .92rem;
    font-weight: 580;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.show {
    color: #fff;
    background: rgba(255, 255, 255, .065);
}

.dropdown-menu {
    padding: 7px;
    background: rgba(18, 24, 32, .98);
    border: 1px solid var(--bastillion-border-strong);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

.dropdown-item {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: #c9d1db;
    text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    background: rgba(74, 222, 128, .1);
}

.dropdown-menu .dropdown-item:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .45);
}

.card,
.modal-content {
    background: linear-gradient(145deg, rgba(22, 29, 39, .98), rgba(14, 19, 26, .98));
    border: 1px solid var(--bastillion-border);
    border-radius: 16px;
    box-shadow: var(--bastillion-shadow-md);
}

.card-body {
    padding: 28px;
}

.modal-header,
.modal-footer {
    border-color: var(--bastillion-border);
}

.modal-header,
.modal-body,
.modal-footer {
    padding: 20px 24px;
}

.modal-title {
    font-weight: 700;
}

.modal-header .btn-close {
    position: relative;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: 0 0 0 auto;
    color: var(--bastillion-text);
    background: transparent;
    border: 1px solid var(--bastillion-border-strong);
    border-radius: 9px;
    filter: none;
    opacity: .82;
}

.modal-header .btn-close::before,
.modal-header .btn-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    content: "";
}

.modal-header .btn-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-header .btn-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
    color: var(--bastillion-text);
    background: var(--bastillion-surface-hover);
    border-color: var(--bastillion-accent);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
    opacity: 1;
}

.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 96px) !important;
    padding-top: 12px;
    padding-bottom: 64px;
}

.login-card {
    width: 100%;
    max-width: 430px !important;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 0 0 1px rgba(74, 222, 128, .04);
}

.login-card::before {
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--bastillion-accent-deep), var(--bastillion-accent), transparent);
    content: "";
}

.login-card .card-body {
    padding: 38px;
}

.login-heading {
    margin-bottom: 28px;
}

.login-heading h1 {
    margin: 8px 0 8px;
    font-size: 2rem;
}

.login-heading p {
    margin: 0;
    color: var(--bastillion-muted);
}

.form-label {
    margin-bottom: 7px;
    color: #d7dee7;
    font-size: .86rem;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 42px;
    color: var(--bastillion-text);
    background-color: rgba(6, 9, 13, .72);
    border: 1px solid var(--bastillion-border-strong);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(255, 255, 255, .24);
}

.form-control:focus,
.form-select:focus {
    background-color: #0a0f15;
    border-color: var(--bastillion-accent);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .14);
}

/* separates "Manage My Keys" from the filter controls beside it */
.filter-divider {
    width: 1px;
    padding: 0;
    background-color: var(--bastillion-border-strong);
}

textarea.form-control {
    min-height: 100px;
}

.btn {
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 680;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus {
    color: #07100a;
    background: linear-gradient(180deg, #59e48a, #3ccc6e);
    border-color: #67e994;
    box-shadow: 0 8px 22px rgba(46, 160, 67, .16);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.open > .dropdown-toggle.btn-secondary,
.btn-secondary:active:hover,
.btn-secondary.active:hover {
    color: #050a06;
    background: linear-gradient(180deg, #76efa0, #4cdb7b);
    border-color: #83f0a9;
}

.btn-secondary:focus-visible {
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}

.refresh_btn {
    position: relative;
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    padding: 8px;
    align-items: center;
    justify-content: center;
}

.refresh_btn::before {
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    transform: rotate(-25deg);
}

.refresh_btn::after {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    content: "";
    transform: rotate(18deg);
}

.btn-danger {
    color: #fff;
    background: #c93f48;
    border-color: #df5660;
    box-shadow: 0 8px 22px rgba(201, 63, 72, .16);
}

.btn-danger:hover,
.btn-danger:focus {
    color: #fff;
    background: #dc4a54;
    border-color: #f06a72;
}

/* Keep high-emphasis green for creation and submission. Routine row actions stay quieter. */
.btn-secondary.edit_btn,
.btn-secondary.cancel_btn,
.btn-secondary.clear_btn,
.btn-secondary.terminals_btn,
.btn-secondary.refresh_btn {
    color: #d7dee7;
    background: #202833;
    border-color: #3a4654;
    box-shadow: none;
}

.btn-secondary.edit_btn:hover,
.btn-secondary.cancel_btn:hover,
.btn-secondary.clear_btn:hover,
.btn-secondary.terminals_btn:hover,
.btn-secondary.refresh_btn:hover {
    color: #fff;
    background: #2a3542;
    border-color: #526172;
}

.btn-secondary.del_btn {
    color: #ff9da3;
    background: rgba(239, 91, 100, .07);
    border-color: rgba(239, 91, 100, .42);
    box-shadow: none;
}

.btn-secondary.del_btn:hover,
.btn-secondary.del_btn:focus-visible {
    color: #fff;
    background: rgba(239, 91, 100, .2);
    border-color: var(--bastillion-danger);
}

table {
    margin-bottom: 22px;
}

.scrollWrapper,
.scrollWrapperActive,
.uploadScrollWrapperActive {
    display: block;
    width: 100%;
    max-width: 100%;
}

.table-striped,
.scrollableTable,
.uploadScrollableTable {
    width: 100%;
}

.scrollableTable th:last-child,
.scrollableTable td:last-child {
    text-align: right;
}

.scrollableTable td:last-child {
    white-space: nowrap;
}

.scrollableTable td:last-child > div {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.table-striped,
.scrollableTable,
.uploadScrollableTable {
    overflow: hidden;
    background: #0e141b;
    border: 1px solid #33404e;
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.table-striped th,
.scrollableTable th {
    color: #f0f4f8;
    background: #19222c;
    border-bottom: 1px solid #3b4857;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.table-striped td,
.scrollableTable td {
    color: #eef2f6;
    border-bottom: 1px solid #27313c;
}

.table-striped tbody tr,
.scrollableTable tbody tr,
.uploadScrollableTable tbody tr {
    background: #0f151c;
}

.table-striped tbody tr:nth-child(even),
.scrollableTable tbody tr:nth-child(even),
.uploadScrollableTable tbody tr:nth-child(even) {
    background: #171e26;
}

.table-striped tbody tr:last-child td,
.scrollableTable tbody tr:last-child td,
.uploadScrollableTable tbody tr:last-child td {
    border-bottom: 0;
}

.scrollableTable tbody tr:hover,
.uploadScrollableTable tbody tr:hover {
    background: #1b2b24 !important;
}

.selectionTable th:first-child,
.selectionTable td:first-child {
    width: 64px;
    text-align: center;
}

.selectionTable tbody tr:has(.form-check-input:checked) {
    background: #12251a !important;
    box-shadow: inset 4px 0 0 var(--bastillion-accent);
}

.form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0;
    vertical-align: middle;
    background-color: #070b10;
    border: 2px solid #7e8c9d;
    border-radius: 5px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 2px rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.form-check-input:hover {
    border-color: #c3ced9;
    transform: scale(1.06);
}

.form-check-input:focus {
    border-color: var(--bastillion-accent);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .24);
}

.btn:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(74, 222, 128, .65);
    outline-offset: 3px;
}

.form-check-input:checked,
.form-check-input:indeterminate {
    background-color: var(--bastillion-accent-deep);
    border-color: var(--bastillion-accent);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, .18), 0 3px 10px rgba(34, 164, 71, .24);
}

.list-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.list-group-item {
    padding: 22px;
    background: linear-gradient(145deg, rgba(22, 29, 39, .9), rgba(14, 19, 26, .9));
    border: 1px solid var(--bastillion-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .14);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.list-group-item p {
    color: var(--bastillion-muted);
    line-height: 1.55;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    z-index: auto;
    color: inherit;
    background: linear-gradient(145deg, rgba(27, 37, 47, .98), rgba(17, 24, 32, .98));
    border-color: rgba(74, 222, 128, .38) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
    transform: translateY(-2px);
}

.alert {
    border-width: 1px;
    border-radius: 11px;
}

.alert-danger {
    color: #ffb4b0;
    background: rgba(248, 81, 73, .1);
    border-color: rgba(248, 81, 73, .28);
}

.error,
.error a {
    color: #ff7b72;
}

.warning {
    color: #f0c45a;
}

.success {
    color: var(--bastillion-accent);
}

.run_cmd {
    overflow: hidden;
    margin: 7px;
    background: #0d1218;
    border: 1px solid var(--bastillion-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

.run_cmd_active {
    background: #0d1712;
    border-color: rgba(74, 222, 128, .65);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, .08), 0 14px 34px rgba(0, 0, 0, .35);
}

.term-header {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 10px 14px;
    color: #dce4ec;
    background: rgba(255, 255, 255, .035);
}

.term-header::before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: #596675;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(89, 102, 117, .12);
    content: "";
}

.run_cmd_active .term-header::before {
    background: var(--bastillion-accent);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .12);
}

.term {
    margin: 0 !important;
    overflow: hidden;
    border: 0 !important;
}

.live-term-container .output,
.audit-term-container .output {
    margin: 0;
}

.live-term-container .output {
    padding: 14px 16px 16px;
    background: inherit;
    border: 1px solid rgba(148, 163, 184, .32);
    border-color: color-mix(in srgb, var(--terminal-fg, #e6edf3) 32%, var(--terminal-bg, #070a0e));
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terminal-fg, #e6edf3) 7%, transparent);
    box-sizing: border-box;
    overflow: hidden;
}

.live-term-container .terminal-viewport {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.live-term-container .term,
.live-term-container .xterm {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Keep the resize hit areas inside the clipped terminal card. jQuery UI
   normally places these outside the edge, leaving only a few draggable pixels. */
.live-term-container .run_cmd > .ui-resizable-e {
    right: 0;
    width: 10px;
    touch-action: none;
}

.live-term-container .run_cmd > .ui-resizable-s {
    bottom: 0;
    height: 10px;
    touch-action: none;
}

.live-term-container .run_cmd > .ui-resizable-se {
    right: 3px;
    bottom: 3px;
    width: 18px;
    height: 18px;
    border-right: 2px solid color-mix(in srgb, var(--terminal-fg, #e6edf3) 45%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--terminal-fg, #e6edf3) 45%, transparent);
    border-radius: 0 0 4px;
    touch-action: none;
}

.live-term-container .run_cmd.term-resizing {
    user-select: none;
}

.audit-term-container .terminal {
    border: 1px solid rgba(148, 163, 184, .32);
    border-color: color-mix(in srgb, var(--terminal-fg, #e6edf3) 32%, var(--terminal-bg, #070a0e));
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terminal-fg, #e6edf3) 7%, transparent);
    box-sizing: border-box;
}

.theme-setting {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 10px;
}

.theme-setting.form-switch {
    padding-left: 0;
}

.theme-setting.form-switch .form-check-input {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    appearance: none;
    background-color: #2b3440;
    background-image: radial-gradient(circle, #f8fafc 0 44%, transparent 48%);
    background-position: left .2rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border: 1px solid #536170;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .18s ease, background-position .18s ease,
        border-color .18s ease, box-shadow .18s ease;
}

.theme-setting.form-switch .form-check-input:hover {
    border-color: #8492a1;
    transform: none;
}

.theme-setting.form-switch .form-check-input:checked {
    background-color: var(--bastillion-accent-deep);
    background-image: radial-gradient(circle, #ffffff 0 44%, transparent 48%);
    background-position: right .2rem center;
    border-color: var(--bastillion-accent);
}

[data-bs-theme="light"] {
    color-scheme: light;
    --bastillion-bg: #f4f7f5;
    --bastillion-surface: #ffffff;
    --bastillion-surface-raised: #f7faf8;
    --bastillion-surface-hover: #edf4ef;
    --bastillion-border: rgba(20, 43, 31, .12);
    --bastillion-border-strong: rgba(20, 43, 31, .22);
    --bastillion-text: #17231c;
    --bastillion-muted: #53635a;
    --bastillion-accent: #16833b;
    --bastillion-accent-hover: #116f31;
    --bastillion-accent-deep: #16833b;
    --bastillion-danger: #b4232c;
    --bastillion-shadow-md: 0 18px 48px rgba(26, 55, 39, .12);
    --bs-body-bg: var(--bastillion-bg);
    --bs-body-color: var(--bastillion-text);
    --bs-border-color: var(--bastillion-border);
    --bs-tertiary-bg: var(--bastillion-surface-raised);
    --bs-secondary-color: var(--bastillion-muted);
}

[data-bs-theme="light"] body {
    background:
        radial-gradient(circle at 12% -10%, rgba(46, 160, 67, .1), transparent 32rem),
        radial-gradient(circle at 90% 15%, rgba(57, 211, 83, .05), transparent 24rem),
        var(--bastillion-bg);
}

[data-bs-theme="light"] p {
    color: #506057;
}

[data-bs-theme="light"] code,
[data-bs-theme="light"] pre {
    color: #155f31;
}

[data-bs-theme="light"] .navbar {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 35px rgba(26, 55, 39, .09);
}

[data-bs-theme="light"] .navbar-brand,
[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link:focus,
[data-bs-theme="light"] .navbar .nav-link.show {
    color: #17231c;
}

[data-bs-theme="light"] .navbar .nav-link {
    color: #58685e;
}

[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link:focus,
[data-bs-theme="light"] .navbar .nav-link.show {
    background: rgba(22, 131, 59, .08);
}

[data-bs-theme="light"] .dropdown-menu {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 45px rgba(26, 55, 39, .16);
}

[data-bs-theme="light"] .dropdown-item {
    color: #34453b;
}

[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-item:focus {
    color: #102819;
    background: rgba(22, 131, 59, .09);
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .modal-content {
    background: linear-gradient(145deg, #ffffff, #f8fbf9);
    box-shadow: var(--bastillion-shadow-md);
}

[data-bs-theme="light"] .login-card {
    box-shadow: 0 28px 80px rgba(26, 55, 39, .16), 0 0 0 1px rgba(22, 131, 59, .05);
}

[data-bs-theme="light"] .form-label {
    color: #34453b;
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    color: var(--bastillion-text);
    background-color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

[data-bs-theme="light"] .form-control:hover,
[data-bs-theme="light"] .form-select:hover {
    border-color: rgba(20, 43, 31, .34);
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: #ffffff;
}

[data-bs-theme="light"] .btn-secondary.edit_btn,
[data-bs-theme="light"] .btn-secondary.cancel_btn,
[data-bs-theme="light"] .btn-secondary.clear_btn,
[data-bs-theme="light"] .btn-secondary.terminals_btn,
[data-bs-theme="light"] .btn-secondary.refresh_btn {
    color: #34453b;
    background: #f6f8f6;
    border-color: #b9c6bd;
}

[data-bs-theme="light"] .btn-secondary.edit_btn:hover,
[data-bs-theme="light"] .btn-secondary.cancel_btn:hover,
[data-bs-theme="light"] .btn-secondary.clear_btn:hover,
[data-bs-theme="light"] .btn-secondary.terminals_btn:hover,
[data-bs-theme="light"] .btn-secondary.refresh_btn:hover {
    color: #17231c;
    background: #e9efeb;
    border-color: #8fa095;
}

[data-bs-theme="light"] .btn-secondary.del_btn {
    color: #a72b33;
    background: #fff7f7;
    border-color: #e6b1b5;
}

[data-bs-theme="light"] .btn-secondary.del_btn:hover,
[data-bs-theme="light"] .btn-secondary.del_btn:focus-visible {
    color: #821d25;
    background: #fee9ea;
    border-color: #c85b63;
}

[data-bs-theme="light"] .table-striped,
[data-bs-theme="light"] .scrollableTable,
[data-bs-theme="light"] .uploadScrollableTable {
    background: #ffffff;
    border-color: #c7d2ca;
    box-shadow: 0 14px 38px rgba(26, 55, 39, .1);
}

[data-bs-theme="light"] .table-striped th,
[data-bs-theme="light"] .scrollableTable th {
    color: #203027;
    background: #e7eee9;
    border-bottom-color: #bcc9c0;
}

[data-bs-theme="light"] .table-striped td,
[data-bs-theme="light"] .scrollableTable td {
    color: #203027;
    border-bottom-color: #d5ddd7;
}

[data-bs-theme="light"] .table-striped tbody tr,
[data-bs-theme="light"] .scrollableTable tbody tr,
[data-bs-theme="light"] .uploadScrollableTable tbody tr {
    background: #ffffff;
}

[data-bs-theme="light"] .table-striped tbody tr:nth-child(even),
[data-bs-theme="light"] .scrollableTable tbody tr:nth-child(even),
[data-bs-theme="light"] .uploadScrollableTable tbody tr:nth-child(even) {
    background: #f3f7f4;
}

[data-bs-theme="light"] .scrollableTable tbody tr:hover,
[data-bs-theme="light"] .uploadScrollableTable tbody tr:hover {
    background: #e7f3ea !important;
}

[data-bs-theme="light"] .form-check-input:not(:checked):not(:indeterminate) {
    background-color: #ffffff;
    border-color: #74847a;
    box-shadow: 0 0 0 1px rgba(20, 43, 31, .12), inset 0 1px 2px rgba(20, 43, 31, .08);
}

[data-bs-theme="light"] .form-check-input:checked,
[data-bs-theme="light"] .form-check-input:indeterminate {
    background-color: #238636;
    border-color: #176f2c;
    box-shadow: 0 0 0 2px rgba(35, 134, 54, .18), 0 3px 10px rgba(35, 134, 54, .2);
}

[data-bs-theme="light"] .selectionTable tbody tr:has(.form-check-input:checked) {
    background: #dff4e4 !important;
    box-shadow: inset 4px 0 0 #238636;
}

[data-bs-theme="light"] .list-group-item {
    color: var(--bastillion-text);
    background: linear-gradient(145deg, #ffffff, #f7faf8);
    box-shadow: 0 10px 32px rgba(26, 55, 39, .08);
}

[data-bs-theme="light"] .list-group-item-action:hover,
[data-bs-theme="light"] .list-group-item-action:focus {
    background: linear-gradient(145deg, #f7fcf8, #edf5ef);
    box-shadow: 0 16px 38px rgba(26, 55, 39, .11);
}

[data-bs-theme="light"] .alert-danger {
    color: #9f242c;
    background: #fff0f0;
}

[data-bs-theme="light"] .error,
[data-bs-theme="light"] .error a {
    color: #b4232c;
}

[data-bs-theme="light"] .warning {
    color: #826000;
}

[data-bs-theme="light"] .settings-warning {
    color: #71302c;
    background: #fff3f2;
    border-color: #efc1be;
}

[data-bs-theme="light"] .settings-warning strong {
    color: #a42d35;
}

[data-bs-theme="light"] .settings-toggle-row {
    background: rgba(22, 131, 59, .035);
}

[data-bs-theme="light"] .settings-key {
    color: #d7f8df;
    background: #17241d;
    border-color: #31463a;
}

@media (max-width: 900px) {
    body {
        padding-top: 88px;
    }

    .container {
        width: calc(100% - 32px);
    }

    .navbar {
        min-height: 64px;
    }

    .list-group {
        grid-template-columns: 1fr;
    }

    .scrollWrapper,
    .scrollWrapperActive {
        display: block;
        max-width: 100%;
        overflow: auto;
    }

    .settings-grid,
    .settings-admin-grid {
        grid-template-columns: 1fr;
    }

    .settings-card-wide {
        grid-column: auto;
    }
}

@media (max-width: 991.98px) {
    .navbar {
        background: rgba(8, 11, 16, .98);
    }

    [data-bs-theme="light"] .navbar {
        background: rgba(255, 255, 255, .98);
    }

    .navbar .container {
        gap: 12px;
    }

    .navbar-collapse {
        flex-basis: 100%;
        padding: 10px 0 4px;
        border-top: 1px solid var(--bastillion-border);
    }

    .navbar-nav {
        align-items: stretch;
    }

    .navbar .nav-link {
        padding: 10px 12px !important;
    }

    .navbar .dropdown-menu {
        position: static;
        margin: 2px 0 6px 12px;
        box-shadow: none;
    }

    .navbar .account-nav {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--bastillion-border);
    }
}

@media (max-width: 520px) {
    .container {
        width: calc(100% - 20px);
    }

    .brand-logo {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .login-card .card-body {
        padding: 28px 22px;
    }

    .modal-body .modal-content .row {
        width: 100%;
        margin-left: 0;
    }

    .settings-heading {
        margin-bottom: 20px;
    }

    .settings-card {
        padding: 19px;
        border-radius: 13px;
    }

    .settings-field-row {
        grid-template-columns: 1fr;
    }

    .settings-actions .btn {
        width: 100%;
    }

    .settings-danger {
        padding: 0;
    }

    .settings-danger summary {
        min-height: 96px;
        padding: 18px 19px;
    }

    .settings-danger-content {
        padding: 0 19px 19px;
    }

    .upload-push-dialog {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .upload-push-dialog .modal-content {
        max-height: calc(100vh - 16px);
    }

    .upload-push-dialog .modal-header {
        padding: 16px 18px;
    }

    .upload-push-frame {
        height: min(68vh, 500px);
        min-height: 300px;
    }

    .upload-form-state .upload-push-dialog {
        width: calc(100vw - 16px);
    }

    .upload-form-state .upload-push-frame {
        height: min(350px, calc(100vh - 96px));
        min-height: 280px;
    }

    .iframe-body {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Landing surfaces share the application palette in both color themes. */
.workspace { padding-bottom: 48px; }
.workspace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bastillion-border);
}
.workspace-intro h1 {
    margin: 8px 0;
    font-size: 2.25rem;
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.15;
}
.workspace-intro p {
    margin: 0;
    color: var(--bastillion-muted);
    font-size: .95rem;
}
.workspace-launch { flex-shrink: 0; padding: 11px 18px; }
.workspace-launch span { margin-left: 22px; }
.workspace-icon svg { display: block; width: 24px; height: 24px; }
.navbar .nav-link.active {
    color: var(--bastillion-accent);
    background: color-mix(in srgb, var(--bastillion-accent) 10%, transparent);
    border-radius: 7px;
    box-shadow: inset 0 -2px var(--bastillion-accent);
}
.navbar .dropdown-item.active {
    color: var(--bastillion-text);
    background: color-mix(in srgb, var(--bastillion-accent) 15%, var(--bastillion-surface));
}
.empty-state {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 20px 0;
    padding: 26px 28px;
    border: 1px dashed var(--bastillion-border-strong);
    border-radius: 12px;
    background: var(--bastillion-surface);
    color: var(--bastillion-muted);
    font-size: .9rem;
}
.empty-state strong { color: var(--bastillion-text); font-size: 1rem; }
.workspace .featurette { margin: 0; }
.workspace .list-group { padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.workspace .list-group-item { padding: 18px; }
.workspace .list-group-item > div { align-items: center; gap: 12px; margin-bottom: 10px; }
.workspace .list-group-item h3 { flex: 1; margin: 0 !important; color: var(--bastillion-text); font-size: 1rem; letter-spacing: -.02em; }
.workspace .list-group-item p { margin: 0 !important; font-size: .85rem; }
.workspace-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    color: var(--bastillion-accent);
    background: color-mix(in srgb, var(--bastillion-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bastillion-accent) 22%, transparent);
    border-radius: 10px;
}
@media (max-width: 1050px) {
    .workspace .list-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .workspace-hero { flex-wrap: wrap; padding: 16px 0 24px; }
}
@media (max-width: 520px) {
    .workspace .list-group { grid-template-columns: 1fr; }
}

/* Give shell scripts room without inserting line breaks into saved commands. */
.script-dialog { --bs-modal-width: 860px; }
.script-dialog textarea { font: .9rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; min-height: 320px; }
.script-dialog td { vertical-align: top; }
.script-dialog td:first-child { padding-top: 14px; }

.assignment-page { padding-bottom: 40px; }
.assignment-back { display: inline-block; margin: 4px 0 22px; color: var(--bastillion-muted); font-size: .85rem; text-decoration: none !important; }
.assignment-heading h1 { margin: 8px 0; font-size: 2rem; letter-spacing: -.04em; }
.assignment-heading p { color: var(--bastillion-muted); margin-bottom: 26px; }
.assignment-panel { border: 1px solid var(--bastillion-border-strong); border-radius: 14px; overflow: hidden; background: var(--bastillion-surface); }
.assignment-profile { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; border-bottom: 1px solid var(--bastillion-border); }
.assignment-profile h2 { font-size: 1.15rem; margin: 0 0 6px; }
.assignment-profile p { margin: 0; color: var(--bastillion-muted); font-size: .9rem; }
.assignment-summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 24px; color: var(--bastillion-muted); font-size: .8rem; }
#assignment-count { color: var(--bastillion-text); font-weight: 650; }
.assignment-table-wrap { overflow: auto; }
.assignment-table { width: 100%; min-width: 620px; table-layout: fixed; margin: 0; }
.assignment-check-column { width: 60px; }
.assignment-table th, .assignment-table td { padding: 16px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bastillion-border); }
.assignment-table th { background: var(--bastillion-surface-raised); padding-block: 10px; }
.assignment-table th:first-child, .assignment-table td:first-child { padding-left: 24px; padding-right: 10px; }
.assignment-table label { display: block; margin: 0; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.assignment-table code { color: var(--bastillion-muted); font-size: .85rem; overflow-wrap: anywhere; }
.assignment-table tbody tr:hover { background: color-mix(in srgb, var(--bastillion-accent) 4%, transparent); }
.assignment-table tbody tr:has(input:checked) { background: color-mix(in srgb, var(--bastillion-accent) 7%, transparent); }
.assignment-table tbody tr:has(input:checked) td:first-child { box-shadow: inset 3px 0 var(--bastillion-accent); }
.assignment-sort { display: flex; align-items: center; gap: 12px; padding: 6px 0; background: none; border: 0; color: var(--bastillion-muted); font-size: .75rem; font-weight: 650; }
.assignment-sort span { opacity: .6; }
.assignment-sort:hover, th[aria-sort="ascending"] .assignment-sort, th[aria-sort="descending"] .assignment-sort { color: var(--bastillion-accent); }
.assignment-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.assignment-footer > span { font-size: .8rem; color: var(--bastillion-muted); }
.assignment-footer > div { display: flex; gap: 10px; flex-shrink: 0; }
.assignment-footer .btn { text-decoration: none; }
@media (max-width: 767px) { .assignment-footer { flex-wrap: wrap; } }
/* Local icons remain visible when the security policy blocks data-URL images. */
.form-check-input[type="checkbox"]:not([role="switch"]):checked { background-image: url('../../../img/checkbox-check.svg'); background-size: 100% 100%; }
.form-check-input[type="checkbox"]:not([role="switch"]):indeterminate { background-image: url('../../../img/checkbox-mixed.svg'); background-size: 100% 100%; }
.script-dialog .modal-body .row { width: 100%; margin: 0; }
.script-dialog table { width: 100%; table-layout: fixed; }
.script-dialog td:first-child { width: 120px; }
.script-dialog textarea, .script-dialog input.form-control { width: 100%; }

.assignment-table td { overflow-wrap: anywhere; }
.assignment-panel > .empty-state { margin: 24px; }

/* Selected live terminals are command targets, in either app theme. */
.live-term-container .run_cmd_active {
    border-color: #22c55e;
    box-shadow: 0 0 0 2px #22c55e, 0 10px 24px rgba(0, 0, 0, .2);
}
.live-term-container .run_cmd_active .term-header {
    background: #14532d;
    color: #fff;
}
[data-bs-theme="light"] .live-term-container .run_cmd_active {
    border-color: #15803d;
    box-shadow: 0 0 0 2px #15803d, 0 8px 20px rgba(20, 83, 45, .18);
}
[data-bs-theme="light"] .live-term-container .run_cmd_active .term-header {
    background: #dcfce7;
    color: #14532d;
}

/* Keep authenticator enrollment compact and consistent with account settings. */
body > .container.otp-setup { max-width: 880px; }
.otp-setup h1 { font-size: 1.65rem; margin-bottom: 10px; }
.otp-setup > p { color: var(--bastillion-muted); margin-bottom: 24px; }
.otp-panel { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; padding: 28px; border: 1px solid var(--bastillion-border); border-radius: 12px; background: var(--bastillion-surface); }
.otp-code { align-self: start; padding: 12px; background: #fff; border-radius: 8px; }
.otp-code img { display: block; width: 100%; height: auto; }
.otp-instructions h2 { font-size: 1.1rem; margin: 0 0 16px; }
.otp-instructions ol { padding-left: 20px; font-size: .9rem; }
.otp-instructions li { margin-bottom: 10px; }
.otp-manual { font-size: .85rem; margin: 20px 0; }
.otp-manual summary { cursor: pointer; color: var(--bastillion-accent); }
.otp-manual code { display: block; padding-top: 12px; overflow-wrap: anywhere; user-select: all; }
.otp-note { color: var(--bastillion-muted); font-size: .85rem; margin: 0; }
.otp-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px solid var(--bastillion-border); }
@media (max-width: 650px) { .otp-panel { grid-template-columns: minmax(0, 1fr); padding: 20px; } .otp-code { width: 230px; justify-self: center; } }

/* Center table pages with room to scan, without spanning the entire desktop. */
.scrollableTable {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: auto;
}
.scrollableTable th,
.scrollableTable td {
    padding: 13px 22px;
    text-align: left;
}
.scrollableTable th:last-child,
.scrollableTable td:last-child { text-align: left; }
.scrollableTable td:last-child > div { justify-content: flex-start; }
.scrollableTable.selectionTable th:first-child,
.scrollableTable.selectionTable td:first-child {
    width: 44px;
    padding-inline: 12px;
    text-align: center;
}
.scrollWrapper { overflow-x: auto; }

/* Apply the same compact layout to profile assignments and long key identifiers. */
.assignment-panel { width: 100%; max-width: 100%; }
.assignment-table { width: 100%; min-width: 0; table-layout: auto; }
.assignment-table th, .assignment-table td { padding: 13px 22px; }
.assignment-check-column { width: 44px; }
.assignment-table th:first-child, .assignment-table td:first-child { padding-inline: 12px; }
.assignment-table .assignment-sort { white-space: nowrap; }
.scrollableTable .key-fingerprint { font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; max-width: 30rem; }
/* on key tables the fingerprint absorbs the wrapping, so the short columns stay on one line */
.scrollableTable tr:has(.key-fingerprint) td:not(.key-fingerprint) { white-space: nowrap; }
.scrollableTable th { white-space: nowrap; }
.scrollableTable td .btn { padding: 6px 12px; }

body > .container.table-page {
    width: calc(100% - 64px);
    max-width: 1080px;
    margin-inline: auto;
}
.table-page .scrollableTable td:last-child:has(.btn) { width: 1%; }
body > .container.table-page-wide { max-width: 1240px; }
@media (max-width: 767px) {
    body > .container.table-page { width: calc(100% - 32px); }
}

/* Draw assignment sort indicators consistently at every display scale. */
.assignment-sort-icon {
    position: relative;
    width: 8px;
    height: 14px;
    flex: 0 0 8px;
}
.assignment-sort-icon::before,
.assignment-sort-icon::after {
    content: "";
    position: absolute;
    left: 0;
    border-inline: 4px solid transparent;
}
.assignment-sort-icon::before { top: 1px; border-bottom: 4px solid currentColor; }
.assignment-sort-icon::after { bottom: 1px; border-top: 4px solid currentColor; }
th[aria-sort="ascending"] .assignment-sort-icon::after,
th[aria-sort="descending"] .assignment-sort-icon::before { visibility: hidden; }

/* Count of host keys currently refusing connections, in the navigation. A blocked host key
   otherwise only shows up as a failed session, so it needs to be visible without opening the
   Manage menu. */
.host-key-badge {
    margin-left: 0.4em;
    font-size: 0.7em;
    vertical-align: text-top;
}