.role-invitation-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
.role-invitation-toolbar p { flex:1 1 240px; margin:0; }
#roleInvitationSection [hidden], .role-invitation-dialog [hidden], .invite-page [hidden] { display:none!important; }
.role-invitation-dialog { width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box; overflow:auto; border:1px solid #ded8d1; border-radius:18px; padding:24px; color:#282827; background:#fff; }
.role-invitation-dialog::backdrop { background:rgba(20,18,16,.5); }
.role-invitation-dialog h3 { margin:0 0 12px; }
.role-invitation-dialog label, #roleInvitationSection label { display:grid; gap:7px; margin:14px 0; }
.role-invitation-dialog input,.role-invitation-dialog select,#roleInvitationSection input,#roleInvitationSection select { box-sizing:border-box; width:100%; min-width:0; padding:12px; border:1px solid #d7d1c9; border-radius:9px; font:inherit; font-size:16px; background:#fff; color:#282827; }
#roleInvitationSendStatus { overflow-wrap:anywhere; }
#roleInvitationSendStatus[data-kind=error] { color:#a3312e; }
.invite-page { margin:0; min-height:100vh; box-sizing:border-box; padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); background:#f5f3ef; color:#282827; font:16px/1.5 system-ui,sans-serif; display:grid; place-items:center; }
.invite-card { width:min(100%,480px); box-sizing:border-box; padding:32px; background:#fff; border:1px solid #e1dcd5; border-radius:20px; box-shadow:0 8px 32px #231f200d; }
.invite-brand { margin:0 0 16px; color:#aa6030; font-size:13px; font-weight:750; letter-spacing:.14em; }
.invite-card h1 { font-size:26px; line-height:1.2; margin:0 0 16px; }
.invite-card p,.invite-card dd { overflow-wrap:anywhere; }
.invite-card dl { border-block:1px solid #ece7e0; padding:16px 0; margin:20px 0; }
.invite-card dt { color:#6b6560; font-size:13px; }
.invite-card dd { margin:0 0 10px; font-weight:600; }
.invite-card dd:last-child { margin-bottom:0; }
.invite-card form label { display:block; margin:16px 0 6px; font-weight:600; }
.invite-card input { width:100%; min-width:0; padding:12px; border:1px solid #bdb7b0; border-radius:9px; box-sizing:border-box; font:inherit; background:#fff; }
.invite-card .invite-hint { margin:8px 0; font-size:13px; color:#6b6560; }
.invite-card button,.invite-login-link { display:block; box-sizing:border-box; width:100%; border:0; border-radius:10px; margin-top:16px; padding:13px 16px; font:inherit; font-weight:650; text-align:center; text-decoration:none; background:#087e4e; color:#fff; cursor:pointer; }
.invite-card button.invite-secondary { background:#f2efeb; color:#50483f; font-weight:500; }
.invite-card button:disabled { opacity:.65; cursor:wait; }
.invite-login-link { background:transparent; color:#a65b2c; border:1px solid #d9c3ae; }
.invite-card :focus-visible,.role-invitation-dialog :focus-visible { outline:3px solid #bc7f42; outline-offset:3px; }
@media(max-width:420px) { .invite-card { padding:24px 20px; } .invite-card h1 { font-size:23px; } .role-invitation-dialog { padding:20px; } }