/* Erpis OpsHub, in the Erpis family look (ErpisInfraManager renderer/style.css): navy #00285F frame, cool grey page,
   Archivo bundled in fonts/ (OFL; no third-party font request, see /privacy), Erpi the mascot. */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --app-bg: #edf1f7;
    --app-surface: #ffffff;
    --app-surface-muted: #f4f7fb;
    --app-border: #dae1eb;
    --app-border-strong: #c9d3e1;
    --app-text: #0b1f3a;
    --app-muted: #5a6a82;
    --app-link: #1458c4;
    --app-primary: #00285f;
    --app-primary-border: #00285f;
    --app-primary-hover: #0b3a82;
    --app-focus: #2a78d6;
    --app-side: #00285f;
    --app-side-bg: #00285f;
    --app-side-ink: #dbe6f5;
    --app-side-muted: #8ea7cc;
    --app-side-hover: rgba(255, 255, 255, .07);
    --app-side-on: rgba(255, 255, 255, .14);
    --app-good: #0a7a0a;
    --app-warn: #8a5a00;
    --app-crit: #b42b2b;
    --erpi-body: #00285f;
    --bs-body-font-family: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

html[data-theme="dark"] {
    --app-bg: #0a1020;
    --app-surface: #111a2e;
    --app-surface-muted: #16213a;
    --app-border: #243457;
    --app-border-strong: #31477a;
    --app-text: #eaf1fb;
    --app-muted: #9cb0cf;
    --app-link: #8ec2ff;
    --app-primary: #2f6fd8;
    --app-primary-border: #4c8ae8;
    --app-primary-hover: #3f80e6;
    --app-focus: #8ec2ff;
    --app-side: #0b2f6e;
    --app-side-bg: linear-gradient(180deg, #1449a6 0%, #0d3580 45%, #0a2862 100%);
    --app-side-ink: #e3edfb;
    --app-side-muted: #a9c3ec;
    --app-side-hover: rgba(255, 255, 255, .09);
    --app-side-on: rgba(255, 255, 255, .17);
    --app-good: #5fe28a;
    --app-warn: #ffd36b;
    --app-crit: #ff8a8a;
    --erpi-body: #3a74d6;
}

html, body {
    font-family: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: var(--app-bg);
    color: var(--app-text);
}

a, .btn-link {
    color: var(--app-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--app-primary);
    border-color: var(--app-primary-border);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: #fff;
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}

h1, h2, h3, .page-header h1 {
    font-stretch: 112%;
    font-weight: 720;
    letter-spacing: -0.005em;
}

/* Erpi (Components/Erpi.razor): one image per theme, one sentence in a bubble (as in ErpisProvisionMesPortalWeb). */
.erpi-note { display: flex; align-items: center; gap: 1rem; }
.erpi-note img { flex: none; }
.erpi-note .erpi-dark, html[data-theme="dark"] .erpi-note .erpi-light { display: none; }
html[data-theme="dark"] .erpi-note .erpi-dark { display: block; }
.erpi-bubble { position: relative; margin: 0; padding: .75rem 1rem; background: var(--app-surface); color: var(--app-text);
  border: 1px solid var(--app-border); border-radius: 16px; max-width: 34rem; }
.erpi-bubble p { margin: .2rem 0 0; color: var(--app-muted); }
.erpi-bubble::before { content: ""; position: absolute; left: -7px; top: calc(50% - 6px); width: 12px; height: 12px;
  background: inherit; border-left: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); transform: rotate(45deg); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--app-surface), 0 0 0 0.25rem var(--app-focus);
}

.content {
    padding-bottom: 2rem;
    padding-top: 1.4rem;
}

.page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    color: var(--app-text);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
}

.page-header p {
    color: var(--app-muted);
    margin: 0.25rem 0 0;
}

.ops-card,
.empty-state {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04);
    padding: 1rem;
}

.ops-card {
    min-height: 9rem;
}

.ops-card-label {
    color: var(--app-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.ops-card strong {
    color: var(--app-text);
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.ops-card p,
.empty-state p {
    color: var(--app-muted);
    margin-bottom: 0;
}

.empty-state {
    max-width: 48rem;
}

.empty-state h2 {
    color: var(--app-text);
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}

.toolbar {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    margin-bottom: 1rem;
}

.ops-table {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    overflow: hidden;
}

.ops-table .table {
    margin-bottom: 0;
}

.ops-form {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    max-width: 58rem;
    padding: 1rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.inline-form {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(12rem, 1fr) auto;
}

.section-title-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.detail-list {
    display: grid;
    gap: 0.25rem 1rem;
    grid-template-columns: 8rem minmax(0, 1fr);
    margin-bottom: 0;
}

.detail-list dt {
    color: var(--app-muted);
    font-weight: 700;
}

.detail-list dd {
    margin-bottom: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.release-checks {
    align-content: end;
    display: grid;
    gap: 0.25rem;
}

.permission-grid {
    display: grid;
    gap: 0.25rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.preserve-lines {
    white-space: pre-wrap;
}

.upload-row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(12rem, 1fr) auto;
}

.hash-text {
    display: block;
    font-size: 0.75rem;
    max-width: 32rem;
    overflow-wrap: anywhere;
}

.secret-preview {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-strong);
    border-radius: 8px;
    margin-bottom: 0;
    max-height: 18rem;
    overflow: auto;
    padding: 0.875rem;
    white-space: pre-wrap;
}

html[data-theme="dark"] .table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-hover-bg: #24303a;
    --bs-table-hover-color: var(--app-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--app-surface-muted);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--app-muted);
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .text-muted {
    color: var(--app-muted) !important;
}

@media (max-width: 720px) {
    .toolbar,
    .inline-form,
    .upload-row {
        grid-template-columns: 1fr;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Apps (store) page */
.apps-toolbar { max-width: 420px; margin-bottom: 1rem; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.app-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.app-card-head { display: flex; gap: .8rem; align-items: center; }
.app-icon { width: 64px; height: 64px; flex: none; border-radius: 14px; box-shadow: 0 0 0 1px var(--app-border); }
.app-avatar { width: 64px; height: 64px; font-size: 1.2rem; flex: none; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--app-primary); letter-spacing: .02em; }
.app-card-title { min-width: 0; }
.app-card-title h2 { font-size: 1.2rem; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.app-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--app-muted); font-size: .85rem; }
.app-version { font-weight: 600; color: var(--app-text); }
.app-description { margin: 0; color: var(--app-muted); }
.app-downloads { display: flex; flex-wrap: wrap; gap: .5rem; }
.app-download { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; padding: .4rem .8rem; }
.app-download small { opacity: .85; font-size: .75rem; }
.app-section summary { cursor: pointer; color: var(--app-link); font-size: .9rem; }
.app-notes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; margin-top: .4rem; padding: .6rem .7rem; background: var(--app-surface-muted); border-radius: 8px; max-height: 18rem; overflow: auto; }
.app-files { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .45rem; font-size: .85rem; }
.app-files li { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.app-file-name { overflow-wrap: anywhere; }
.app-files .hash-text { overflow-wrap: anywhere; font-size: .75rem; }
.app-file-links { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Privacy page */
.privacy-text { max-width: 860px; }
.privacy-text h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.privacy-text .ops-table { margin: .75rem 0 1rem; }

/* Sign-in (Program.cs RenderAuthPage): the product icon and Erpi on a soft panel, the form on the right; stacks on phones. */
.auth-body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px; background: var(--app-bg); color: var(--app-text); }
.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: min(940px, 100%); background: var(--app-surface);
  border: 1px solid var(--app-border); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px -28px rgba(0, 40, 95, .35); }
.auth-side { display: flex; flex-direction: column; gap: 18px; padding: 30px 30px 28px; background: var(--app-surface-muted);
  border-right: 1px solid var(--app-border); }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--app-text); text-decoration: none; }
.auth-brand img { flex: none; }
.auth-brand span { font-size: 1.25rem; font-stretch: 112%; line-height: 1.1; }
.auth-brand b { font-weight: 780; color: var(--app-primary); }
html[data-theme="dark"] .auth-brand b { color: var(--app-link); }
.auth-side .erpi-note { flex-direction: column; align-items: flex-start; margin-top: 8px; }
.auth-side .erpi-bubble { font-size: 1.05rem; }
.auth-side .erpi-bubble::before { left: 46px; top: -7px; transform: rotate(135deg); }
.auth-note { color: var(--app-muted); margin: auto 0 0; font-size: .9rem; max-width: 34ch; }
.auth-main { padding: 34px 36px 26px; display: flex; flex-direction: column; min-width: 0; }
.auth-main h1 { font-size: 1.9rem; margin: 0 0 .3rem; }
.auth-lead { color: var(--app-muted); margin: 0 0 1.2rem; }
.auth-form { display: flex; flex-direction: column; gap: .35rem; }
.auth-form .form-label { margin: .55rem 0 .1rem; font-weight: 600; }
.auth-form .form-check { margin: .7rem 0 .2rem; }
.auth-short { max-width: 9rem; }
.auth-code { max-width: 12rem; font-size: 1.5rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.auth-submit { margin-top: .9rem; align-self: flex-start; padding: .55rem 1.1rem; font-weight: 600; }
.auth-restart { margin-top: .6rem; font-size: .92rem; }
.auth-error { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--app-crit) 45%, transparent);
  background: color-mix(in srgb, var(--app-crit) 9%, var(--app-surface)); color: var(--app-crit); }
.auth-foot { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--app-border); color: var(--app-muted); font-size: .85rem; }
.auth-body .form-control { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border-strong); }

/* Account security: authenticator set-up, recovery codes. The QR stays black on white in both themes so phones read it. */
.auth-notice { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--app-link) 40%, transparent);
  background: color-mix(in srgb, var(--app-link) 8%, var(--app-surface)); color: var(--app-text); }
.auth-steps { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .3rem; }
.auth-qr { width: 196px; padding: 6px; background: #fff; border: 1px solid var(--app-border); border-radius: 12px; }
.auth-qr svg { display: block; width: 100%; height: auto; }
.auth-manual { margin: .8rem 0 .2rem; color: var(--app-muted); font-size: .92rem; }
.auth-manual summary { cursor: pointer; color: var(--app-link); }
.auth-manual p { margin: .4rem 0 0; }
.auth-key { font-size: 1rem; letter-spacing: .06em; color: var(--app-text); word-break: break-word; }
.auth-recovery { max-width: 16rem; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.auth-status { margin: 0 0 .6rem; line-height: 1.9; }
.auth-status .auth-badge { margin-right: .4rem; }
.auth-badge { padding: .15rem .55rem; border-radius: 999px; font-weight: 700; font-size: .85rem; color: var(--app-good);
  background: color-mix(in srgb, var(--app-good) 12%, var(--app-surface)); border: 1px solid color-mix(in srgb, var(--app-good) 40%, transparent); }
.auth-warn { color: var(--app-warn); margin: 0 0 .6rem; font-weight: 600; }
.auth-muted { color: var(--app-muted); font-size: .92rem; margin: 1rem 0 0; }
.auth-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .4rem; }
.auth-inline-form { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--app-border); }
.auth-inline-form .form-label { font-weight: 600; margin-bottom: .35rem; }
.auth-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.auth-code-sm { max-width: 10rem; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.auth-codes { list-style: none; margin: 0 0 .4rem; padding: .8rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem;
  background: var(--app-surface-muted); border: 1px dashed var(--app-border-strong); border-radius: 12px; }
.auth-codes code { font-size: 1.05rem; letter-spacing: .08em; color: var(--app-text); font-variant-numeric: tabular-nums; }
@media print { .auth-side, .auth-actions, .auth-foot { display: none; } .auth { box-shadow: none; border: 0; } }

/* Erpi hops once when the sign-in page opens: the only motion on the page. */
.auth-hop .erpi-note img { animation: erpi-hop 1.1s cubic-bezier(.3, .7, .4, 1) .3s 1 both; }
@keyframes erpi-hop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px); } 45% { transform: translateY(0); } 62% { transform: translateY(-4px); } 78% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .auth-hop .erpi-note img { animation: none; } }

@media (max-width: 720px) {
  .auth { grid-template-columns: 1fr; border-radius: 14px; }
  .auth-side { padding: 18px 20px; border-right: 0; border-bottom: 1px solid var(--app-border); gap: 10px; }
  .auth-side .erpi-note { flex-direction: row; align-items: center; margin: 0; }
  .auth-side .erpi-note img { width: 64px; height: 64px; }
  .auth-side .erpi-bubble { font-size: .95rem; }
  .auth-side .erpi-bubble::before { left: -7px; top: calc(50% - 6px); transform: rotate(45deg); }
  .auth-note { display: none; }
  .auth-main { padding: 22px 20px 20px; }
}

/* Admin home: one tile per area, the whole tile is the link. */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .75rem; }
.admin-tile { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--app-surface);
  border: 1px solid var(--app-border); border-radius: 12px; color: var(--app-text); text-decoration: none; }
.admin-tile:hover { border-color: var(--app-border-strong); background: var(--app-surface-muted); color: var(--app-text); }
.admin-tile:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.admin-tile-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px;
  background: var(--app-surface-muted); border: 1px solid var(--app-border); color: var(--app-primary); }
html[data-theme="dark"] .admin-tile-icon { color: var(--app-side-ink); }
.admin-tile-icon .nav-svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-tile-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.admin-tile-text strong { font-size: 1rem; }
.admin-tile-text span { color: var(--app-muted); font-size: .875rem; line-height: 1.35; }

/* Role guide on the users page. */
.role-guide dt { font-weight: 600; margin-top: .6rem; }
.role-guide dt:first-child { margin-top: 0; }
.role-guide dd { color: var(--app-muted); font-size: .9rem; margin: .1rem 0 0; }

/* Inline code reads as data, not as an error: the app's ink on a quiet tint instead of Bootstrap pink. */
code { color: var(--app-text); background: var(--app-surface-muted); border: 1px solid var(--app-border);
  border-radius: 4px; padding: .05rem .3rem; font-size: .85em; overflow-wrap: anywhere; }
pre code { border: 0; padding: 0; background: none; }

/* Definition lists in cards: long values (provider names, paths) wrap instead of running out of the card. */
.ops-card dd { overflow-wrap: anywhere; }

/* Idle sign-out warning (session-idle.js): bottom of the screen, above everything, until there is activity. */
#idle-warning { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 2000; max-width: min(92vw, 34rem);
  background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border-strong); border-left: 4px solid #e0a100;
  border-radius: 10px; padding: .75rem 1rem; box-shadow: 0 10px 30px -12px rgba(0, 20, 50, .45); font-size: .925rem; }