/* One-page settings: account and access together, a compact team directory below. */
.workspace-settings-page .page-heading { margin-bottom: 20px; }
.settings-studio { --settings-ink:#43513b; --settings-muted:#939d89; --settings-line:#e9ede3; width:100%; max-width:1000px; margin:0; display:grid; gap:24px; }
.settings-studio button,.settings-studio a { transition:background .18s,color .18s,border-color .18s,box-shadow .18s; }
.settings-overview { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr); border:1px solid var(--settings-line); border-radius:16px; overflow:hidden; background:#fff; }
.settings-account { min-width:0; padding:24px; }
.settings-studio .settings-studio-form { margin:0; padding:0; min-width:0; background:transparent; border:0; border-radius:0; }
.settings-account-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; }
.settings-profile { display:flex; align-items:center; gap:10px; min-width:0; }
.settings-profile-avatar { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:11px; background:#edf2e5; color:#8a9d73; font-size:17px; }
.settings-profile>div:nth-child(2) { display:grid; gap:2px; min-width:0; }
.settings-profile h2,.settings-section-head h2,.settings-studio .team-heading h2 { margin:0; color:var(--settings-ink); font-size:14px; font-weight:500; line-height:1.7; }
.settings-profile-name { color:var(--settings-muted); font-size:11px; font-weight:400; line-height:1.6; overflow-wrap:anywhere; }
.settings-studio .settings-save-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; min-height:34px; padding:7px 12px; border:0; border-radius:8px; font-size:11px; background:#35452c; color:#fff; white-space:nowrap; }
.settings-studio .settings-save-button:hover { background:#4b603d; }
.settings-studio .team-heading>[data-team-invite] { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; min-height:34px; padding:7px 0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#7d9169; font-size:12px; font-weight:400; white-space:nowrap; }
.settings-studio .team-heading>[data-team-invite]:hover { background:transparent; color:#435e31; box-shadow:none; }
.settings-save-button svg,.settings-studio [data-team-invite] svg { width:12px; height:12px; }
.settings-account-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 16px; }
.settings-account-field { display:flex; flex-direction:column; gap:7px; margin:0; min-width:0; font-weight:400; }
.settings-email-field { grid-column:1/-1; }
.settings-account-field>span { display:flex; align-items:center; gap:5px; font-size:11px; line-height:1.7; color:#849077; }
.settings-account-field>span svg { width:10px; height:10px; color:#b1bba7; }
.settings-account-field input:not([type=checkbox]) { width:100%; min-width:0; height:42px; min-height:42px; padding:10px 12px; border:1px solid #e3e9dc; border-radius:8px; background:#fff; color:#526446; font-size:13px; font-weight:400; line-height:1.6; box-shadow:none; transition:background .18s,border-color .18s,box-shadow .18s; }
.settings-account-field input:not([type=checkbox]):focus { border-color:#a3b88e; background:#fff; box-shadow:0 0 0 3px #eff4e8; outline:0; }
.settings-account-field.is-readonly input { background:#fafbf8; border-color:#ecf0e6; color:#89957d; -webkit-text-fill-color:#89957d; opacity:1; }
.settings-account-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:17px; border-top:1px solid #f0f3eb; }
.settings-account-preference { display:flex; align-items:center; gap:9px; min-width:0; }
.settings-account-preference>span { display:flex; color:#9aaa88; }
.settings-account-preference>span svg { width:16px; height:16px; }
.settings-account-preference>div { display:grid; gap:2px; }
.settings-account-preference strong { font-size:11px; font-weight:400; color:#738467; }
.settings-account-preference small { font-size:10px; line-height:1.8; color:#a0aa95; }
.settings-studio-toggle { position:relative; display:block; flex:none; width:32px; height:19px; margin:0; }
.settings-studio-toggle input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.settings-studio-toggle>span { display:block; width:32px; height:19px; background:#dfe6d7; border-radius:15px; transition:background .18s; }
.settings-studio-toggle>span:after { content:''; position:absolute; width:13px; height:13px; top:3px; right:3px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #35452b16; transition:transform .18s; }
.settings-studio-toggle input:checked+span { background:#8b9f72; }
.settings-studio-toggle input:checked+span:after { transform:translateX(-13px); }
.settings-studio-toggle input:focus-visible+span { outline:2px solid #8b9f72; outline-offset:3px; }
.settings-studio-form .form-error:empty { display:none; }
.settings-studio-form .form-error { font-size:12px; margin-top:8px; line-height:1.8; }
.settings-security { min-width:0; padding:24px; border-right:1px solid var(--settings-line); background:#fcfdf9; }
.settings-section-head { display:flex; align-items:center; gap:9px; margin-bottom:24px; }
.settings-section-head>span { display:grid; place-items:center; width:32px; height:32px; color:#98a887; flex:none; }
.settings-section-head>span svg { width:20px; height:20px; }
.settings-section-head p { margin:2px 0 0; font-size:10px; line-height:1.8; color:var(--settings-muted); }
.settings-studio-security { display:grid; gap:0; }
.settings-security-item { display:flex; align-items:flex-start; flex-direction:column; gap:11px; padding:0 0 22px; }
.settings-security-item+.settings-security-item { padding:20px 0 0; border-top:1px solid var(--settings-line); }
.settings-security-item strong { display:block; font-size:12px; font-weight:400; color:#77876c; }
.settings-security-item small { display:block; margin-top:4px; color:#a0ab95; font-size:10px; line-height:1.8; }
.settings-studio-link { display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; padding:0; font-size:11px; color:#879b71; white-space:nowrap; }
.settings-studio-link svg { width:12px; height:12px; }
.settings-studio-link:hover { color:#506b3c; }
/* Team: a single aligned heading and dense rows, without nested cards. */
.settings-studio #team-settings { display:block; min-width:0; margin:0; padding:22px 24px 10px; background:#fff; border:1px solid var(--settings-line); border-radius:16px; overflow:visible; }
.settings-studio .team-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:0; margin:0 0 17px; padding:0; border:0; }
.settings-studio .team-heading>div { display:block; min-width:0; }
.settings-studio .team-heading>div:before { display:none; }
.settings-studio .team-heading h2 { display:flex; align-items:center; gap:7px; }
.settings-studio .team-heading p { margin:3px 0 0; font-size:10px; line-height:1.8; color:var(--settings-muted); }
.settings-studio .team-count { display:inline-grid; place-items:center; min-width:18px; height:18px; margin:0; color:#97a48a; background:#f1f5e9; border-radius:5px; font-size:9px; font-weight:400; }
.settings-studio .team-directory { margin:0; padding:0; min-width:0; background:transparent; border:0; border-radius:0; }
.settings-studio .team-directory-labels, .settings-studio .team-row-index { display: none; }
.settings-studio .team-directory-group h3 { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 400; color: #9ba78e; margin: 0; padding: 0 0 6px; }
.settings-studio .team-directory-group h3 span { color: #aeba9f; font-size: 9px; }
.settings-studio .team-directory-group + .team-directory-group { margin-top: 18px; }
.settings-studio .team-directory-row { display: grid; grid-template-columns: minmax(0,1fr) auto 90px 56px; gap: 12px; align-items: center; min-height: 58px; padding: 11px 0; margin: 0; border: 0; border-bottom: 1px solid #f0f3eb; border-radius: 0; background: transparent; }
.settings-studio .team-directory-row:last-child { border-bottom: 0; }
.settings-studio .team-directory-row:hover { background: #fcfdf9; }
.settings-studio .team-directory-person { grid-column: auto; grid-row: auto; display: flex; align-items: center; min-width: 0; gap: 9px; }
.settings-studio .team-directory-person > div { min-width: 0; }
.settings-studio .team-directory-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; font-size: 13px; background: #f0f5e8; color: #8b9e75; }
.settings-studio .team-directory-avatar svg { width: 13px; height: 13px; }
.settings-studio .team-directory-person strong { display: block; font-size: 12px; line-height: 1.8; font-weight: 500; color: #647656; }
.settings-studio .team-directory-person bdi { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #95a389; text-align: right; }
.settings-studio .team-directory-person small { display: block; margin-top: 3px; font-size: 9px; line-height: 1.7; color: #a5af9b; }
.settings-studio .team-directory-job { grid-column: auto; grid-row: auto; display: flex; align-items: center; padding: 0; }
.settings-studio .team-job-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 120px; padding: 3px 7px; font-size: 9px; line-height: 1.8; border-radius: 5px; white-space: nowrap; }
.settings-studio .team-job-badge > span { overflow: hidden; text-overflow: ellipsis; }
.settings-studio .team-job-badge svg { width: 10px; height: 10px; flex: none; }
.settings-studio .team-directory-access { grid-column: auto; grid-row: auto; padding: 0; max-width: none; text-align: right; font-size: 9px; line-height: 1.8; color: #9aa78d; }
.settings-studio .team-access-state { color: #82986f; white-space: nowrap; }
.settings-studio .team-directory-access details { position: relative; padding: 0; margin: 0; border: 0; }
.settings-studio .team-directory-access summary { font-size: 9px; cursor: pointer; justify-content: flex-start; white-space: nowrap; }
.settings-studio .team-directory-access summary svg { width: 10px; height: 10px; }
.settings-studio .team-directory-access details p { font-size: 10px; line-height: 1.9; }
.settings-studio .team-person-actions { grid-column: auto; grid-row: auto; display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 0; }
.settings-studio .team-person-actions .icon-button { width: 27px; height: 30px; min-height: 0; padding: 5px; border: 0; background: transparent; color: #a0ad92; border-radius: 7px; }
.settings-studio .team-person-actions .icon-button svg { width: 13px; height: 13px; }
.settings-studio .team-person-actions .icon-button:hover { background: #eef3e6; color: #617a4d; }
.settings-studio .team-directory-row.is-invitation { display:flex; align-items:center; width:fit-content; max-width:100%; gap:16px; padding:12px 0; }
.settings-studio .is-invitation .team-directory-person { flex:0 1 auto; }
.settings-studio .is-invitation .team-directory-avatar { width:28px; height:28px; border-radius:8px; background:transparent; color:#9cab8e; }
.settings-studio .is-invitation .team-person-actions { flex:none; align-self:flex-start; padding-top:1px; }
.settings-studio .is-invitation .team-person-actions .icon-button { width:28px; height:28px; color:#a0ab95; }
.settings-studio .is-invitation .team-person-actions [data-team-cancel]:hover { color:#ac8176; background:#faf4f1; }
.settings-studio .team-invitation-info { flex: 1; min-width: 0; }
.settings-studio .team-invitation-line { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; min-width: 0; }
.settings-studio .team-invitation-line .team-invite-email { flex: 0 1 auto; min-width: 32px; max-width: 200px; font: 12px Arial,sans-serif; direction: ltr; text-align: right; color: #738567; }
.settings-studio .team-invitation-line .team-job-badge { flex: 0 1 auto; max-width: 120px; }
.settings-studio .team-invite-state { display: inline-flex; align-items: center; flex: none; font-size: 9px; line-height: 1.8; white-space: nowrap; padding: 2px 0; border-radius: 0; color: #a09a83; background: transparent; }
.settings-studio .team-invite-state.is-expired { color: #b19385; background: transparent; }
.settings-studio .team-directory-empty { display: flex; align-items: center; gap: 12px; padding: 17px 0; border: 0; background: transparent; border-radius: 0; }
.settings-studio .team-directory-empty > span { display: none; }
.settings-studio .team-directory-empty strong { font-size: 12px; font-weight: 400; color: #7c8e6d; }
.settings-studio .team-directory-empty p { font-size: 10px; color: #a1ad96; line-height: 1.9; margin-top: 3px; }
.settings-studio .team-directory-empty .text-link { font-size: 10px; white-space: nowrap; }
/* Readable team information on desktop; abbreviated email only on mobile. */
.settings-studio .team-invite-email-full { display:none; }
@media (min-width:701px) {
  .settings-studio .team-directory-group h3 { font-size:11px; padding-bottom:8px; }
  .settings-studio .team-directory-row { grid-template-columns:minmax(0,1fr) 130px 110px 72px; gap:16px; min-height:76px; padding:15px 0; }
  .settings-studio .team-directory-person { gap:12px; }
  .settings-studio .team-directory-avatar { width:40px; height:40px; border-radius:12px; font-size:16px; }
  .settings-studio .team-directory-person strong { font-size:14px; font-weight:500; color:#536446; }
  .settings-studio .team-directory-person bdi { font-size:12px; color:#87967c; }
  .settings-studio .team-directory-person small { margin-top:5px; font-size:11px; }
  .settings-studio .team-job-badge { max-width:130px; padding:4px 8px; font-size:11px; }
  .settings-studio .team-job-badge svg { width:12px; height:12px; }
  .settings-studio .team-directory-access,.settings-studio .team-directory-access summary { font-size:11px; }
  .settings-studio .team-person-actions { gap:4px; }
  .settings-studio .team-person-actions .icon-button { width:32px; height:34px; }
  .settings-studio .team-person-actions .icon-button svg { width:15px; height:15px; }
  .settings-studio .team-directory-row.is-invitation { display:grid; width:100%; grid-template-columns:minmax(0,1fr) 72px; gap:16px; min-height:76px; padding:15px 0; }
  .settings-studio .is-invitation .team-directory-avatar { width:40px; height:40px; border-radius:12px; background:#f3f6ed; }
  .settings-studio .is-invitation .team-directory-avatar svg { width:17px; height:17px; }
  .settings-studio .is-invitation .team-person-actions { align-self:center; padding:0; }
  .settings-studio .is-invitation .team-person-actions .icon-button { width:32px; height:34px; }
  .settings-studio .team-invitation-line { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; }
  .settings-studio .team-invitation-line .team-invite-email { min-width:0; max-width:none; overflow:visible; white-space:normal; font:14px/1.7 Arial,sans-serif; color:#627754; }
  .settings-studio .team-invite-email-full { display:inline; overflow-wrap:anywhere; }
  .settings-studio .team-invite-email-short { display:none; }
  .settings-studio .team-invitation-line .team-job-badge { max-width:130px; justify-self:start; }
  .settings-studio .team-invite-state { font-size:11px; justify-self:start; }
}
/* A defined, softly tinted row keeps identity, role and actions together. */
.settings-studio .team-directory-row { padding-inline:12px; margin:6px 0; border:0; border-radius:11px; background:#fafbf8; }
.settings-studio .team-directory-row:hover { background:#f5f8ef; }
.settings-studio .team-directory-avatar { background:#fff; color:#83966d; }
.settings-studio .team-directory-person strong { color:#495b3e; }
.settings-studio .team-invite-state { gap:6px; color:#958b6c; }
.settings-studio .team-invite-state:before { content:''; display:block; width:5px; height:5px; flex:none; border-radius:50%; background:#b5a77c; }
.settings-studio .team-invite-state.is-expired:before { background:#b69b8e; }
.settings-studio .team-invitation-line .team-job-badge { background:#eef3e6; color:#7b9066; }
.settings-studio .team-invitation-line .team-job-badge svg { display:none; }
.settings-studio .team-resend-label { display:none; }
@media (min-width:701px) {
  .settings-studio .team-directory-row,.settings-studio .team-directory-row.is-invitation { padding:17px 16px; min-height:82px; }
  .settings-studio .team-directory-avatar,.settings-studio .is-invitation .team-directory-avatar { background:#fff; width:38px; height:38px; border-radius:50%; }
  .settings-studio .team-invitation-line .team-invite-email { font-size:15px; color:#4e6341; }
  .settings-studio .team-invitation-line .team-job-badge { font-size:12px; padding:4px 9px; border-radius:6px; }
  .settings-studio .team-directory-person small { color:#9ba68e; font-size:11px; }
  .settings-studio .team-person-actions { gap:6px; }
  .settings-studio .team-person-actions .icon-button { color:#8c9b7e; }
}
@media (min-width:1200px) {
  .settings-studio .team-directory-row { grid-template-columns:minmax(0,1fr) 120px 110px 144px; }
  .settings-studio .team-directory-row.is-invitation { grid-template-columns:minmax(0,1fr) 144px; }
  .settings-studio .team-invitation-line { grid-template-columns:minmax(0,1fr) 120px 110px; }
  .settings-studio .team-resend-label { display:inline; font-size:11px; font-weight:400; white-space:nowrap; }
  .settings-studio .is-invitation .team-person-actions [data-team-resend] { width:auto; padding:6px 8px; display:inline-flex; align-items:center; gap:6px; }
}
@media (min-width:701px) and (max-width:999px) {
  .settings-studio .team-directory-row.is-invitation { gap:12px; }
  .settings-studio .team-invitation-line { gap:10px; }
  .settings-studio .team-invitation-line .team-invite-email { font-size:14px; }
  .settings-studio .team-invitation-line .team-job-badge { font-size:11px; padding:4px 7px; }
}
@media (max-width:700px) {
  .settings-studio .team-directory-row,.settings-studio .team-directory-row.is-invitation { padding:12px 9px; }
  .settings-studio .team-invite-state { gap:4px; }
  .settings-studio .team-invite-state:before { width:4px; height:4px; }
}
/* Keep invitation metadata and its actions on the same baseline. */
.settings-studio .team-invitation-line { display:flex; align-items:center; gap:14px; }
.settings-studio .team-invitation-line .team-invite-email { flex:1; }
.settings-studio .team-invitation-meta { display:flex; align-items:center; gap:12px; flex:none; }
.settings-studio .team-invitation-meta small { margin:0; white-space:nowrap; font-size:10px; line-height:1.8; }
.settings-studio .is-invitation .team-person-actions { align-self:center; padding:0; }
@media (min-width:701px) {
  .settings-studio .team-invitation-line .team-invite-email { font-size:13px; }
  .settings-studio .team-invitation-line .team-job-badge { font-size:10px; padding:3px 7px; }
  .settings-studio .team-invite-state { font-size:10px; }
  .settings-studio .team-directory-row.is-invitation { min-height:72px; padding-block:15px; }
}
@media (max-width:700px) {
  .settings-studio .is-invitation .team-invitation-line { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
  .settings-studio .team-invitation-meta { gap:7px; min-width:0; }
  .settings-studio .team-invitation-meta small { font-size:8px; }
  .settings-studio .is-invitation .team-person-actions { align-self:end; }
}
/* Invitation editor: aligned fields, compact roles, clear actions. */
.team-editor-modal .team-editor-section:first-of-type { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team-editor-modal .team-editor-section:first-of-type > h3, .team-editor-modal .team-form-person { grid-column: 1 / -1; margin-bottom: 0; }
.team-editor-modal .team-editor-section:first-of-type > label { margin: 0; gap: 8px; min-width: 0; font-size: 11px; color: #819175; }
.team-editor-modal .team-form input:not([type=checkbox]) { height: 42px; min-height: 42px; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.6; }
.team-editor-modal .team-role-options > button { min-height: 55px; padding: 9px 10px; }
.team-editor-modal .team-role-options strong { font-size: 11px; }
.team-editor-modal .team-editor-footer { padding-top: 12px; margin-top: 14px; }
@media (max-width:850px) {
  .settings-overview { grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr); }
  .settings-account,.settings-security { padding:20px; }
  .settings-studio .team-directory-row:not(.is-invitation) { grid-template-columns:minmax(0,1fr) auto 56px; }
  .settings-studio .team-directory-row:not(.is-invitation) .team-person-actions { grid-column:3; grid-row:1; }
  .settings-studio .team-directory-row:not(.is-invitation) .team-directory-access { grid-column:1/-1; padding-right:39px; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
}
@media (max-width:700px) {
  .settings-studio { gap:18px; }
  .settings-overview { grid-template-columns:1fr; }
  .settings-security { border-right:0; border-top:1px solid var(--settings-line); padding:18px 20px; }
  .settings-section-head { margin-bottom:18px; }
  .settings-studio-security { grid-template-columns:1fr 1fr; gap:20px; }
  .settings-security-item { padding:0; gap:8px; }
  .settings-security-item+.settings-security-item { padding:0; border:0; }
  .settings-account-head { margin-bottom:20px; }
  .settings-studio #team-settings { padding:20px 20px 8px; }
  .settings-account-field input:not([type=checkbox]),.team-editor-modal .team-form input:not([type=checkbox]) { font-size:16px; }
  .settings-studio .team-directory-person { gap:7px; }
  .settings-studio .team-directory-row.is-invitation { display:grid; width:100%; grid-template-columns:minmax(0,1fr) 48px; gap:4px; }
  .settings-studio .is-invitation .team-directory-avatar { display:none; }
  .settings-studio .team-invitation-line { gap:5px; }
  .settings-studio .team-invitation-line .team-job-badge { padding:3px 5px; max-width:95px; font-size:9px; }
  .settings-studio .team-invitation-line .team-job-badge svg { display:none; }
  .settings-studio .team-invite-state { font-size:9px; padding:2px 0; }
  .settings-studio .is-invitation .team-person-actions .icon-button { width:24px; height:28px; }
  .settings-studio .team-person-actions { gap:0; }
  .settings-studio .team-person-actions .icon-button { width:24px; height:32px; }
  .settings-studio .team-directory-group+.team-directory-group { margin-top:14px; }
  .team-editor-modal .team-editor-section:first-of-type { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .settings-account,.settings-security { padding:18px 16px; }
  .settings-studio #team-settings { padding:18px 14px 6px; }
  .settings-profile-avatar { width:30px; height:30px; font-size:15px; border-radius:9px; }
  .settings-profile { gap:8px; }
  .settings-profile h2,.settings-section-head h2,.settings-studio .team-heading h2 { font-size:13px; }
  .settings-studio .settings-save-button { padding:7px 9px; font-size:10px; }
  .settings-account-fields { grid-template-columns:1fr; gap:14px; }
  .settings-email-field { grid-column:auto; }
  .settings-studio-security { grid-template-columns:1fr; gap:14px; }
  .settings-security-item { flex-direction:row; justify-content:space-between; align-items:center; gap:9px; }
  .settings-security-item+.settings-security-item { border-top:1px solid var(--settings-line); padding-top:14px; }
  .settings-security-item small { font-size:9px; }
  .settings-studio-link { font-size:10px; }
  .settings-studio .team-directory-row:not(.is-invitation) { grid-template-columns:minmax(0,1fr) auto 48px; gap:7px; }
  .settings-studio .team-invitation-line { gap:4px; }
  .settings-studio .team-invitation-line .team-invite-email { font-size:11px; }
  .settings-studio .team-invitation-line .team-job-badge { max-width:82px; }
}
/* One compact invitation line, including its date and actions, on phones. */
@media (max-width:700px) {
  .settings-studio .is-invitation .team-invitation-line { display:flex; gap:6px; }
  .settings-studio .team-invitation-line .team-invite-email { flex:1 1 80px; min-width:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; }
  .settings-studio .team-invitation-meta { gap:5px; flex:none; }
  .settings-studio .team-invitation-meta .team-job-badge { padding:3px 4px; font-size:8px; }
  .settings-studio .team-invitation-meta .team-invite-state { font-size:8px; gap:3px; }
  .settings-studio .team-invitation-meta small { font-size:8px; }
  .settings-studio .team-expiry-prefix { display:none; }
  .settings-studio .is-invitation .team-person-actions { align-self:center; }
  .settings-studio .team-directory-row.is-invitation { grid-template-columns:minmax(0,1fr) 40px; gap:4px; padding:12px 7px; }
  .settings-studio .is-invitation .team-person-actions .icon-button { width:20px; height:28px; padding:3px; }
  .settings-studio .is-invitation .team-person-actions svg { width:12px; height:12px; }
}
#modal:has(.team-cancel-invite) { width:min(400px,calc(100vw - 32px)); }
.team-cancel-invite .team-cancel-recipient { display:flex; align-items:center; gap:9px; margin:4px 0 12px; color:#637651; }
.team-cancel-recipient svg { width:17px; height:17px; flex:none; color:#91a17e; }
.team-cancel-recipient bdi { font:14px/1.6 Arial,sans-serif; font-weight:400; }
.team-cancel-invite p { margin:0; font-size:12px; line-height:1.9; color:#929d87; }
.team-cancel-invite .team-form-actions { justify-content:flex-end; gap:14px; margin-top:22px; }
.team-cancel-invite .team-form-actions [data-team-dismiss] { order:-1; font-size:12px; color:#8c997f; }
.team-cancel-invite .team-form-actions [data-team-confirm] { min-height:36px; font-size:12px; font-weight:400; padding:8px 14px; border-radius:9px; }
/* Let the invitation identity lead; keep only status and expiry beside it. */
.settings-studio .is-invitation .team-invite-email-full { display:inline; overflow-wrap:normal; }
.settings-studio .is-invitation .team-invite-email-short { display:none; }
.settings-studio .is-invitation .team-invite-state { padding:3px 7px; border-radius:6px; background:#f5f2e9; color:#948767; }
.settings-studio .is-invitation .team-invite-state.is-expired { background:#f7eeeb; color:#aa8779; }
.settings-studio .is-invitation .team-invitation-meta { gap:10px; }
.team-cancel-invite .team-cancel-recipient { background:#f7f9f3; padding:11px 12px; border-radius:10px; margin:0 0 14px; }
.team-cancel-recipient bdi { min-width:0; overflow-wrap:anywhere; font-size:13px; }
#modal:has(.team-cancel-invite)>header { border-bottom:0; padding-bottom:12px; }
@media (max-width:700px) {
  .settings-studio .is-invitation .team-invitation-line { gap:8px; }
  .settings-studio .is-invitation .team-invite-email { font-size:10px; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  .settings-studio .is-invitation .team-invitation-meta { gap:6px; }
  .settings-studio .is-invitation .team-invite-state { padding:3px 5px; }
}
/* Account fields: one calm, aligned column, including narrow screens. */
.settings-account-head { margin-bottom:16px; }
.settings-account-fields { display:flex; flex-direction:column; gap:0; }
.settings-studio .settings-account-field { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; gap:14px; padding:11px 0; margin:0; border:0; border-bottom:1px solid #f0f3eb; border-radius:0; background:transparent; }
.settings-studio .settings-account-field:last-child { border-bottom:0; }
.settings-studio .settings-account-field>span { gap:7px; font-size:11px; color:#8d9982; }
.settings-studio .settings-account-field>span svg { width:13px; height:13px; color:#a4b094; }
.settings-studio .settings-account-field input:not([type=checkbox]) { height:43px; min-height:43px; border:1px solid transparent; border-radius:10px; background:#f6f8f2; padding:10px 12px; font-size:14px; }
.settings-studio .settings-name-field input:not([type=checkbox]):focus { border-color:#b5c5a4; background:#fff; box-shadow:0 0 0 3px #f1f5eb; }
.settings-studio .settings-account-field.is-readonly input { background:transparent; padding-inline:0; color:#718064; -webkit-text-fill-color:#718064; font-size:13px; }
.settings-studio .settings-phone-value { display:flex; align-items:center; justify-content:flex-start; gap:0; min-width:0; direction:ltr; }
.settings-studio .settings-phone-value input { flex:0 1 auto; width:auto!important; max-width:calc(100% - 18px); }
.settings-studio .settings-phone-verified { display:inline-flex; flex:0 0 auto; align-items:center; gap:3px; margin-left:-2px; color:#27834b; font:600 10px/1.5 Cairo,Arial,sans-serif; white-space:nowrap; }
.settings-studio .settings-phone-verified svg { width:13px; height:13px; color:#27834b; transform:translateY(1px); }
.settings-account-footer { margin-top:10px; padding-top:16px; }
@media (max-width:700px) {
  .settings-studio .settings-account { padding:20px 18px; }
  .settings-account-head { gap:10px; margin-bottom:14px; }
  .settings-studio .settings-account-field { grid-template-columns:78px minmax(0,1fr); gap:10px; padding:9px 0; }
  .settings-studio .settings-account-field>span { font-size:10px; gap:5px; }
  .settings-studio .settings-account-field>span svg { width:12px; height:12px; }
  .settings-studio .settings-name-field input:not([type=checkbox]) { font-size:16px; }
  .settings-studio .settings-account-field.is-readonly input { font-size:13px; }
  .settings-account-footer { margin-top:8px; padding-top:14px; gap:10px; }
  .settings-account-preference small { font-size:9px; }
}
@media (max-width:360px) {
  .settings-studio .settings-account { padding-inline:14px; }
  .settings-studio .settings-account-field { grid-template-columns:70px minmax(0,1fr); gap:8px; }
  .settings-studio .settings-account-field.is-readonly input { font-size:12px; }
}
/* Give the editable name its own full-width field. */
.settings-studio .settings-name-field { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:4px 0 17px; }
.settings-studio .settings-name-field>span:first-child { font-size:11px; color:#7d8972; }
.settings-studio .settings-name-field .settings-name-control { display:block; position:relative; min-width:0; }
.settings-studio .settings-name-control input:not([type=checkbox]) { height:46px; min-height:46px; padding:10px 14px 10px 42px; background:#fff; border:1px solid #e4e9de; border-radius:9px; font-size:14px; color:#43513b; }
.settings-studio .settings-name-control>svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:#a3ae98; pointer-events:none; }
.settings-studio .settings-name-control:focus-within>svg { color:#71865e; }
@media (max-width:700px) {
  .settings-studio .settings-name-control input:not([type=checkbox]) { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .settings-studio button,.settings-studio a,.settings-account-field input,.settings-studio-toggle>span,.settings-studio-toggle>span:after { transition:none; }
}