:root { color-scheme: light; --bg:#f5f7f8; --surface:#fff; --text:#24313c; --muted:#586978; --border:#d9e1e6; --blue:#125fac; --green:#1acb7d; --focus:#096cc6; font-family:system-ui,-apple-system,sans-serif; letter-spacing:0; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#171b20; --surface:#20262c; --text:#edf2f6; --muted:#afbac3; --border:#3a454e; --blue:#76b6ff; --focus:#7db8fb; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-size:15px; }
.topbar { min-height:76px; padding:16px 32px; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand,.account { display:flex; align-items:center; gap:18px; } .brand img { display:block; width:142px; height:auto; } .brand span { border-left:1px solid var(--border); padding-left:18px; color:var(--muted); }
main { max-width:1100px; margin:0 auto; padding:48px 28px; } h1 { font-size:28px; margin:0; font-weight:650; } .eyebrow { font-size:12px; color:var(--muted); margin:0 0 8px; }
.page-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; } .search-label { display:grid; gap:7px; font-size:13px; color:var(--muted); width:min(320px,100%); }
input { width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); font:inherit; }
button,.primary { font:inherit; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:6px; padding:9px 14px; min-height:40px; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; gap:8px; }
button:disabled { cursor:wait; opacity:.65; } button:hover { border-color:var(--blue); } button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.icon-button { width:40px; padding:0; font-size:20px; } .primary { background:linear-gradient(110deg,#176cae,#087666); border-color:#15947b; color:#fff; font-weight:600; } .primary:hover { filter:brightness(1.08); }
.office-list { display:grid; gap:12px; } .office { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--green); border-radius:6px; padding:22px 24px; display:flex; align-items:center; gap:20px; }
.office-icon { width:42px; height:42px; background:color-mix(in srgb,var(--blue) 10%,transparent); border-radius:6px; display:grid; place-items:center; flex-shrink:0; color:var(--blue); font-weight:650; }
.office-info { flex:1; min-width:0; } .office h2 { font-size:17px; margin:0 0 6px; overflow-wrap:anywhere; } .office p { font-size:13px; color:var(--muted); margin:0; overflow-wrap:anywhere; }
details { margin-top:36px; border-top:1px solid var(--border); padding-top:20px; } summary { cursor:pointer; color:var(--muted); } .table-wrap { overflow:auto; margin-top:16px; } table { border-collapse:collapse; width:100%; text-align:left; font-size:13px; } td,th { padding:12px 10px; border-bottom:1px solid var(--border); } th { font-weight:600; } .empty { color:var(--muted); padding:24px 0; }
#signed-out { padding:56px 0; } #signed-out .primary { margin-top:28px; } #message { border-left:3px solid #bb7020; padding:12px 16px; background:color-mix(in srgb,#c18a36 12%,var(--surface)); line-height:1.5; }
[hidden] { display:none !important; }
@media(max-width:600px) { .page-heading { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .topbar { padding:14px 18px; gap:12px; flex-wrap:wrap; } .brand { gap:10px; } .brand img { width:116px; } .brand span { padding-left:10px; } .account { gap:10px; flex-wrap:wrap; font-size:13px; } #operator-name { display:none; } main { padding:28px 18px; } .page-heading { display:grid; gap:20px; } .search-label { width:100%; } h1 { font-size:24px; } .office { padding:18px; gap:12px; flex-wrap:wrap; } .office .primary { width:100%; } .office-info { flex-basis:calc(100% - 60px); } }