body { font-family: Arial, sans-serif; margin: 20px; color: #222; background: #fafafa; }
h1 { font-size: 24px; } h2 { font-size: 20px; }
p { line-height: 1.4; } button, input, select { font: inherit; padding: 7px; }
button { cursor: pointer; margin: 4px 4px 4px 0; } button:disabled { cursor: default; }
button[aria-pressed="true"] { font-weight: bold; border: 2px solid #333; }
input, select { box-sizing: border-box; width: 100%; }
label { display: block; margin: 10px 0; }
input[type="checkbox"] { width: auto; }
fieldset { margin: 14px 0; border: 1px solid #bbb; padding: 12px; min-width: 0; }
details { margin: 12px 0; } summary { cursor: pointer; }
.layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 24px; }
aside { min-width: 0; border-left: 1px solid #bbb; padding-left: 20px; }
#requests { max-height: 78vh; overflow: auto; }
.request { border: 1px solid #bbb; background: white; margin: 10px 0; padding: 10px; overflow-wrap: anywhere; }
.request pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 300px; overflow: auto; }
.request a { font-size: 13px; }
.error { color: #a00000; } .success { color: #15551b; }
#message { padding: 8px 0; min-height: 20px; }
table { border-collapse: collapse; width: 100%; margin-top: 12px; font-size: 14px; }
td, th { border: 1px solid #ccc; padding: 7px; text-align: left; overflow-wrap: anywhere; }
td button { font-size: 12px; }
.roles { display: flex; gap: 12px; flex-wrap: wrap; }
.roles label { margin: 4px 0; }
[hidden] { display: none !important; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } aside { border-left: 0; border-top: 1px solid #bbb; padding: 0; } body { margin: 12px; } }
.services { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:1rem; border:1px solid #ccd4df; border-radius:8px; margin:1rem 0; }