:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: #edf2f6; }
.topbar { display: flex; align-items: center; gap: 18px; flex: none; padding: 9px 18px; background: #142b3b; color: #fff; box-shadow: 0 2px 8px #0003; z-index: 2; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; line-height: 1.15; }
.brand-mark { color: #77d6b8; font-size: 35px; }
.brand strong { display: block; font-size: 19px; letter-spacing: .02em; }
.brand-subtitle { display: block; margin-top: 3px; color: #b7cbd8; font-size: 12px; }
nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
nav a { padding: 10px 12px; border-radius: 6px; color: #d7e4ed; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
nav a:hover { background: #ffffff12; color: #fff; }
nav a[aria-current="page"] { background: #78d9bc; color: #0b3329; }
a:focus-visible, button:focus-visible, main:focus-visible { outline: 3px solid #ffc75d; outline-offset: 2px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #426075; border-radius: 6px; background: transparent; color: #d7e4ed; font: inherit; font-size: 20px; cursor: pointer; }
.theme-toggle:hover { background: #ffffff12; }
.standalone { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid #426075; border-radius: 6px; color: #d7e4ed; font-size: 25px; text-decoration: none; }
.standalone:hover { background: #ffffff12; color: #fff; }
main { position: relative; flex: 1; min-height: 0; min-width: 0; }
.view-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.view-frame[hidden], .loading[hidden] { display: none; }
.loading { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 10px 18px; border-radius: 8px; background: #fff; color: #24445a; box-shadow: 0 2px 10px #0002; z-index: 1; }
.loading a { display: block; margin-top: 8px; color: #16567e; }
.loading a[hidden] { display: none; }
.skip-link { position: absolute; top: -60px; left: 10px; padding: 10px; background: #fff; color: #142b3b; z-index: 3; }
.skip-link:focus { top: 8px; }
.no-script { position: absolute; top: 180px; margin: 20px; padding: 20px; background: #fff; }
html.trcnet-dark { color-scheme: dark; }
html.trcnet-dark body { background: #0f172a; }
html.trcnet-dark .loading { background: #1e293b; color: #e2e8f0; }
html.trcnet-dark .loading a { color: #93c5fd; }
html.trcnet-light .topbar { background: #f8fafc; color: #182f42; }
html.trcnet-light .brand-mark { color: #087f68; }
html.trcnet-light .brand-subtitle { color: #5c7282; }
html.trcnet-light nav a { color: #27485f; }
html.trcnet-light nav a:hover { background: #e2e8f0; }
html.trcnet-light nav a[aria-current="page"] { background: #b9efdb; color: #0b3329; }
html.trcnet-light .standalone, html.trcnet-light .theme-toggle { color: #27485f; border-color: #c1cfda; }
html.trcnet-light .standalone:hover, html.trcnet-light .theme-toggle:hover { background: #e2e8f0; }
@media (max-width: 1150px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .brand { flex: 1; }
  .brand-mark { font-size: 27px; }
  .brand strong { font-size: 16px; }
  .brand-subtitle { display: inline; margin-left: 6px; font-size: 12px; }
  .brand strong { display: inline; }
  nav { order: 3; flex-basis: 100%; }
  nav a { flex: 1 0 auto; text-align: center; padding: 9px 10px; }
  .standalone { width: 32px; height: 32px; font-size: 22px; }
  .theme-toggle { width: 32px; height: 32px; font-size: 18px; }
}
@media (max-width: 480px) {
  .topbar { padding: 7px 9px; gap: 6px; }
  nav { gap: 3px; }
  nav a { padding: 8px 9px; font-size: 12px; }
}