:root { --hp-step:30px; --hp-toggle:28px; --hp-gap:8px; --hp-card-min:300px; --hp-line:#c8d2e4; --hp-ink:#101a2d; --hp-muted:#718096; }
.hp-native { display:none !important; }
.hp-register-selection { padding:16px; border-top:1px solid #dce2ed; }
.hp-register-selection h3 { font-size:16px; margin:0 0 8px; }
.hp-register-selection p { font-size:14px; color:var(--hp-muted); }
#task-assignee-picker { display:none !important; }
.hp-field { display:block; width:100%; min-width:0; min-height:44px; padding:10px 36px 10px 12px; position:relative; border:1px solid #dce2ed; border-radius:9px; background:#fff; color:var(--hp-ink); text-align:left; font-family:inherit; font-size:14px; font-weight:500; line-height:1.4; cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
.hp-field::after { content:'⌕'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#7353dc; }
.hp-field:disabled { opacity:.55; cursor:not-allowed; }
.hp-field[hidden] { display:none; }
.hp-dialog { width:min(1000px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:22px; border:1px solid #dce2ed; border-radius:18px; background:#f8faff; color:var(--hp-ink); box-shadow:0 24px 80px #0b152644; }
.hp-dialog::backdrop { background:#08112280; }
.hp-dialog>header,.hp-dialog>footer { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.hp-dialog h2 { margin:0; font-size:22px; line-height:1.3; }
.hp-dialog>header>button { border:0; background:transparent; font-size:28px; cursor:pointer; }
.hp-dialog>footer { margin-top:16px; flex-wrap:wrap; }
.hp-dialog>footer button { padding:10px 16px; border:1px solid #dbe1ec; border-radius:8px; background:white; cursor:pointer; font-weight:600; }
.hp-dialog>footer [data-hp-confirm] { background:#6c48e5; color:white; }
.hp-search { display:grid; gap:6px; margin:16px 0; font-size:12px; color:var(--hp-muted); }
.hp-search input { width:100%; min-height:44px; border:1px solid #dce2ed; border-radius:9px; padding:10px 12px; font-size:14px; background:white; color:var(--hp-ink); }
.hp-tree { overflow:auto; max-height:60dvh; padding:3px; overscroll-behavior:contain; scrollbar-gutter:stable; }
.hp-feedback { font-size:14px; color:#a43636; }
.hp-branch { list-style:none; margin:0; padding:0; position:relative; }
.hp-root { min-width:max(100%,calc(var(--hp-card-min) + var(--hp-toggle) + var(--hp-gap) + (var(--hp-tree-depth, 1) - 1) * var(--hp-step))); }
.hp-node { position:relative; padding:0; margin:0; list-style:none; outline:none; }
.hp-node>.hp-branch { margin-left:var(--hp-step); }
.hp-node>.hp-branch>.hp-node::before { content:''; position:absolute; left:calc(14px - var(--hp-step)); top:0; bottom:0; border-left:1px solid var(--hp-line); pointer-events:none; }
.hp-node>.hp-branch>.hp-node:last-child::before { display:none; }
.hp-node>.hp-branch>.hp-node>.hp-row::before { content:''; position:absolute; top:0; bottom:50%; left:calc(14px - var(--hp-step)); width:var(--hp-step); border-left:1px solid var(--hp-line); border-bottom:1px solid var(--hp-line); pointer-events:none; }
.hp-node[aria-expanded="true"]>.hp-row::after { content:''; position:absolute; left:14px; top:50%; bottom:0; border-left:1px solid var(--hp-line); pointer-events:none; }
.hp-row { display:flex; align-items:center; position:relative; min-height:58px; padding:2px 0; gap:var(--hp-gap); }
.hp-toggle { flex:0 0 var(--hp-toggle); width:var(--hp-toggle); height:28px; border:1px solid #d6deeb; border-radius:7px; color:var(--hp-ink); background:white; font-size:16px; z-index:1; cursor:pointer; }
.hp-toggle.hp-leaf { flex-basis:7px; width:7px; height:7px; margin-inline:10.5px; border:1px solid #b9c8df; border-radius:50%; padding:0; opacity:1; }
.hp-card { flex:1; min-width:var(--hp-card-min); display:flex; align-items:center; gap:10px; min-height:52px; padding:7px 10px; background:white; color:var(--hp-ink); border:1px solid #e0e6f0; border-radius:10px; text-align:left; cursor:pointer; transition:background .12s ease,border-color .12s ease; }
.hp-card:hover { border-color:#b5a4ee; background:#f6f3ff; }
.hp-card.is-selected { background:#0b1526; color:#fff; border-color:#14223a; }
.hp-icon { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; color:#1488ff; background:#ecf5ff; }
.hp-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hp-icon-shield,.hp-icon-profile,.hp-icon-headset { color:#9562ff; background:#eee8ff; }.is-selected .hp-icon { background:#28204d; }
.hp-icon-people { color:#57ab20; background:#edf8df; }
.hp-copy { display:grid; gap:3px; min-width:0; flex:1; }
.hp-copy strong { font-size:14px; line-height:1.3; font-weight:650; overflow-wrap:break-word; word-break:normal; hyphens:none; }
.hp-copy small { font-size:12px; line-height:1.4; color:var(--hp-muted); overflow-wrap:break-word; word-break:normal; }
.is-selected .hp-copy small { color:#b5c0d2; }
.hp-status { flex:0 0 auto; font-size:12px; font-weight:600; line-height:1.3; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.hp-status::before { content:''; width:7px; height:7px; border-radius:50%; background:#9aa6ba; flex-shrink:0; }.hp-status.is-active::before { background:#66bc22; }
.hp-check { color:#a5e83b; font-weight:700; }
.hp-node:focus>.hp-row>.hp-card,.hp-field:focus-visible,.hp-toggle:focus-visible { outline:2px solid #8758ee; outline-offset:2px; }
.hp-more { padding:7px 0 7px 36px; list-style:none; }.hp-more button { background:white; color:#6944d7; border:1px solid #ded9f0; border-radius:8px; padding:8px 10px; cursor:pointer; }
.hp-empty,.hp-count { font-size:14px; color:var(--hp-muted); }
@media(max-width:800px){.hp-status{font-size:0;gap:0}.hp-status::before{width:8px;height:8px}}
@media(max-width:600px){:root{--hp-step:26px;--hp-toggle:26px;--hp-gap:6px;--hp-card-min:260px}.hp-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);padding:12px;}.hp-tree{max-height:65dvh;}.hp-row{min-height:52px}.hp-card{min-height:48px;padding:6px 8px;gap:8px}.hp-icon{flex-basis:32px;width:32px;height:32px}.hp-icon svg{width:19px;height:19px}.hp-copy strong{font-size:13px}.hp-copy small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hp-card{transition:none;}}