:root{--brand:#2f4f4f;--brand-hover:#406868;--brand-active:#182c2c;--accent:#598787;--tint:#dee8e8;--ink:#1b1b1b;--muted:#5e5e5e;--surface:#fff;--page:#f6f6f6;--line:#dee8e8;--alarm:#c62828;--serif:"EB Garamond", Georgia, serif;color:var(--ink);background:var(--page);font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}.topbar{background:var(--brand);color:#fff;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.brand{font-family:var(--serif);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:10px;font-size:20px;font-weight:600;display:flex}.brand img{width:auto;height:32px}.brand-sub{letter-spacing:.04em;opacity:.8;text-transform:none;font-family:Roboto,sans-serif;font-size:14px;font-weight:400}.avatar-wrap{position:relative}.avatar{background:var(--accent);color:#fff;cursor:pointer;border:2px solid #fff3;border-radius:50%;width:36px;height:36px;padding:0;font-weight:600;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.menu{z-index:1000;background:var(--surface);min-width:240px;color:var(--ink);border:1px solid var(--line);border-radius:8px;position:absolute;top:44px;right:0;overflow:hidden;box-shadow:0 8px 24px #0002}.menu-identity{border-bottom:1px solid var(--line);flex-direction:column;gap:2px;padding:12px 14px;display:flex}.menu-identity span{color:var(--muted);font-size:13px}.menu-identity .role{text-transform:uppercase;letter-spacing:.04em;font-size:12px}.menu-item{width:100%;font:inherit;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:8px;padding:10px 14px;display:flex}.menu-item:hover{background:var(--tint)}.page{padding:24px 20px}.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;max-width:720px;padding:20px 24px}.card h1{font-family:var(--serif);color:var(--brand);margin:0 0 8px;font-size:28px;font-weight:600}.card.error{color:var(--alarm)}.card.loading{align-items:center;gap:10px;display:flex}.spinner{border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}