body { margin: 0; font-family: system-ui, sans-serif; background: #f7f7f8; color: #1f2937; }
.topbar { display: flex; justify-content: space-between; padding: 1rem 2rem; background: #111827; }
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar a { color: white; text-decoration: none; margin-right: 1rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.role-badge { display: inline-block; background: #e5e7eb; color: #111827; border-radius: 4px; padding: .15rem .4rem; font-size: .85rem; }
.logout-form { display: inline; margin: 0; }
.logout-button { background: transparent; color: white; border: 1px solid #4b5563; border-radius: 4px; padding: .45rem .65rem; cursor: pointer; }
.container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
.page-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.page-header h1 { margin: 0 0 .5rem; }
.page-header p { margin: 0; max-width: 720px; color: #4b5563; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.info-panel, .login-panel, .auth-panel { background: white; border: 1px solid #d1d5db; border-radius: 6px; padding: 1rem; }
.info-panel h2, .login-panel h2 { margin-top: 0; }
.auth-panel { max-width: 720px; }
.auth-panel-narrow { max-width: 460px; margin: 0 auto; }
.auth-panel h1 { margin-top: 0; }
.auth-panel form p { margin: .75rem 0; }
.auth-panel label { display: block; font-weight: 600; margin-bottom: .25rem; }
.auth-panel input, .auth-panel select { width: 100%; box-sizing: border-box; }
.auth-panel .float-right { float: right; }
.btn { display: inline-block; border: 1px solid #9ca3af; background: white; color: #111827; text-decoration: none; border-radius: 4px; padding: .55rem; margin: .25rem 0; cursor: pointer; }
.btn-primary { background: #111827; color: white; border-color: #111827; }
.btn-secondary { background: #e5e7eb; color: #111827; border-color: #d1d5db; }
.btn-link { border: 0; background: transparent; color: #1d4ed8; padding-left: 0; padding-right: 0; }
.btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.panel { display: block; background: white; color: #1f2937; text-decoration: none; border: 1px solid #d1d5db; padding: 1rem; border-radius: 6px; }
.panel strong { display: block; margin-bottom: .5rem; }
.panel span { color: #4b5563; }
.form-panel { background: white; border: 1px solid #d1d5db; padding: 1rem; border-radius: 6px; max-width: 720px; }
.form-panel label { display: block; font-weight: 600; margin-bottom: .25rem; }
.form-panel input, .form-panel select, .form-panel textarea { width: 100%; box-sizing: border-box; }
.helptext { display: block; color: #6b7280; margin-top: .25rem; }
.form-guidance { color: #4b5563; border-top: 1px solid #d1d5db; padding-top: 1rem; }
.documentation-section { margin: 0 0 2rem; }
.documentation-section h2 { margin-bottom: .5rem; }
pre { overflow-x: auto; background: #111827; color: #f9fafb; border: 1px solid #374151; padding: 1rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
table { border-collapse: collapse; width: 100%; background: white; }
th, td { border: 1px solid #d1d5db; padding: .6rem; text-align: left; vertical-align: top; }
th { background: #e5e7eb; }
.ci-depth-1 { padding-left: 1.5rem; }
.ci-depth-2 { padding-left: 3rem; }
.ci-depth-3 { padding-left: 4.5rem; }
.ci-depth-4 { padding-left: 6rem; }
input, select, button, .button { padding: .55rem; margin: .25rem 0; }
.button { display: inline-block; border: 1px solid #9ca3af; background: white; color: #111827; text-decoration: none; border-radius: 4px; }
.button.primary { background: #111827; color: white; border-color: #111827; }
.button.full-width { display: block; text-align: center; box-sizing: border-box; }
.searchform { background: white; padding: 1rem; border: 1px solid #d1d5db; margin-bottom: 1rem; }
.message { background: #ecfdf5; border: 1px solid #10b981; padding: .75rem; margin-bottom: 1rem; }
.message.error, .form-errors, .errorlist { color: #991b1b; background: #fef2f2; border: 1px solid #fca5a5; padding: .75rem; margin: .5rem 0; }
@media (max-width: 720px) {
  .topbar, .topbar nav, .page-header { flex-direction: column; align-items: flex-start; }
  .home-grid { grid-template-columns: 1fr; }
}