:root{
  --demo-bg:#f7f9fb;
  --demo-surface:#ffffff;
  --demo-surface-low:#f2f4f6;
  --demo-surface-high:#e6e8ea;
  --demo-ink:#191c1e;
  --demo-ink-variant:#334155;
  --demo-muted:#64748b;
  --demo-outline:#e2e8f0;
  --demo-outline-dark:#c6c6cd;
  --demo-primary:#0f172a;
  --demo-secondary:#1e293b;
  --demo-green:#16a36d;
  --demo-orange:#f97316;
  --demo-red:#ef4444;
  --demo-blue:#3b82f6;
  --demo-violet:#7656b5;
}

body{background:var(--demo-bg);color:var(--demo-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.people-demo-shell{grid-template-columns:236px minmax(0,1fr);min-height:100vh;background:var(--demo-bg)}
.people-demo-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 16px;background:var(--demo-surface);border-right:1px solid var(--demo-outline);color:var(--demo-ink)}
.people-demo-brand{display:flex;align-items:center;gap:10px;margin:0 4px 42px;padding:0}
.people-demo-brand .brand-mark{width:36px;height:36px;border:0;border-radius:8px;overflow:hidden;background:#fff}
.people-demo-brand .brand-mark img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.55)}
.people-demo-brand h1{margin:0;color:var(--demo-ink);font-size:14px;font-weight:700;line-height:20px;letter-spacing:-.01em}
.people-demo-brand p{margin:1px 0 0;color:var(--demo-muted);font-size:10px;line-height:16px}
.people-demo-nav-label{margin:0 8px 10px;color:var(--demo-muted);font-size:11px;font-weight:700;line-height:16px;letter-spacing:.05em;text-transform:uppercase}
.people-demo-nav{display:grid;gap:4px}
.people-demo-nav button{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--demo-ink-variant);text-align:left}
.people-demo-nav button:hover{background:var(--demo-surface-low)}
.people-demo-nav button.active{background:#eef2f6;border-color:var(--demo-outline)}
.people-demo-nav-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--demo-primary);color:#fff;font-size:12px;font-weight:700}
.people-demo-nav button>span:last-child{display:grid;gap:2px}
.people-demo-nav strong{font-size:13px;font-weight:650;line-height:18px}
.people-demo-nav small{color:var(--demo-muted);font-size:10px;line-height:14px}
.people-demo-sidebar-footer{display:grid;gap:5px;margin:32px 8px 0;padding-top:18px;border-top:1px solid var(--demo-outline)}
.people-demo-sidebar-footer span{color:var(--demo-muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.people-demo-sidebar-footer strong{font-size:13px;font-weight:650}
.people-demo-sidebar-footer small{color:var(--demo-muted);font-size:11px}
.people-demo-main{min-width:0;background:var(--demo-bg)}
.people-demo-topbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;min-height:60px;padding:0 36px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--demo-outline);backdrop-filter:blur(8px)}
.people-demo-breadcrumb{display:flex;align-items:center;gap:9px;color:var(--demo-muted);font-size:12px}
.people-demo-breadcrumb b{color:var(--demo-outline-dark);font-weight:400}
.people-demo-breadcrumb strong{color:var(--demo-ink);font-weight:700}
.people-demo-topbar-center{justify-self:center;color:var(--demo-muted);font-size:11px}
.people-demo-user{display:flex;align-items:center;justify-self:end;gap:9px;color:var(--demo-ink-variant);font-size:12px}
.people-demo-user b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--demo-surface-low);color:var(--demo-secondary);font-size:11px}
.people-demo-content{max-width:1280px;margin:0 auto;padding:48px 48px 72px}
.people-demo-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.people-demo-eyebrow{display:block;margin-bottom:7px;color:var(--demo-muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.people-demo-heading h2{margin:0;color:var(--demo-ink);font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.02em}
.people-demo-heading p{margin:7px 0 0;color:var(--demo-ink-variant);font-size:14px;line-height:20px}
.people-demo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 14px;border:1px solid var(--demo-outline);border-radius:8px;background:#fff;color:var(--demo-secondary);font-size:13px;font-weight:650;line-height:18px;white-space:nowrap}
.people-demo-btn:hover{border-color:var(--demo-secondary);background:#f8fafc}
.people-demo-btn.primary{border-color:var(--demo-primary);background:var(--demo-primary);color:#fff}
.people-demo-btn.primary:hover{background:#1e293b}
.people-demo-btn.secondary{background:#fff}
.people-demo-summary-line{display:flex;align-items:center;gap:28px;margin-bottom:28px;padding:14px 0;border-top:1px solid var(--demo-outline);border-bottom:1px solid var(--demo-outline)}
.people-demo-summary-line div{display:flex;align-items:baseline;gap:8px}
.people-demo-summary-line span{color:var(--demo-muted);font-size:12px}
.people-demo-summary-line strong{color:var(--demo-ink);font-size:20px;line-height:28px;font-weight:700}
.people-demo-accent-orange{color:var(--demo-orange)!important}.people-demo-accent-green{color:var(--demo-green)!important}
.people-demo-workspace{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:600px;background:#fff;border:1px solid var(--demo-outline);border-radius:16px;overflow:hidden;box-shadow:0 4px 12px rgba(15,23,42,.04)}
.people-demo-directory{display:flex;flex-direction:column;min-width:0;background:var(--demo-surface-low);border-right:1px solid var(--demo-outline)}
.people-demo-directory>header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px}
.people-demo-directory>header strong{font-size:14px;font-weight:700}.people-demo-directory>header span{color:var(--demo-muted);font-size:11px}
.people-demo-directory-list{display:grid;gap:3px;padding:0 10px 18px}
.people-demo-directory-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:58px;padding:8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--demo-ink-variant);text-align:left}
.people-demo-directory-item:hover{background:#e9edf1}.people-demo-directory-item.active{background:#fff;border-color:var(--demo-outline);box-shadow:0 4px 12px rgba(15,23,42,.05);color:var(--demo-ink)}
.people-demo-directory-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#e0e3e5;color:var(--demo-secondary);font-size:10px;font-weight:700}
.people-demo-directory-icon.orange{background:#ffedd5;color:#c2410c}.people-demo-directory-item.active .people-demo-directory-icon{background:var(--demo-primary);color:#fff}
.people-demo-directory-copy{display:grid;gap:3px;min-width:0}.people-demo-directory-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}.people-demo-directory-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--demo-muted);font-size:10px}
.people-demo-directory-item>b{color:var(--demo-muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.people-demo-directory-divider{display:flex;align-items:center;gap:8px;margin:13px 8px 4px;color:var(--demo-muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.people-demo-directory-divider:after{content:"";height:1px;flex:1;background:var(--demo-outline)}
.people-demo-directory-empty{padding:14px 8px;color:var(--demo-muted);font-size:12px}
.people-demo-add-group{display:flex;align-items:center;gap:8px;width:calc(100% - 20px);min-height:38px;margin:auto 10px 16px;padding:8px 12px;border:1px dashed var(--demo-outline-dark);border-radius:8px;background:transparent;color:var(--demo-secondary);font-size:12px;font-weight:650;text-align:left}.people-demo-add-group:hover{background:#fff;border-style:solid}.people-demo-add-group span{font-size:18px;line-height:14px;font-weight:400}
.people-demo-roster{min-width:0;padding:24px 26px 28px}
.people-demo-roster-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:0 0 18px}.people-demo-roster-head div{display:grid;gap:4px}.people-demo-roster-head strong{font-size:18px;font-weight:700}.people-demo-roster-head span{color:var(--demo-muted);font-size:11px}.people-demo-roster-count{padding-top:3px;color:var(--demo-muted);font-size:12px}
.people-demo-filters{display:flex;align-items:flex-end;gap:10px;min-height:72px;padding:14px 0;border-top:1px solid var(--demo-outline);border-bottom:1px solid var(--demo-outline)}
.people-demo-search,.people-demo-filter-select{display:grid;gap:5px}.people-demo-search{width:min(350px,45%)}.people-demo-filter-select{width:126px}.people-demo-search>span,.people-demo-filter-select>span{color:var(--demo-muted);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.people-demo-search input,.people-demo-filter-select select,.people-demo-field input,.people-demo-field select,.people-demo-field textarea{width:100%;min-height:36px;padding:8px 10px;border:1px solid var(--demo-outline);border-radius:8px;background:#fff;color:var(--demo-ink);font:inherit;font-size:12px;outline:0}.people-demo-search input:focus,.people-demo-filter-select select:focus,.people-demo-field input:focus,.people-demo-field select:focus,.people-demo-field textarea:focus{border-color:var(--demo-secondary)}
.people-demo-clear{align-self:flex-end;padding:8px 0;border:0;background:transparent;color:var(--demo-blue);font-size:12px}.people-demo-clear:hover{text-decoration:underline}.people-demo-result-count{margin-left:auto;padding-bottom:9px;color:var(--demo-muted);font-size:11px;white-space:nowrap}
.people-demo-table-region{min-width:0}.people-demo-table-scroll{overflow:auto}.people-demo-table{width:100%;min-width:620px;border-collapse:collapse;table-layout:fixed}.people-demo-table th{height:45px;padding:0 8px;border-bottom:1px solid var(--demo-outline);color:var(--demo-muted);font-size:10px;font-weight:700;letter-spacing:.05em;text-align:left;text-transform:uppercase;white-space:nowrap}.people-demo-table td{height:64px;padding:8px;border-bottom:1px solid #edf0f2;color:var(--demo-ink-variant);font-size:12px;vertical-align:middle}.people-demo-table tbody tr:hover{background:#fbfcfd}.people-demo-table th:nth-child(1){width:19%}.people-demo-table th:nth-child(2){width:15%}.people-demo-table th:nth-child(3){width:23%}.people-demo-table th:nth-child(4){width:15%}.people-demo-table th:nth-child(5){width:9%}.people-demo-operation{width:112px!important}
.people-demo-person-cell{display:flex;align-items:center;gap:10px;min-width:0}.people-demo-person-avatar{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#e0e3e5;color:var(--demo-secondary);font-size:10px;font-weight:700}.people-demo-person-cell strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--demo-ink);font-size:13px}.people-demo-person-cell em,.people-demo-main-value em{font-style:normal;color:var(--demo-muted);font-size:11px;font-weight:400}.people-demo-main-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.people-demo-group-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--demo-ink-variant);font-size:12px}.people-demo-group-value.unassigned{color:var(--demo-orange)}
.people-demo-group-table{min-width:700px}.people-demo-group-table th:nth-child(1){width:20%}.people-demo-group-table th:nth-child(2){width:16%}.people-demo-group-table th:nth-child(3){width:9%}.people-demo-group-table th:nth-child(4){width:16%}.people-demo-group-table th:nth-child(5){width:24%}.people-demo-group-table th:nth-child(6){width:12%}.people-demo-group-table th:nth-child(7){width:10%}
.people-demo-icon-button{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--demo-outline);border-radius:8px;background:#fff;color:var(--demo-secondary);font-size:16px;line-height:1}.people-demo-icon-button:hover{border-color:var(--demo-secondary);background:var(--demo-surface-low);color:var(--demo-primary)}
.people-demo-status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}.people-demo-status i{width:5px;height:5px;border-radius:50%;background:currentColor}.people-demo-status.green{background:#dcfce7;color:#15803d}.people-demo-status.orange{background:#ffedd5;color:#c2410c}.people-demo-status.red{background:#fee2e2;color:#b91c1c}.people-demo-status.gray{background:#e5e7eb;color:#4b5563}
.people-demo-row-actions{display:flex;align-items:center;gap:10px}.people-demo-text-action{padding:3px 0;border:0;background:transparent;color:var(--demo-blue);font-size:11px;white-space:nowrap}.people-demo-text-action:hover{text-decoration:underline}.people-demo-text-action.danger{color:var(--demo-red)}.people-demo-empty-row{height:180px!important;color:var(--demo-muted)!important;text-align:center}
.people-demo-modal-layer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.22)}.people-demo-modal{width:min(620px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:24px;background:#fff;border:1px solid var(--demo-outline);border-radius:16px;box-shadow:0 12px 30px rgba(15,23,42,.14)}.people-demo-modal-small{width:min(480px,100%)}.people-demo-modal>header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:23px}.people-demo-modal-eyebrow{display:block;margin-bottom:5px;color:var(--demo-muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.people-demo-modal h2{margin:0;color:var(--demo-ink);font-size:20px;line-height:28px}.people-demo-close{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--demo-muted);font-size:23px;line-height:1}.people-demo-close:hover{background:var(--demo-surface-low);color:var(--demo-ink)}.people-demo-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 16px}.people-demo-field{display:grid;gap:6px;min-width:0;margin-top:17px}.people-demo-form-grid .people-demo-field{margin-top:0}.people-demo-field-full{grid-column:1/-1}.people-demo-field>span{color:var(--demo-ink-variant);font-size:11px;font-weight:700}.people-demo-field textarea{resize:vertical;line-height:20px}.people-demo-modal footer{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;padding-top:17px;border-top:1px solid var(--demo-outline)}.people-demo-assign-person{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--demo-outline);border-radius:8px;background:var(--demo-surface-low)}.people-demo-assign-person>div{display:grid;gap:3px}.people-demo-assign-person strong{font-size:13px}.people-demo-assign-person small{color:var(--demo-muted);font-size:11px}
.people-demo-toast{right:24px;bottom:24px;background:var(--demo-primary);border:1px solid var(--demo-secondary);box-shadow:0 4px 12px rgba(15,23,42,.12)}.people-demo-toast.error{background:#991b1b;border-color:#991b1b}

@media(max-width:1050px){.people-demo-content{padding:36px 28px 56px}.people-demo-workspace{grid-template-columns:250px minmax(0,1fr)}.people-demo-roster{padding:22px 20px 24px}.people-demo-table th:nth-child(3),.people-demo-table td:nth-child(3){display:none}.people-demo-table th:nth-child(1){width:25%}.people-demo-table th:nth-child(2){width:20%}.people-demo-table th:nth-child(4){width:20%}.people-demo-operation{width:112px!important}}
@media(max-width:740px){.people-demo-shell{grid-template-columns:1fr}.people-demo-sidebar{position:static;height:auto;padding:14px 16px;border-right:0;border-bottom:1px solid var(--demo-outline)}.people-demo-brand{margin:0}.people-demo-nav-label,.people-demo-nav,.people-demo-sidebar-footer{display:none}.people-demo-topbar{position:static;grid-template-columns:1fr auto;min-height:52px;padding:0 16px}.people-demo-topbar-center{display:none}.people-demo-content{padding:28px 16px 44px}.people-demo-heading{align-items:flex-start}.people-demo-heading h2{font-size:24px;line-height:32px}.people-demo-summary-line{gap:14px;overflow:auto}.people-demo-summary-line div{min-width:max-content}.people-demo-summary-line strong{font-size:17px}.people-demo-workspace{display:block;border-radius:12px}.people-demo-directory{border-right:0;border-bottom:1px solid var(--demo-outline)}.people-demo-directory-list{display:flex;overflow:auto;padding:0 10px 12px}.people-demo-directory-divider{display:none}.people-demo-directory-item{flex:0 0 170px}.people-demo-add-group{margin:4px 10px 14px}.people-demo-roster{padding:20px 14px 24px}.people-demo-filters{flex-wrap:wrap}.people-demo-search{width:100%}.people-demo-result-count{margin-left:0;order:3}.people-demo-table{min-width:700px}.people-demo-form-grid{grid-template-columns:1fr}.people-demo-modal{padding:20px}.people-demo-modal-layer{padding:12px}.people-demo-modal footer{position:sticky;bottom:-20px;background:#fff}}

/* Group detail: leaders stay above a deliberate divider, members below it. */
.people-demo-content{padding-top:32px}
.people-demo-roster-head{align-items:center}
.people-demo-roster-head>div{min-width:0}
.people-demo-roster-head .people-demo-btn{margin-left:auto}
.people-demo-group-summary{display:flex;align-items:center;gap:9px;padding:0 0 17px;color:var(--demo-muted);font-size:11px}
.people-demo-group-summary i{width:3px;height:3px;border-radius:50%;background:var(--demo-outline-dark)}
.people-demo-role-section{margin-top:20px}
.people-demo-role-section>header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.people-demo-role-section>header strong{color:var(--demo-ink);font-size:13px;font-weight:700}
.people-demo-role-section>header span{color:var(--demo-muted);font-size:11px}
.people-demo-members-section{margin-top:0}
.people-demo-role-divider{display:flex;align-items:center;gap:10px;margin:24px 0 0;padding:16px 0 10px;border-top:2px solid var(--demo-secondary);color:var(--demo-ink)}
.people-demo-role-divider:after{content:"";height:1px;flex:1;background:var(--demo-outline)}
.people-demo-role-divider span{font-size:13px;font-weight:700}.people-demo-role-divider b{color:var(--demo-muted);font-size:11px;font-weight:500}
.people-demo-group-modal{width:min(760px,100%)}
.people-demo-members-editor{margin-top:22px;border:1px solid var(--demo-outline);border-radius:10px;overflow:hidden;background:var(--demo-surface-low)}
.people-demo-members-editor-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--demo-outline)}
.people-demo-members-editor-head>div{display:grid;gap:3px}.people-demo-members-editor-head strong{font-size:13px}.people-demo-members-editor-head span{color:var(--demo-muted);font-size:10px}.people-demo-members-editor-head>span{color:var(--demo-muted);font-size:11px}
.people-demo-members-editor-list{display:grid;max-height:300px;overflow:auto;background:#fff}
.people-demo-member-editor-row{display:grid;grid-template-columns:20px minmax(0,1fr) 90px;align-items:center;gap:10px;min-height:48px;padding:7px 14px;border-bottom:1px solid #edf0f2;cursor:pointer}.people-demo-member-editor-row:last-child{border-bottom:0}.people-demo-member-editor-row:hover{background:#fbfcfd}.people-demo-member-editor-row input{width:15px;height:15px;accent-color:var(--demo-primary)}.people-demo-member-editor-name{display:flex;align-items:baseline;gap:8px;min-width:0}.people-demo-member-editor-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.people-demo-member-editor-name em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--demo-muted);font-size:10px;font-style:normal}.people-demo-member-editor-row select{min-height:30px;padding:4px 6px;border:1px solid var(--demo-outline);border-radius:6px;background:#fff;color:var(--demo-ink-variant);font-size:11px}.people-demo-member-editor-row select:disabled{opacity:.4}
.people-demo-btn.danger-outline{margin-right:auto;border-color:#fecaca;background:#fff;color:var(--demo-red)}.people-demo-btn.danger-outline:hover{background:#fff5f5;border-color:#fca5a5}

@media(max-width:740px){.people-demo-content{padding:20px 12px 32px}.people-demo-roster-head{align-items:flex-start}.people-demo-role-section{margin-top:16px}.people-demo-role-divider{margin-top:20px}.people-demo-member-editor-name{display:grid;gap:2px}.people-demo-members-editor-list{max-height:260px}}