:root {color-scheme:light; font-family:system-ui,sans-serif; background:#edf2f7;}
body {margin:0;}
#serra-demo .cs-phone {color-scheme:light;}
#serra-demo .cs-phone.supervisor {max-width:1180px;}
#serra-demo button {cursor:pointer;}
#serra-demo button:disabled {cursor:wait;opacity:.55;}
#serra-demo input:read-only {background:var(--cs-soft);color:var(--cs-muted);}
#serra-demo #account {padding:12px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--cs-line);}
#serra-demo #account small {display:block;color:var(--cs-muted);}
#serra-demo #account button {font-size:13px;min-height:40px;}
#serra-demo #message {margin:18px 22px 0;padding:14px;border:1px solid #adcee8;border-radius:10px;background:#eaf5ff;overflow-wrap:anywhere;}
#serra-demo #message.error {background:#fff1ec;border-color:#e8af99;color:#8c3213;}
#serra-demo #message.success {background:#ebf7f0;border-color:#a0d1b5;color:#1c6541;}
#serra-demo footer {padding:14px;text-align:center;font-size:11px;color:var(--cs-muted);border-top:1px solid var(--cs-line);}
#serra-demo .login-button {width:100%;margin:10px 0 20px;}
#serra-demo .filters {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px;padding:4px 18px 18px;background:var(--cs-soft);border-radius:14px;margin:20px 0;}
#serra-demo .filters label {margin:12px 0 0;}
#serra-demo .filter-actions {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
#serra-demo .results-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 16px;flex-wrap:wrap;}
#serra-demo .results-heading p {margin:0;}
#serra-demo .table-wrap {overflow-x:auto;border:1px solid var(--cs-line);border-radius:12px;}
#serra-demo table {border-collapse:collapse;width:100%;font-size:13px;text-align:left;}
#serra-demo th {background:var(--cs-soft);white-space:nowrap;}
#serra-demo th,#serra-demo td {padding:13px 12px;border-bottom:1px solid var(--cs-line);}
#serra-demo td {vertical-align:top;}
#serra-demo td button {min-height:36px;padding:6px 10px;font-size:12px;}
#serra-demo .pager {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;}
#serra-demo .empty {padding:30px;text-align:center;background:var(--cs-soft);border-radius:12px;}
#serra-demo .protocol {font-family:ui-monospace,monospace;overflow-wrap:anywhere;font-size:12px;}
#serra-demo .details {max-width:650px;}
#serra-demo .status-line {font-size:12px;margin-top:10px;}
@media(max-width:760px){#serra-demo .filters{grid-template-columns:1fr 1fr;}#serra-demo .cs-phone.supervisor{border-radius:16px;}#serra-demo .supervisor main{padding:20px 14px;}}
@media(max-width:400px){#serra-demo .filters{grid-template-columns:1fr;}#serra-demo .cs-header{gap:8px;}#serra-demo .cs-brand{font-size:30px;}}

#serra-demo .access-tabs {margin:0 0 20px;}
#serra-demo .access-tabs button[aria-pressed="true"] {background:white;box-shadow:0 1px 4px #b7c9da;}
#serra-demo .account-actions {display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
#serra-demo #password-form {max-width:440px;}
@media(max-width:420px){#serra-demo #account{align-items:flex-start;flex-wrap:wrap;}#serra-demo .account-actions{width:100%;justify-content:flex-start;}}