.personnel-admin { display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:20px; max-width:1280px; margin:0 auto; align-items:start; }
.personnel-mode-tabs { grid-column:1 / -1; display:flex; padding:4px; gap:4px; background:#eaeaee; border-radius:12px; margin-bottom:12px; }
.personnel-mode-tabs button { flex:1; min-height:44px; border:0; border-radius:9px; background:none; font:inherit; color:#62656b; }
.personnel-mode-tabs button[aria-selected=true] { background:#fff; color:#202124; font-weight:600; box-shadow:0 1px 4px #0001; }
.personnel-account-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:20px; }
[data-credential-form] label { display:block; margin:20px 0; }
.personnel-source { display:block; font-size:12px; color:#777; margin-top:3px; }
.personnel-directory,.personnel-editor { min-width:0; background:#fff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; }
.personnel-directory { position:sticky; top:90px; max-height:calc(100dvh - 116px); overflow:auto; }
.personnel-list-tools { position:sticky; top:0; z-index:1; background:#fff; padding:16px; border-bottom:1px solid #eceef1; }
.personnel-list-tools>div { display:flex; gap:10px; margin-top:10px; }
.personnel-list-tools>div>* { flex:1; min-width:0; }
.personnel-admin input:not([type=checkbox]),.personnel-admin select { width:100%; box-sizing:border-box; min-height:44px; border:1px solid #d4d7dd; border-radius:9px; padding:9px 11px; background:#fff; font:inherit; font-size:16px; color:#222; }
.personnel-admin button { cursor:pointer; }
.personnel-admin .primary-button { min-height:44px; padding:10px 16px; border-radius:10px; font-size:15px; box-shadow:none; }
/* 岗位／功能／页面这类"非人员"行仍用这套；一行人已改用共用的 .person-row。 */
.personnel-row { display:flex; align-items:center; gap:12px; width:100%; padding:16px; border:0; border-bottom:1px solid #f0f1f3; background:#fff; text-align:start; color:inherit; }
.personnel-row:hover,.personnel-row.is-selected { background:#fff1f2; }
.personnel-row-copy { flex:1; min-width:0; }
.personnel-row strong { display:block; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.personnel-row small { display:block; margin-top:4px; font-size:12px; color:#727780; overflow-wrap:anywhere; }
.personnel-person-heading { padding:24px 24px 16px; }
.personnel-person-heading h2 { margin:0; font-size:22px; line-height:1.4; overflow-wrap:anywhere; }
.personnel-person-heading p { margin:6px 0 0; color:#727780; font-size:14px; }
.personnel-tabs { display:flex; padding:0 24px; border-bottom:1px solid #e5e7eb; gap:24px; }
.personnel-tabs button { border:0; border-bottom:3px solid transparent; background:none; padding:12px 0; color:#666; font-size:16px; }
.personnel-tabs button[aria-selected=true] { color:#e60012; border-bottom-color:#e60012; font-weight:600; }
.personnel-detail-body { padding:24px; }
.personnel-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.personnel-field-grid label { min-width:0; display:block; font-size:14px; }
.personnel-field-grid label>span { display:block; margin-bottom:8px; color:#444; }
.personnel-save { display:flex; align-items:center; gap:12px; justify-content:flex-end; padding:20px 0 0; }
.personnel-save .primary-button { min-width:120px; }
.personnel-admin section { margin:24px 0; }
.personnel-admin section h3 { font-size:15px; font-weight:600; margin:0 0 8px; }
.personnel-permission { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; border-bottom:1px solid #f0f1f3; }
.personnel-permission label { display:flex; align-items:center; gap:12px; flex:1; min-width:0; cursor:pointer; padding:8px 0; font-size:15px; }
.personnel-permission input[type=checkbox] { width:21px; height:21px; flex:none; accent-color:#e60012; }
.personnel-permission small { display:block; font-size:12px; margin-top:3px; color:#777; }
.personnel-admin .text-button { background:none; border:0; padding:10px 0; min-height:44px; font-size:12px; color:#666; }
.personnel-help { color:#777; font-size:13px; line-height:1.6; margin:0 0 12px; }
.personnel-store-picker { border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin:16px 0; }
.personnel-store-picker label { display:inline-flex; align-items:center; gap:8px; min-height:44px; width:50%; font-size:14px; }
.personnel-store-picker input { accent-color:#e60012; width:20px; height:20px; flex:none; }
.personnel-select { display:flex; align-items:center; gap:20px; justify-content:space-between; min-height:60px; font-size:15px; }
.personnel-select select { max-width:230px; }
.personnel-lifecycle { margin-top:24px; padding-top:16px; border-top:1px solid #eceef1; }
.personnel-lifecycle [data-status-open] { color:#c62230; font-size:14px; }
.personnel-lifecycle [data-status-form] { padding:16px; background:#fff5f5; border-radius:12px; font-size:14px; }
.personnel-lifecycle label { display:block; }
.personnel-feedback { margin:0; flex:1; color:#12844c; font-size:14px; }
.personnel-feedback:empty { display:none; }
.personnel-feedback.is-error { color:#c62230; }
.personnel-empty { padding:40px 20px; color:#777; font-size:15px; text-align:center; }
.personnel-admin button:focus-visible,.personnel-admin input:focus-visible,.personnel-admin select:focus-visible { outline:2px solid #e60012; outline-offset:2px; }
.personnel-admin button:disabled { cursor:wait; opacity:.6; }
@media(max-width:760px) {
  .personnel-admin { display:block; }
  .personnel-admin:not(.has-person) .personnel-editor,.personnel-admin.has-person .personnel-directory { display:none; }
  .personnel-directory { position:static; max-height:none; }
  .personnel-editor { border:0; border-radius:12px; }
  .personnel-person-heading { padding:20px 16px 12px; }
  .personnel-person-heading h2 { font-size:19px; }
  .personnel-detail-body { padding:16px; }
  .personnel-tabs { padding:0 16px; }
  .personnel-field-grid { grid-template-columns:1fr; gap:16px; }
  .personnel-admin.has-person { padding-bottom:110px; }
  /* One reachable save action, independent of the long card's clipping/scroll
     ancestors. Feedback lives here too, not several screens below the edit. */
  .personnel-save { position:fixed; z-index:40; inset-inline:0; bottom:0; flex-direction:column; align-items:stretch; gap:8px; background:#fff; border-top:1px solid #eceef1; padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  .personnel-save .primary-button { width:100%; }
  .personnel-select select { max-width:58%; }
  .personnel-permission { gap:8px; }
  .personnel-permission .text-button { max-width:86px; line-height:1.4; }
}

/* First UI preview: one stable editor, progressive disclosure, unchanged owner API. */
#main:has(.personnel-admin) { width:min(100%,1360px); min-height:0; padding-bottom:16px; }
.personnel-admin { max-width:none; grid-template-columns:300px minmax(0,1fr); gap:16px; }
.personnel-mode-tabs { margin:0; padding:4px; width:320px; max-width:100%; }
.personnel-directory { top:80px; max-height:calc(100dvh - 160px); }
.personnel-list-tools { padding:14px; }
.personnel-list-tools>[data-admin-org] { margin-top:10px; font-size:13px; }
.personnel-list-tools>div { gap:8px; }
.personnel-list-tools .primary-button { font-size:13px; padding-inline:8px; }
.personnel-editor { height:calc(100dvh - 160px); min-height:440px; display:flex; flex-direction:column; border-radius:16px; }
.personnel-person-heading { flex:none; padding:20px 24px 14px; border-bottom:1px solid #f0f1f3; }
.personnel-person-heading h2 { font-size:21px; }
.personnel-person-heading p { margin:4px 0 0; font-size:13px; }
.personnel-overview { display:inline-block; margin-top:10px; border-radius:5px; background:#f1f3f5; padding:4px 8px; font-size:12px; color:#5d626d; }
.personnel-tabs { flex:none; }
.personnel-detail-body { padding:0; min-height:0; flex:1; display:flex; flex-direction:column; overflow:auto; }
.personnel-detail-body>form { display:flex; flex-direction:column; flex:1; min-height:0; margin:0; }
.personnel-form-scroll { padding:18px 24px; overflow:auto; overscroll-behavior:contain; flex:1; min-height:0; }
.personnel-modules { display:grid; gap:10px; }
.permission-module { border:1px solid #e7e9ec; border-radius:10px; background:white; }
.permission-module[open] { border-color:#d9dde4; }
.permission-module-summary { display:flex; gap:12px; align-items:center; padding:16px; list-style:none; cursor:pointer; }
.permission-module-summary::-webkit-details-marker { display:none; }
.permission-module-summary:hover { background:#fafbfc; border-radius:10px; }
.permission-module-copy { display:block; flex:1; min-width:0; }
.permission-module-copy>strong { display:block; font-size:15px; font-weight:600; color:#262b33; }
.permission-module-result { display:block; margin-top:6px; font-size:13px; line-height:1.5; color:#777d87; overflow-wrap:anywhere; }
.permission-module-arrow { color:#9298a0; transition:transform .16s; font-size:20px; }
.permission-module[open] .permission-module-arrow { transform:rotate(180deg); }
.permission-module-body { padding:0 16px 16px; border-top:1px solid #f0f1f3; }
.personnel-permission { min-height:52px; }
.personnel-permission label { font-size:14px; padding-block:10px; }
.personnel-permission input[type=checkbox] { width:20px; height:20px; }
.personnel-permission.is-personal small { color:#9d4c00; background:#fff4e5; border-radius:4px; padding:2px 5px; display:inline-block; }
.personnel-admin [hidden] { display:none!important; }
.personnel-select { font-size:14px; min-height:58px; gap:12px; }
.personnel-select select { max-width:52%; font-size:14px; }
.personnel-help { margin:12px 0; font-size:12px; }
.personnel-subheading { font-size:13px; color:#737985; font-weight:500; margin:18px 0 4px; padding-top:14px; border-top:1px solid #e9ebee; }
.personnel-dependent { padding-inline-start:12px; border-inline-start:2px solid #eceef1; }
.personnel-preserved { font-size:12px; color:#777d87; margin-top:8px; }
.personnel-preserved>summary { padding:6px 0; cursor:pointer; }
.personnel-preserved .personnel-dependent { margin-top:10px; opacity:.7; }
.personnel-save { position:static; flex:none; display:flex; flex-direction:row; align-items:center; background:#fff; border-top:1px solid #e8eaed; margin:0; padding:14px 24px max(14px,env(safe-area-inset-bottom)); gap:14px; }
.personnel-save-copy { flex:1; min-width:0; font-size:13px; color:#717782; }
.personnel-save .primary-button { width:auto; min-width:108px; min-height:42px; }
.personnel-save [data-view-save] { max-width:52%; min-height:44px; height:auto; white-space:normal; }
.personnel-save button:disabled { opacity:1; background:#eceef1; color:#949aa4; border-color:#eceef1; cursor:default; }
.personnel-feedback { font-size:12px; margin-top:4px; }
.personnel-profile-group { margin:0 0 24px!important; }
.personnel-profile-group h3 { padding-bottom:12px; border-bottom:1px solid #eceef1; margin-bottom:16px!important; }
.personnel-account-actions { margin:0; gap:12px; }
.personnel-account-actions>p { width:100%; margin:0; font-size:13px; color:#777; }
.personnel-account-actions>.text-button { border:1px solid #e3e6ea; border-radius:8px; padding:10px 14px; color:#303742; font-size:14px; }
.personnel-lifecycle { margin-top:12px; }
@media(max-width:760px) {
  #main:has(.personnel-admin) { padding:12px 12px 0; }
  .personnel-admin.has-person { padding-bottom:0; height:calc(100dvh - 76px - env(safe-area-inset-top)); display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .personnel-mode-tabs { width:100%; margin-bottom:12px; }
  .personnel-admin .personnel-editor { height:auto; flex:1; min-height:0; border-radius:12px 12px 0 0; }
  .personnel-person-heading { padding:16px 16px 12px; }
  .personnel-person-heading h2 { font-size:18px; }
  .personnel-tabs { padding-inline:16px; gap:22px; }
  .personnel-tabs button { padding:10px 0; font-size:14px; }
  .personnel-form-scroll { padding:12px; }
  .permission-module-summary { padding:14px 12px; }
  .permission-module-body { padding:0 12px 12px; }
  .permission-module-result { font-size:12px; }
  .personnel-save { padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  .personnel-save .primary-button { width:auto; min-width:96px; }
  .personnel-select select { max-width:52%; }
  .personnel-store-picker label { width:100%; }
  .personnel-directory { max-height:none; }
}
@media(prefers-reduced-motion:reduce) { .permission-module-arrow { transition:none; } }

/* Four compact lenses; same editor and owner data, no horizontal permission grid. */
.personnel-mode-tabs { width:min(100%,580px); }
.personnel-mode-tabs button { font-size:14px; padding-inline:5px; }
.personnel-row { padding:9px 12px; gap:10px; min-height:52px; }
.personnel-row small { margin-top:3px; }
.personnel-filters { display:grid!important; grid-template-columns:minmax(70px,.75fr) minmax(0,1.65fr); }
.personnel-filters select { font-size:13px; padding-inline:8px; }
.personnel-department { border-bottom:1px solid #e8eaed; }
.personnel-department>summary { padding:11px 12px; cursor:pointer; background:#f6f7f9; font-size:13px; color:#5b616c; font-weight:600; }
.personnel-department>summary small { float:inline-end; margin-inline-start:8px; font-weight:400; }
.personnel-default-card { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding:8px 10px; border-radius:8px; background:#f6f7f9; font-size:12px; color:#606772; }
.personnel-default-card>span { flex:1; min-width:150px; }
.personnel-default-card .text-button { color:#ad0010; padding:0; }
.personnel-person-link { background:none; border:0; padding:0; color:inherit; text-align:start; min-height:44px; }
.personnel-bulk-tools { flex:none; padding:10px 12px; border-bottom:1px solid #eceef1; display:flex; flex-wrap:wrap; gap:8px; }
.personnel-bulk-tools>input { flex:1; min-width:120px; }
.personnel-bulk-tools>select { width:auto; max-width:40%; }
.personnel-bulk-tools>div { width:100%; display:flex; gap:24px; }
.personnel-bulk-tools .text-button { padding-block:4px; color:#505762; }
.personnel-bulk-list { overflow:auto; min-height:0; flex:1; }
.personnel-switch { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; cursor:pointer; }
.personnel-switch input,.personnel-apply-existing input { width:20px; height:20px; accent-color:#e60012; flex:none; }
.personnel-apply-existing { display:flex; gap:10px; align-items:center; font-size:13px; padding:14px 4px; line-height:1.6; }
.personnel-add-menu { position:fixed; z-index:90; background:white; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 28px #0002; padding:6px; animation:personnel-menu-in .12s ease-out; }
.personnel-add-menu button { border:0; background:white; color:#202124; text-align:start; font-size:15px; width:100%; min-height:46px; padding:10px; border-radius:8px; }
.personnel-add-menu button:hover { background:#f5f6f8; }
@keyframes personnel-menu-in { from { opacity:0;transform:translateY(-4px) scale(.98); } to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:reduce) { .personnel-add-menu { animation:none; } }