.scp-admin-shell {
    --scp-bg: #101719;
    --scp-panel: #182326;
    --scp-panel-raised: #202e32;
    --scp-border: #3a5055;
    --scp-text: #e1e9e8;
    --scp-muted: #a8b7b8;
    --scp-accent: #d7a24b;
    --scp-danger: #d9685f;
    min-height: 100vh;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-color: #718486 #101719;
    padding: 2rem clamp(1rem, 3vw, 3rem) 4rem;
    color: var(--scp-text);
    background:
        radial-gradient(ellipse at 85% 0%, rgb(53 77 78 / 22%), transparent 38rem),
        var(--scp-bg);
    font-family: "Segoe UI", Arial, sans-serif;
}

.scp-admin-shell::-webkit-scrollbar {
    width: .8rem;
}

.scp-admin-shell::-webkit-scrollbar-track {
    background: #101719;
}

.scp-admin-shell::-webkit-scrollbar-thumb {
    border: 2px solid #101719;
    border-radius: 99rem;
    background: #718486;
}

.scp-admin-shell h1,
.scp-admin-shell h2,
.scp-admin-shell h3,
.scp-admin-shell h4 {
    color: #f0f3ef;
    letter-spacing: .035em;
}

.scp-admin-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--scp-border);
    border-left: 4px solid var(--scp-accent);
    background: linear-gradient(110deg, #1d2b2e, #141e20 72%);
    box-shadow: 0 12px 30px rgb(0 0 0 / 22%);
}

.scp-admin-kicker,
.scp-admin-shell .text-muted,
.scp-admin-shell small,
.scp-admin-shell .form-text {
    color: var(--scp-muted) !important;
}

.scp-admin-panel {
    height: 100%;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--scp-border);
    border-radius: .55rem;
    background: linear-gradient(145deg, rgb(31 46 49 / 96%), rgb(20 30 32 / 98%));
    box-shadow: 0 10px 26px rgb(0 0 0 / 18%);
}

.scp-admin-shell .nav-tabs {
    gap: .5rem;
    border-bottom-color: var(--scp-border);
}

.scp-admin-shell .nav-tabs .nav-link {
    color: var(--scp-muted);
    border: 1px solid transparent;
    border-radius: .4rem .4rem 0 0;
}

.scp-admin-shell .nav-tabs .nav-link.active {
    color: #fff;
    border-color: var(--scp-border) var(--scp-border) var(--scp-panel);
    background: var(--scp-panel);
}

.scp-admin-shell .form-control,
.scp-admin-shell .form-select {
    color: #eef4f1;
    border-color: #52686c;
    background-color: #111a1c;
}

.scp-admin-shell .form-control:focus,
.scp-admin-shell .form-select:focus {
    border-color: var(--scp-accent);
    box-shadow: 0 0 0 .2rem rgb(215 162 75 / 20%);
}

.scp-admin-shell .form-control::placeholder {
    color: #829294;
}

.scp-admin-shell .list-group-item {
    color: var(--scp-text);
    border-color: var(--scp-border);
    background-color: #152023;
}

.scp-admin-shell .list-group-item:hover,
.scp-admin-shell .list-group-item:focus {
    color: #fff;
    background-color: #26383c;
}

.scp-admin-shell .form-check-input,
.scp-admin-shell input[type="checkbox"] {
    accent-color: var(--scp-accent);
}

.scp-admin-shell .btn-primary {
    border-color: #a9782d;
    background-color: #a9782d;
}

.scp-admin-shell .btn-primary:hover {
    border-color: #c18d38;
    background-color: #c18d38;
}

.scp-admin-shell .btn-outline-secondary {
    color: #d1dddc;
    border-color: #65787a;
}

.scp-admin-shell .btn-outline-secondary:hover {
    color: #fff;
    background: #34474a;
}

.archive-tree-panel {
    max-height: 70vh;
    overflow: auto;
    padding: .45rem;
    border: 1px solid var(--scp-border);
    border-radius: .4rem;
    background: #101719;
    scrollbar-color: #718486 #101719;
}

.archive-tree-branch {
    min-width: 0;
}

.archive-tree-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

.archive-tree-toggle,
.archive-tree-toggle-placeholder {
    display: inline-flex;
    flex: 0 0 1.65rem;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 2rem;
}

.archive-tree-toggle {
    padding: 0;
    border: 0;
    border-radius: .25rem;
    color: #c3d0cd;
    background: transparent;
    font-size: 1.1rem;
}

.archive-tree-toggle:hover,
.archive-tree-toggle:focus-visible {
    color: #fff;
    background: #2b3e41;
}

.archive-tree-entry {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .55rem;
    min-height: 2rem;
    padding-top: .22rem;
    padding-right: .45rem;
    padding-bottom: .22rem;
    border: 1px solid transparent;
    border-radius: .3rem;
    color: #dce7e4;
    background: transparent;
    text-align: left;
}

.archive-tree-folder {
    font-weight: 650;
}

.archive-tree-file {
    font-weight: 400;
}

.archive-tree-entry:hover,
.archive-tree-entry:focus-visible {
    border-color: #40585c;
    color: #fff;
    background: #203236;
}

.archive-tree-entry.selected {
    border-color: #c18d38;
    color: #fff4d8;
    background: #3a321f;
}

.archive-tree-icon {
    flex: 0 0 auto;
    font-size: 1rem;
}

.archive-tree-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.archive-tree-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .03rem .4rem;
    border: 1px solid #43585c;
    border-radius: 99rem;
    color: var(--scp-muted);
    font-size: .72rem;
    font-weight: 400;
}

.archive-tree-children {
    min-width: 0;
}

.grant-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.grant-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .55rem .35rem .75rem;
    border: 1px solid #6c633f;
    border-radius: 99rem;
    color: #f4e4b9;
    background: #342d1d;
    font: 600 .84rem ui-monospace, Consolas, monospace;
}

.grant-chip button {
    padding: 0 .15rem;
    border: 0;
    color: #f4b2a8;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
}

.selection-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.selection-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem .3rem .7rem;
    border: 1px solid #496267;
    border-radius: 99rem;
    color: #deebe8;
    background: #1d3033;
    font-size: .84rem;
}

.selection-chip button {
    padding: 0 .15rem;
    border: 0;
    color: #ffaaa0;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
}

.grant-key-table code {
    color: #e7c47b;
    font-size: .95rem;
}

.catalog-key-card {
    margin-bottom: .85rem;
    padding: 1rem;
    border: 1px solid var(--scp-border);
    border-left: 3px solid var(--scp-accent);
    border-radius: .4rem;
    background: #111a1c;
}

.grant-catalog-list {
    max-height: 60vh;
    overflow-y: auto;
}

.grant-catalog-list .list-group-item {
    gap: .75rem;
}

.metadata-editor {
    padding: 1rem;
    border: 1px solid var(--scp-border);
    border-radius: .5rem;
    background: #111a1c;
}

.metadata-object {
    min-width: 0;
    margin: 0;
    padding: .8rem;
    border: 1px solid #35494d;
    border-radius: .4rem;
}

.metadata-object legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 .45rem;
    color: #e6bd70;
    font-size: .95rem;
    font-weight: 700;
}

.metadata-object-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: .75rem;
}

.metadata-array {
    grid-column: 1 / -1;
    padding: .8rem;
    border: 1px solid #34484c;
    border-radius: .4rem;
    background: rgb(255 255 255 / 2%);
}

.metadata-array-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.metadata-array-header h3 {
    margin: 0;
    font-size: .92rem;
}

.metadata-array-add {
    display: flex;
    align-items: end;
    gap: .6rem;
    margin-bottom: .75rem;
}

.metadata-array-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .6rem;
    margin-top: .55rem;
    padding: .65rem;
    border: 1px solid #34484c;
    border-radius: .35rem;
    background: #172225;
}

.metadata-array-item > .metadata-field,
.metadata-array-item > .metadata-object {
    grid-column: 1;
}

.metadata-array-item > .metadata-remove {
    grid-column: 2;
    grid-row: 1;
}

.metadata-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    color: #d8e3e1;
    font-size: .88rem;
}

.metadata-checkbox {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.8rem;
    padding: .5rem .65rem;
    border: 1px solid #34484c;
    border-radius: .35rem;
    color: #e2e9e7;
    background: #172225;
}

.metadata-empty {
    margin: .4rem 0 0;
    color: var(--scp-muted);
    font-size: .85rem;
}

.metadata-error {
    color: #ff9e92;
}

.story-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.story-source {
    min-height: 15rem;
    line-height: 1.65;
}

.story-preview {
    border: 1px solid #3d5559 !important;
    background: #080e10 !important;
    box-shadow: inset 0 0 24px rgb(0 0 0 / 35%);
}

@media (max-width: 700px) {
    .scp-admin-shell {
        padding: 1rem .75rem 2rem;
    }

    .metadata-array-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .metadata-array-add {
        align-items: stretch;
        flex-direction: column;
    }

    .metadata-array-item > .metadata-remove {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}