html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.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;
}

@font-face { font-display: swap; font-family: "Manrope"; font-style: normal; font-weight: 200 800; src: local("Manrope"); }
:root { color-scheme: light; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body, button, input, select, textarea { font: inherit; }
body { color: #25282a; margin-bottom: 0; }
a { color: #b5121b; }
a:hover { color: #8f0e15; }
:focus-visible { outline: 3px solid #040707; outline-offset: 3px; }
h1, h2, h3 { color: #040707; line-height: 1.15; }
.app-shell { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }
.app-rail { background: #202427; color: #fff; display: flex; flex-direction: column; padding: 1.6rem 1rem; }
.brand { border-bottom: 1px solid #41474b; color: #fff; display: grid; gap: .15rem; padding: 0 .75rem 1.5rem; text-decoration: none; }
.brand:hover { color: #fff; }
.brand-word { font-size: 1.2rem; font-weight: 800; letter-spacing: -.04em; }
.brand-word span { color: #ed1c24; }
.brand small { color: #adb5ba; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.app-rail nav { display: grid; gap: .28rem; margin-top: 1.5rem; }
.app-rail nav a { align-items: center; border-radius: .55rem; color: #dce0e2; display: flex; font-size: .9rem; font-weight: 650; gap: .75rem; padding: .72rem .8rem; text-decoration: none; }
.app-rail nav a span { color: #9ca4aa; width: 1.1rem; }
.app-rail nav a:hover, .app-rail nav a.active { background: #33383c; color: #fff; }
.app-rail nav a.active { box-shadow: inset .22rem 0 #ed1c24; }
.app-rail nav a.active span { color: #ed1c24; }
.rail-note { align-items: center; color: #aeb5b9; display: flex; font-size: .76rem; gap: .55rem; margin: auto .75rem 0; }
.status-dot { background: #ed1c24; border-radius: 50%; height: .48rem; width: .48rem; }
.app-workspace { background: #f5f6f7; display: flex; flex-direction: column; min-width: 0; }
.topbar { align-items: center; background: #fff; border-bottom: 1px solid #d9dee2; display: flex; justify-content: space-between; min-height: 4.8rem; padding: .8rem clamp(1.25rem, 3vw, 2.5rem); }
.topbar > div:first-child { display: grid; gap: .15rem; }
.topbar strong { color: #040707; font-size: .94rem; }
.topbar span { color: #5b6166; font-size: .75rem; }
.topbar-actions { align-items: center; display: flex; gap: .8rem; }
.topbar .prototype-pill { background: #fff2f2; border: 1px solid #f2c5c7; border-radius: 999px; color: #9b1118; font-weight: 750; padding: .38rem .65rem; }
.user-button { background: #fff; border: 1px solid #d9dee2; border-radius: .5rem; color: #25282a; cursor: default; padding: .55rem .75rem; }
.page-content { flex: 1 0 auto; margin: 0 auto; max-width: 96rem; padding: clamp(1.5rem, 3vw, 2.75rem); width: 100%; }
.app-footer { border-top: 1px solid #d9dee2; color: #697075; display: flex; font-size: .74rem; justify-content: space-between; padding: 1rem clamp(1.25rem, 3vw, 2.5rem); }
.page-heading { align-items: flex-end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 1.5rem; }
.page-heading h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.035em; margin: .15rem 0 .45rem; }
.page-heading > div > p:last-child { color: #5b6166; margin: 0; max-width: 58ch; }
.eyebrow { color: #b5121b; font-size: .72rem; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.primary-action { background: #b5121b; border: 0; border-radius: .5rem; color: #fff; font-weight: 750; padding: .78rem 1rem; white-space: nowrap; }
.primary-action:disabled { cursor: not-allowed; opacity: .48; }
.prototype-banner { align-items: center; background: #fff9f1; border: 1px solid #ecd9bd; border-radius: .65rem; display: flex; gap: 1rem; margin-bottom: 1.25rem; padding: .9rem 1rem; }
.prototype-banner strong { color: #7d4b00; white-space: nowrap; }
.prototype-banner span { color: #675945; font-size: .87rem; }
.metric-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card, .panel { background: #fff; border: 1px solid #d9dee2; border-radius: .85rem; box-shadow: 0 .55rem 1.5rem rgba(24, 31, 35, .045); }
.metric-card { display: grid; gap: .32rem; padding: 1.25rem; }
.metric-label { color: #5b6166; font-size: .78rem; font-weight: 720; }
.metric-card strong { color: #040707; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.metric-card small { color: #737a7f; }
.dashboard-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .8fr); margin-top: 1rem; }
.panel { min-height: 22rem; padding: 1.25rem; }
.panel > header { align-items: flex-start; border-bottom: 1px solid #e6e9eb; display: flex; justify-content: space-between; padding-bottom: 1rem; }
.panel h2 { font-size: 1.15rem; margin: .2rem 0 0; }
.panel header a { font-size: .8rem; font-weight: 700; text-decoration: none; }
.empty-state { align-items: center; color: #697075; display: flex; flex-direction: column; height: 16rem; justify-content: center; text-align: center; }
.empty-state > span { color: #b8bec2; font-size: 2.2rem; }
.empty-state strong { color: #25282a; margin-top: .7rem; }
.empty-state p { font-size: .86rem; margin: .35rem 0 0; }
.activity-list { list-style: none; margin: 0; padding: .5rem 0 0; }
.activity-list li { align-items: flex-start; border-bottom: 1px solid #edf0f1; display: flex; gap: .8rem; padding: 1rem .15rem; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list div { display: grid; gap: .18rem; }
.activity-list strong { color: #25282a; font-size: .84rem; }
.activity-list small { color: #737a7f; }
.activity-marker { background: #b5121b; border-radius: 50%; box-shadow: 0 0 0 .25rem #fdebed; height: .5rem; margin-top: .32rem; width: .5rem; }
.activity-marker.muted { background: #9ca4aa; box-shadow: 0 0 0 .25rem #eef0f1; }
@media (max-width: 70rem) { .metric-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 58rem) { .app-shell { grid-template-columns: 1fr; } .app-rail { display: none; } }
@media (max-width: 38rem) { .topbar > div:first-child span, .prototype-pill { display: none; } .app-footer { align-items: flex-start; flex-direction: column; gap: .35rem; } .page-heading { align-items: flex-start; flex-direction: column; } .prototype-banner { align-items: flex-start; flex-direction: column; gap: .3rem; } .metric-grid { grid-template-columns: 1fr; } }

.brand-company { font-size: .95rem; font-weight: 800; line-height: 1.2; }
.affiliation-logo { display: block; height: 2.35rem; max-width: 12.5rem; object-fit: contain; object-position: left center; }
.webvault-logo-frame { background: #fff; border-radius: .45rem; display: block; height: 3rem; overflow: hidden; position: relative; width: 10rem; }
.webvault-logo-frame img { height: 12.5rem; left: -1.15rem; max-width: none; position: absolute; top: -4.2rem; width: 12.5rem; }
.topbar-actions form { margin: 0; }
.affiliation-pill { background: #eef0f1; border-radius: 999px; color: #4d5357 !important; font-weight: 720; max-width: 14rem; overflow: hidden; padding: .38rem .65rem; text-overflow: ellipsis; white-space: nowrap; }
.inline-action { display: inline-block; text-decoration: none; }
.inline-action:hover { background: #8f0e15; color: #fff; }
.subtle-button { background: #fff; border: 1px solid #cfd4d7; border-radius: .5rem; color: #25282a; font-weight: 700; padding: .72rem .9rem; text-decoration: none; }
.subtle-button:hover { background: #f0f2f3; color: #040707; }
.status-badge { background: #fbe9ea; border-radius: 999px; color: #8f0e15; display: inline-block; font-size: .7rem; font-weight: 760; margin-left: .5rem; padding: .25rem .48rem; }
.status-badge.muted { background: #eef0f1; color: #5b6166; }
.status-text { font-size: .8rem; font-weight: 720; }
.status-text.ok { color: #246b3e; }
.status-text.muted { color: #697075; }
.table-panel { min-height: 0; overflow-x: auto; padding: 0; }
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td { border-bottom: 1px solid #e6e9eb; padding: .9rem 1rem; text-align: left; vertical-align: middle; }
.data-table th { background: #f9fafb; color: #5b6166; font-size: .72rem; letter-spacing: .045em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.form-panel { min-height: 0; }
.admin-form { display: grid; gap: 1.25rem; }
.form-grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid > div { display: grid; gap: .4rem; }
.admin-form label, .auth-form label { color: #25282a; font-size: .82rem; font-weight: 720; }
.admin-form input[type="text"], .admin-form input[type="file"], .auth-form input { background: #fff; border: 1px solid #bfc5c9; border-radius: .5rem; color: #040707; min-height: 2.85rem; padding: .65rem .75rem; width: 100%; }
.admin-form input:focus, .auth-form input:focus { border-color: #b5121b; box-shadow: 0 0 0 .2rem rgba(181, 18, 27, .12); outline: 0; }
.admin-form small { color: #697075; line-height: 1.45; }
.check-row { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.check-row label, .check-field { align-items: center; display: flex; gap: .5rem; }
.check-row input, .check-field input { accent-color: #b5121b; height: 1rem; width: 1rem; }
.server-list { display: grid; }
.server-row { align-items: center; border-bottom: 1px solid #e6e9eb; display: flex; justify-content: space-between; padding: 1rem .15rem; }
.server-row div { display: grid; gap: .2rem; }
.server-row small { color: #697075; }

.login-body { background: #202427; color: #25282a; display: flex; flex-direction: column; margin: 0; min-height: 100vh; }
.login-shell { display: grid; flex: 1; grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1fr); margin: auto; max-width: 68rem; padding: clamp(1rem, 5vw, 4rem); width: 100%; }
.login-brand { align-content: center; background: #292e31; border: 1px solid #3e4549; border-radius: 1rem 0 0 1rem; color: #cbd0d3; display: grid; padding: clamp(2rem, 5vw, 4.5rem); }
.login-brand h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.7rem); letter-spacing: -.05em; margin: .25rem 0 .8rem; }
.login-brand p:last-child { line-height: 1.65; max-width: 30ch; }
.neutral-mark { align-items: center; background: #ed1c24; border-radius: .8rem; color: #fff; display: flex; font-size: 1.05rem; font-weight: 850; height: 3.25rem; justify-content: center; letter-spacing: -.06em; margin-bottom: 2.4rem; width: 3.25rem; }
.login-card { align-self: stretch; background: #fff; border-radius: 0 1rem 1rem 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.login-card h2 { font-size: 1.8rem; letter-spacing: -.035em; margin: .25rem 0 .65rem; }
.form-intro { color: #5b6166; line-height: 1.55; margin: 0 0 1.4rem; }
.auth-form { display: grid; gap: .48rem; }
.auth-form .primary-action { margin-top: .8rem; min-height: 3rem; }
.auth-help { color: #697075; font-size: .75rem; line-height: 1.55; margin: 1.25rem 0 0; }
.field-error, .validation-summary { color: #a80f17; font-size: .78rem; }
.validation-summary:empty { display: none; }
.validation-summary ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.subtle-link { font-size: .8rem; font-weight: 700; margin-top: 1.2rem; }
.login-footer { align-items: center; background: #171a1c; color: #8f989e; display: flex; font-size: .68rem; gap: 1rem; justify-content: space-between; padding: .9rem clamp(1rem, 5vw, 4rem); }
.setup-key { background: #f4f5f6; border: 1px solid #d9dee2; border-radius: .6rem; display: grid; gap: .35rem; margin: .5rem 0; padding: .85rem; }
.setup-key span { color: #697075; font-size: .7rem; font-weight: 760; text-transform: uppercase; }
.setup-key code { font-size: 1rem; overflow-wrap: anywhere; }
.recovery-panel h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.recovery-codes { display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.recovery-codes li { background: #f4f5f6; border-radius: .35rem; padding: .45rem .55rem; }
.maintenance-body { align-items: center; background: #202427; display: flex; justify-content: center; margin: 0; min-height: 100vh; padding: 1rem; }
.maintenance-card { background: #fff; border-radius: 1rem; max-width: 38rem; padding: 3rem; }
.maintenance-card h1 { font-size: 2rem; letter-spacing: -.04em; }
.maintenance-card p:last-child { color: #5b6166; line-height: 1.6; }

@media (max-width: 48rem) {
  .login-shell { grid-template-columns: 1fr; max-width: 38rem; }
  .login-brand { border-radius: 1rem 1rem 0 0; padding: 2rem; }
  .login-brand p:last-child { display: none; }
  .neutral-mark { margin-bottom: 1.25rem; }
  .login-card { border-radius: 0 0 1rem 1rem; padding: 2rem; }
  .login-footer { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
}
