:root { color-scheme: light; font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-header-height: 4rem; --app-green: #5f8278; --app-green-strong: #3f685e; --app-green-dark: #23443d;
  --app-green-pale: #e8f0ed; --app-white: #fff; --app-text: #2f3b45; --app-border: #c8cfd5;
  color: var(--app-text); background: #f4f4f4; }
* { box-sizing: border-box; } body { margin: 0; }
main, #message { max-width: 1400px; margin: 1rem auto; padding-inline: 1.5rem; }
.app-header { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; min-height: var(--app-header-height);
  padding: .55rem 1rem; background: linear-gradient(to bottom, var(--app-green), var(--app-green-strong) 52%, var(--app-green-dark));
  border-bottom: 1px solid var(--app-green-dark); box-shadow: 0 1px 0 var(--app-green) inset, 0 2px 7px #0003; color: white; }
.app-brand { flex: 0 0 auto; } .app-brand strong, .app-brand span { display: block; }
.app-brand span { font-size: .82rem; color: var(--app-green-pale); }
.header-navigation, .app-navigation-viewport { display: flex; min-width: 0; max-width: 100%; }
.header-navigation { flex: 1; } .app-navigation-viewport { overflow-x: auto; }
.main-navigation { display: flex; align-items: stretch; }
.app-header .menu-button { background: transparent; color: white; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; padding: .4rem .8rem; font: inherit; font-weight: 650; white-space: nowrap; text-decoration: none; margin: 0; }
.app-header .menu-button:hover, .app-header .menu-button:focus-visible { background: var(--app-green-strong); border-bottom-color: white; }
.menu-button[aria-current="page"] { background: var(--app-green-dark); border-bottom-color: white; }
#identity { overflow-wrap: anywhere; font-size: .85rem; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; }
section, .login { padding: 1.5rem; background: white; border: 1px solid var(--app-border); border-radius: .35rem; margin: 1rem 0; }
.login { max-width: 32rem; margin: 3rem auto; }
label { display: block; margin: .7rem 0; } input, select { display: block; box-sizing: border-box; padding: .55rem; width: 100%; max-width: 38rem; font: inherit; }
button { font: inherit; cursor: pointer; padding: .55rem .8rem; background: var(--app-green-strong); color: white; border: 1px solid var(--app-green-dark); border-radius: .3rem; margin: .4rem 0; }
button:disabled { opacity: .5; cursor: default; } :focus-visible { outline: 3px solid #ba7600; outline-offset: 3px; }
fieldset { border: 0; margin: 0; padding: 0; } .scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { padding: .7rem; border-bottom: 1px solid #d9e1e7; text-align: left; overflow-wrap: anywhere; }
tr.failed { color: #9c182a; background: #fff1f2; } #message { color: #9c182a; } [hidden] { display: none !important; }
.skip-link { position: absolute; top: -5rem; left: 1rem; background: white; padding: 1rem; z-index: 1300; }
.skip-link:focus { top: .5rem; }
.diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.diagnostic { border: 1px solid var(--app-border); border-radius: .35rem; padding: 1rem; min-width: 0; }
.diagnostic summary { cursor: pointer; font-weight: 650; }
.health-status { display: inline-block; padding: .1rem .45rem; margin-left: .5rem; font-size: .85rem; border: 1px solid currentColor; border-radius: .25rem; }
.health-ok { color: #255637; background: #edf8ee; } .health-degraded { color: #725100; background: #fff6d9; }
.health-error { color: #9c182a; background: #fff1f2; } .health-unknown, .health-not_configured { color: #4b5660; background: #eef0f2; }
.diagnostic dl { margin: .6rem 0; } .diagnostic dt { font-weight: 600; } .diagnostic dd { margin: 0 0 .65rem .5rem; overflow-wrap: anywhere; }
.diagnostic ul { padding-left: 1.25rem; } .diagnostic li { margin-block: .5rem; }
.directory-list { list-style: none; padding: 0; }
.directory-list > li { border-bottom: 1px solid var(--app-border); padding: 1rem 0; overflow-wrap: anywhere; }
.directory-list form { background: #f4f7f6; padding: 1rem; border-radius: .3rem; }
.technical-id { overflow-wrap: anywhere; }
#directory { padding: 0; border: 0; background: transparent; }
#directory legend { font-weight: 650; padding: .5rem 0; }
@media (max-width: 800px) {
  .header-navigation { order: 3; flex-basis: 100%; } .app-brand { flex: 1; }
  .app-header { gap: .5rem; } main, #message { padding-inline: .65rem; } section { padding: 1rem; }
  .login { margin: 1rem; } #identity { max-width: 40%; }
}