:root { color-scheme:light; --bg:#f8f9fc; --paper:#fff; --ink:#292b3b; --muted:#74798d; --line:#e9eaf1; --purple:#7d6bd0; --purple-bg:#f0edf9; --green:#357257; --green-bg:#eaf5ef; --red:#a45351; --red-bg:#fbeeed; --blue:#536fa2; --blue-bg:#edf2fa; --amber:#886633; --amber-bg:#faf3e8; }

* { box-sizing:border-box; }
    html { scroll-behavior:auto; scroll-padding-top:72px; }
    body { margin:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:13px; color:var(--ink); background:var(--bg); line-height:1.5; }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; }
    .preview-bar { min-height:32px; padding:7px 25px; background:#efedf6; color:#8d83ad; font-size:10px; letter-spacing:.2px; display:flex; align-items:center; justify-content:center; gap:9px; }
    .preview-bar strong { font-weight:650; color:#7d6caa; }
    .preview-dot { width:5px; height:5px; border-radius:50%; background:#a797d6; }
    .shell { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:calc(100vh - 32px); }
    .shell > main { min-width:0; }
    .sidebar { padding:31px 15px 20px; border-right:1px solid var(--line); background:#fdfdff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
    .brand { padding:0 15px; font-size:31px; font-weight:790; letter-spacing:-1.7px; line-height:1; }
    .brand b { color:#9e8cdd; }
    .brand small { display:block; color:#9a99ac; font-size:9px; font-weight:500; letter-spacing:3.4px; padding-left:2px; margin-top:8px; }
    .nav-group { font-size:8px; letter-spacing:1.6px; color:#a5a5b5; text-transform:uppercase; margin:39px 15px 10px; }
    .nav-group.second { margin-top:25px; }
    .nav-item { display:flex; align-items:center; gap:12px; padding:11px 14px; margin:3px 0; color:#8d8fa1; border-radius:8px; font-size:11px; }
    .nav-item svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; flex-shrink:0; }
    .nav-item.active { color:#826fd0; background:var(--purple-bg); font-weight:600; }
    .nav-item .count { margin-left:auto; color:#aba2c8; font-size:10px; }
    .sidebar-footer { margin-top:auto; padding:20px 13px 0; color:#a4a3b3; font-size:10px; }
    .sidebar-footer .workspace { border-top:1px solid var(--line); padding-top:17px; color:#7f8094; margin-bottom:4px; }
    .topbar { height:65px; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 35px; }
    .breadcrumb { color:#b1b1bf; font-size:10px; display:flex; gap:11px; }
    .breadcrumb strong { color:#7a7c8f; font-weight:500; }
    .top-right { display:flex; align-items:center; gap:17px; color:#a1a1b0; font-size:10px; }
    .avatar { display:inline-flex; align-items:center; justify-content:center; width:31px; height:31px; border-radius:50%; background:#efebfa; color:#9380c5; font-size:10px; font-weight:650; flex-shrink:0; }
    .avatar.peach { background:#f9ece3; color:#bd9376; }
    .avatar.mint { background:#e5f2ec; color:#78a58e; }
    .avatar.blue { background:#eaf0f9; color:#8a9ec3; }
    .content { max-width:1520px; margin:auto; padding:33px 35px 44px; }
    .eyebrow { font-size:9px; font-weight:600; letter-spacing:1.5px; color:#ada1c9; margin-bottom:9px; text-transform:uppercase; }
    .title-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
    h1,h2,h3,p { margin:0; }
    h1 { font-size:29px; font-weight:650; letter-spacing:-.9px; line-height:1.3; }
    .subtitle { color:#a0a1b0; font-size:11px; margin-top:7px; }
    .title-actions { display:flex; gap:9px; align-items:center; }
    .visual-button { display:inline-flex; justify-content:center; align-items:center; gap:7px; border:1px solid var(--line); border-radius:7px; padding:9px 13px; background:#fff; color:#8e8fa2; font-size:10px; white-space:nowrap; }
    .visual-button.primary { color:white; background:#8371cf; border-color:#8371cf; box-shadow:0 3px 6px #7563b414; }
    .directory { background:white; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 3px 7px #2c285103; }
    .directory-tabs { display:flex; align-items:center; gap:20px; padding:0 22px; min-height:57px; border-bottom:1px solid var(--line); }
    .tab { position:relative; display:flex; align-items:center; gap:7px; padding:19px 0; color:#999aab; font-size:10px; white-space:nowrap; }
    .tab.active { color:#7b68c1; font-weight:600; }
    .tab.active::after { content:""; position:absolute; height:2px; background:#9b84dd; left:0; right:0; bottom:0; border-radius:3px; }
    .tab-count { padding:0 5px; border-radius:4px; background:#f3f2f7; color:#aaa4ba; font-size:9px; font-weight:500; }
    .tab.active .tab-count { color:#8c7cbd; background:#f0edf9; }
    .review-tab { margin-left:auto; color:#bb8770; }
    .review-tab .tab-count { background:#fbf0e9; color:#c08f79; }
    .toolbar { display:flex; align-items:center; gap:9px; padding:17px 22px; }
    .search { display:flex; align-items:center; gap:9px; max-width:340px; flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:6px; color:#b0b1bf; font-size:10px; }
    .search svg { width:13px; height:13px; stroke:#b3b0c2; stroke-width:1.5; fill:none; }
    .toolbar-spacer { flex:1; }
    .filter { border:1px solid var(--line); padding:8px 10px; border-radius:6px; font-size:9px; color:#999bad; white-space:nowrap; }
    .table-scroll { overflow-x:auto; }
    table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }
    th { padding:12px 15px; background:#fcfcfe; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#a3a4b4; font-size:9px; font-weight:500; }
    td { padding:19px 15px; border-bottom:1px solid #f0f0f6; font-size:10px; vertical-align:middle; }
    th:first-child,td:first-child { padding-left:22px; }
    th:last-child,td:last-child { padding-right:22px; }
    tbody tr:last-child td { border-bottom:0; }
    tr.highlight { background:#fdfbff; }
    .person { display:flex; gap:10px; align-items:center; }
    .person-name { font-weight:600; color:#55576c; font-size:11px; }
    .person-name:hover { color:#8771c8; }
    .subline { display:block; font-size:9px; color:#aaabba; margin-top:4px; }
    .department { color:#76798f; font-size:10px; }
    .pill { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:5px; font-size:9px; font-weight:500; line-height:1.4; }
    .pill::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }
    .pill.blue { color:var(--blue); background:var(--blue-bg); }
    .pill.purple { color:#9b87cc; background:var(--purple-bg); }
    .pill.green { color:var(--green); background:var(--green-bg); }
    .pill.red { color:var(--red); background:var(--red-bg); }
    .pill.amber { color:var(--amber); background:var(--amber-bg); }
    .pill.gray { color:#a1a2b2; background:#f2f3f7; }
    .vpn-sub { color:#b3a4a2; font-size:8px; margin-top:5px; }
    .vpn-sub.neutral { color:#aaabba; }
    .row-arrow { color:#c6bfdc; font-size:16px; }
    .table-footer { display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-top:1px solid var(--line); color:#afadbd; font-size:9px; }
    .pagination { display:flex; align-items:center; gap:13px; }
    .pagination span { padding:3px 7px; background:#f2effa; border-radius:4px; color:#9d8ac7; }
    .source-strip { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:16px; padding:0 2px; color:#b0adbf; font-size:9px; }
    .source-labels { display:flex; gap:17px; }
    .source-labels span::before { content:""; display:inline-block; height:4px; width:4px; background:#c4b9d9; border-radius:50%; margin-right:5px; vertical-align:middle; }
    .profile-section { margin-top:52px; padding-top:31px; border-top:1px solid var(--line); scroll-margin-top:20px; }
    .profile-section > .eyebrow { margin-bottom:14px; }
    .profile-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; align-items:start; }
    .panel { background:white; border:1px solid var(--line); border-radius:10px; }
    .employee-summary { padding:25px 22px; }
    .big-avatar { width:52px; height:52px; font-size:17px; margin-bottom:15px; }
    .employee-summary h2 { font-size:19px; letter-spacing:-.5px; font-weight:650; }
    .employee-role { font-size:10px; color:#a1a0b2; margin:5px 0 14px; }
    .profile-tags { display:flex; gap:5px; flex-wrap:wrap; }
    .details { margin:21px 0 0; padding-top:6px; border-top:1px solid var(--line); }
    .detail { margin:13px 0; }
    dt { color:#b0acbd; font-size:9px; margin-bottom:4px; }
    dd { margin:0; color:#7b7d92; font-size:10px; overflow-wrap:anywhere; }
    .id-label { margin-top:18px; font-size:8px; color:#c0bbcd; }
    .profile-main { min-width:0; }
    .profile-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
    .profile-topline h2 { font-size:20px; font-weight:620; letter-spacing:-.6px; }
    .back-link { color:#a495c7; font-size:10px; }
    .review-banner { display:flex; align-items:flex-start; gap:11px; padding:14px 16px; background:#fcf4f0; border:1px solid #f2e4dc; border-radius:8px; margin-bottom:16px; }
    .review-icon { width:20px; height:20px; display:flex; justify-content:center; align-items:center; border:1px solid #e7c5b4; border-radius:50%; color:#c08f78; font-size:10px; flex-shrink:0; margin-top:1px; }
    .review-banner strong { color:#ac7d69; font-size:11px; font-weight:600; }
    .review-banner p { color:#c0a08f; font-size:10px; margin-top:3px; }
    .account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
    .account-card { padding:18px; }
    .account-heading { display:flex; gap:9px; align-items:center; margin-bottom:16px; }
    .account-icon { height:27px; width:27px; border:1px solid var(--line); border-radius:7px; color:#a897c9; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex-shrink:0; }
    .account-heading h3 { font-size:11px; font-weight:600; color:#73758b; }
    .account-heading small { display:block; font-size:8px; color:#b3aebe; margin-top:2px; }
    .account-heading .pill { margin-left:auto; }
    .account-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin:0; }
    .account-fields .wide { grid-column:1/-1; }
    .radius { grid-column:1/-1; }
    .radius-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin:0; }
    .protocols { display:flex; gap:5px; margin-top:15px; }
    .protocol { padding:3px 7px; background:#f5f3fa; color:#a495bd; font-size:8px; border-radius:4px; }
    .radius-note { font-size:9px; color:#b3a9bd; margin-top:10px; line-height:1.65; }
    .session-row { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding-top:13px; margin-top:15px; color:#9b92aa; font-size:10px; }
    .session-row .pill { margin-left:auto; }
    .checklist { grid-column:1/-1; padding:18px; }
    .checklist-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; }
    .checklist-head h3 { font-size:11px; color:#7d7c92; font-weight:600; }
    .checklist-head span { font-size:9px; color:#b0a5c2; }
    .checklist-line { display:flex; align-items:center; gap:9px; padding:10px 0; border-top:1px solid #f0eef5; font-size:10px; color:#9992aa; }
    .checkmark { display:flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:4px; border:1px solid #ded9e9; color:#b2a2d2; font-size:9px; }
    .checkmark.done { background:#edf5f0; border-color:#d5e8dc; color:#91b59e; }
    .checklist-line .assignee { margin-left:auto; font-size:8px; color:#b8b1c3; }
    .design-footer { text-align:center; color:#c0b9cd; font-size:9px; margin-top:30px; }
    @media(min-width:1600px) { .content { padding-top:44px; } td { padding-top:24px; padding-bottom:24px; } }
    @media(max-width:1200px) { .shell { grid-template-columns:160px minmax(0,1fr); } .sidebar { padding-left:10px; padding-right:10px; } .brand { font-size:27px; } .content { padding:27px 25px 35px; } .topbar { padding:0 25px; } th,td { padding-left:11px; padding-right:11px; } .department-col { display:none; } .profile-layout { grid-template-columns:210px minmax(0,1fr); gap:15px; } .radius-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media(max-width:900px) { .shell { grid-template-columns:1fr; } .sidebar { display:none; } .content { max-width:1000px; } .profile-layout { grid-template-columns:200px minmax(0,1fr); } .account-grid { grid-template-columns:1fr; } .account-card,.radius,.checklist { grid-column:1; } .topbar { height:55px; } }
    @media(max-width:600px) {
      .preview-bar { font-size:8px; padding:7px 10px; gap:6px; } .preview-bar .optional { display:none; }
      .topbar { padding:0 17px; height:51px; } .breadcrumb { font-size:9px; gap:7px; } .top-right { gap:0; } .top-right .date { display:none; } .avatar { width:28px; height:28px; font-size:9px; }
      .content { padding:25px 14px 30px; } h1 { font-size:27px; } .title-row { align-items:flex-start; gap:8px; margin-bottom:19px; } .title-actions { padding-top:5px; } .title-actions .secondary { display:none; } .visual-button { padding:8px 9px; font-size:9px; } .subtitle { font-size:10px; max-width:220px; line-height:1.65; }
      .directory { border:0; box-shadow:none; background:transparent; overflow:visible; } .directory-tabs { gap:15px; min-height:48px; padding:0 1px; overflow-x:auto; } .tab { font-size:9px; padding:15px 0; gap:4px; } .tab-count { font-size:8px; padding:0 4px; } .review-tab { margin-left:0; } .toolbar { padding:14px 0; gap:7px; } .search { background:#fff; font-size:9px; padding:9px; max-width:none; } .filter { background:#fff; font-size:8px; padding:9px 8px; } .toolbar-spacer,.columns-filter { display:none; }
      .table-scroll { overflow:visible; } table { white-space:normal; } thead { display:none; } tbody { display:grid; gap:10px; } tbody tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; padding:14px 13px 12px; gap:13px 6px; } tbody tr.highlight { background:#fefcff; border-color:#e6dff3; } td,th:first-child,td:first-child,th:last-child,td:last-child { border:0; padding:0; } td.employee-col { grid-column:1/3; } td.department-col { display:none; } td.lifecycle-col { grid-column:3; text-align:right; } .person { gap:8px; } .person-name { font-size:11px; } .subline { font-size:8px; margin-top:3px; } .pill { font-size:8px; gap:4px; padding:4px 6px; } .pill::before { width:3px; height:3px; } .lifecycle-col .pill { font-size:7px; padding:4px 5px; } td.access-col::before { content:attr(data-label); display:block; font-size:8px; color:#b3acbf; margin-bottom:5px; } .vpn-sub { font-size:7px; margin-top:4px; } td.arrow-col { display:none; } .table-footer { padding:15px 1px; font-size:8px; border-top:0; } .source-strip { font-size:8px; margin-top:4px; gap:7px; } .source-labels { gap:10px; }
      .profile-section { margin-top:37px; padding-top:26px; } .profile-layout { grid-template-columns:1fr; gap:17px; } .employee-summary { padding:21px; } .employee-summary .details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 13px; } .employee-summary .detail { margin:10px 0; } .employee-summary .details .email { grid-column:1/-1; } .big-avatar { width:43px; height:43px; font-size:14px; margin-bottom:12px; } .profile-topline h2 { font-size:20px; } .account-fields { gap:15px 10px; } .account-card { padding:17px; } .account-heading { gap:8px; } .account-heading h3 { font-size:11px; } .account-heading .pill { font-size:8px; } .radius-fields { gap:15px 10px; } .review-banner { padding:13px; } .review-banner p { font-size:9px; } .session-row { font-size:9px; } .back-link { font-size:9px; } .design-footer { font-size:8px; }
    }
    .preview-bar { color:#77698e; }
    .subtitle { font-size:13px; color:#75798c; }
    .eyebrow { color:#8977ac; }
    .nav-item { font-size:12px; color:#73778c; }
    .nav-group { color:#858299; }
    .breadcrumb { font-size:11px; color:#8b879c; }
    .top-right { color:#7c7b8e; }
    .visual-button { font-size:11px; color:#74758c; }
    .visual-button.primary { color:#fff; }
    .tab { font-size:12px; color:#74778b; }
    .tab-count { color:#7c738e; font-size:10px; }
    .review-tab { color:#9a6d55; }
    .search { color:#818195; font-size:12px; }
    .filter { color:#777b8f; font-size:11px; }
    th { font-size:11px; color:#76798d; }
    td { font-size:12px; }
    .person-name { font-size:13px; color:#4a4e63; }
    .subline { font-size:11px; color:#7b8095; }
    .department { font-size:12px; color:#697087; }
    .pill { font-size:10px; }
    .pill.purple { color:#755aa9; }
    .pill.gray { color:#6c7286; }
    .vpn-sub { color:#987365; font-size:10px; }
    .vpn-sub.neutral { color:#808398; }
    .table-footer,.source-strip { color:#827b95; font-size:10px; }
    .employee-role { color:#7a758e; font-size:12px; }
    dt { color:#80798f; font-size:10px; }
    dd { color:#64677f; font-size:12px; }
    .account-heading h3 { color:#62657d; font-size:13px; }
    .account-heading small { color:#81778f; font-size:10px; }
    .protocol { color:#7f6b99; font-size:10px; }
    .radius-note { color:#85768e; font-size:11px; }
    .session-row { color:#766780; font-size:12px; }
    .checklist-head h3 { color:#6b627d; font-size:13px; }
    .checklist-head span { color:#857793; font-size:10px; }
    .checklist-line { color:#7b708d; font-size:12px; }
    .checklist-line .assignee { color:#8b7c99; font-size:10px; }
    .review-banner strong { color:#95654f; font-size:12px; }
    .review-banner p { color:#9d7b68; font-size:11px; }
    @media(max-width:600px) { .preview-bar { font-size:9px; } .breadcrumb { font-size:10px; } .subtitle { font-size:11px; } .visual-button { font-size:10px; } .tab { font-size:10px; } .tab-count { font-size:9px; } .search { font-size:10px; } .filter { font-size:9px; } .person-name { font-size:13px; } .subline { font-size:10px; } .pill { font-size:10px; } .lifecycle-col .pill { font-size:8px; } td.access-col::before { font-size:9px; color:#82758f; } .vpn-sub { font-size:8px; } .table-footer,.source-strip { font-size:9px; } .account-heading h3 { font-size:13px; } .account-heading .pill { font-size:10px; } .session-row { font-size:11px; } .review-banner p { font-size:10px; } }

    .pill.status-active { color:#13744a; background:#e7f5ec; }
    .pill.status-inactive { color:#b83241; background:#fdebed; }
    .pill.status-active::before,.pill.status-inactive::before { opacity:1; }
    .attention-note { display:block; font-size:9px; color:#99672e; margin-top:4px; line-height:1.45; }
    @media(max-width:600px) { .attention-note { font-size:8px; } }

    .directory { overflow:visible; }
    .table-tools { flex-wrap:wrap; gap:10px; }
    .table-tools .search { min-width:200px; max-width:none; padding:0 11px; min-height:37px; flex:1 1 220px; }
    .search input { border:0; outline:0; width:100%; min-width:0; padding:9px 0; background:transparent; font:inherit; font-size:12px; color:#5e6176; }
    .search input::placeholder { color:#9290a4; }
    .search:focus-within { border-color:#ac99d9; box-shadow:0 0 0 3px #f1edf9; }
    .tools-group { display:flex; gap:8px; align-items:center; position:relative; }
    .quick-department,.tool-button { font-size:11px; color:#74758d; background:#fff; border:1px solid var(--line); border-radius:6px; min-height:37px; }
    .quick-department { padding:8px 24px 8px 10px; max-width:175px; }
    .tool-button { padding:8px 10px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; user-select:none; }
    .tool-button svg,.header-filter svg { width:14px; height:14px; stroke:currentColor; stroke-width:1.4; fill:none; flex-shrink:0; }
    .tool-button.icon-only { padding:9px; }
    details > summary { list-style:none; }
    details > summary::-webkit-details-marker { display:none; }
    summary:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid #a78bd8; outline-offset:3px; }
    .tool-popover[open] > summary { border-color:#c5b6e7; color:#8065b1; background:#faf8fd; }
    .columns-menu,.density-menu { position:relative; }
    .filters-panel,.columns-panel,.density-panel,.column-filter-panel { position:absolute; z-index:30; padding:18px; background:#fff; border:1px solid #e5dfef; border-radius:10px; box-shadow:0 12px 34px #30234618,0 2px 6px #30234608; color:#6a657a; white-space:normal; }
    .filters-panel { width:420px; max-width:calc(100vw - 40px); top:calc(100% + 10px); right:0; }
    .popover-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:18px; }
    .popover-heading strong { font-size:13px; color:#534e64; font-weight:600; }
    .popover-heading > span { font-size:9px; color:#9b90ac; }
    .filter-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 12px; }
    .filter-field { display:flex; flex-direction:column; gap:7px; font-size:10px; color:#8b8099; }
    .filter-field select { width:100%; background:#fdfcfe; padding:8px 5px; border:1px solid var(--line); border-radius:5px; color:#747085; font:inherit; font-size:10px; }
    .status-filter { grid-column:1/-1; border:0; padding:0; margin:0; min-width:0; }
    .status-filter legend { font-size:10px; color:#8b8099; margin-bottom:7px; }
    .status-options { display:flex; flex-wrap:wrap; gap:5px 10px; }
    .status-options label { display:flex; align-items:center; gap:4px; font-size:10px; color:#777084; }
    input[type=checkbox],input[type=radio] { accent-color:#9379c9; width:12px; height:12px; margin:0; flex-shrink:0; }
    .filter-panel-footer,.menu-footer { display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:16px; border-top:1px solid #efebf5; }
    .menu-reset { font-size:10px; color:#92859f; }
    .menu-apply { display:inline-flex; padding:7px 11px; border-radius:5px; font-size:10px; background:#8b73c2; color:white; font-weight:500; }
    .columns-panel { width:232px; right:0; top:calc(100% + 10px); }
    .menu-choice { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:11px; font-weight:400; color:#777087; }
    .menu-choice small { font-size:8px; color:#b0a6ba; margin-left:auto; }
    .optional-columns { margin-top:11px; padding-top:12px; border-top:1px solid #f0ecf6; }
    .optional-columns > span { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.7px; color:#aba0b9; margin-bottom:5px; }
    .density-panel { width:170px; right:0; top:calc(100% + 10px); }
    .density-panel > strong { display:block; font-size:11px; margin-bottom:8px; font-weight:600; }
    .table-scroll { max-height:480px; overflow:auto; scrollbar-width:thin; scrollbar-color:#d8d0e6 transparent; }
    table { min-width:930px; }
    th { position:sticky; top:0; z-index:3; background:#fcfcfe; height:48px; }
    .department-col { display:table-cell; }
    .column-header { display:flex; align-items:center; gap:9px; }
    .sort-heading { display:flex; gap:7px; align-items:center; justify-content:space-between; padding:0; border:0; background:transparent; color:#7b768d; font:inherit; font-weight:500; cursor:pointer; text-align:left; white-space:nowrap; }
    .sort-arrow { color:#c4bdcf; font-size:11px; font-weight:400; }
    .sort-arrow.sorted { color:#8b70bd; font-size:14px; }
    th[aria-sort=ascending] .sort-heading { color:#8262b0; }
    .header-filter { position:relative; margin-left:auto; }
    .header-filter > summary { display:flex; padding:3px; border-radius:4px; color:#b7aec7; cursor:pointer; }
    .header-filter > summary svg { width:12px; height:12px; }
    .header-filter[open] > summary,.header-filter > summary:hover { color:#8b71b9; background:#f0ebf8; }
    .column-filter-panel { width:205px; right:-10px; top:calc(100% + 12px); padding:15px; }
    .column-filter-panel > strong { display:block; font-size:11px; font-weight:600; margin-bottom:9px; }
    th:focus-within { z-index:9; }
    th:first-child .column-filter-panel { right:auto; left:0; }
    th:first-child,td.employee-col { position:sticky; left:0; z-index:2; min-width:225px; background:#fff; }
    th:first-child { z-index:5; background:#fcfcfe; }
    th:first-child:focus-within { z-index:10; }
    tr.highlight td.employee-col { background:#fdfbff; }
    tbody tr:hover td { background:#faf8fe; }
    .page-controls { display:flex; align-items:center; gap:18px; }
    .page-size { display:flex; align-items:center; gap:7px; }
    .page-size select { border:1px solid var(--line); border-radius:5px; color:#8b7e9a; background:#fff; padding:4px; font:inherit; }
    .pagination { gap:8px; }
    .pagination button { border:0; background:transparent; color:#c3bacf; font-size:15px; padding:2px 5px; }
    .pagination button:disabled { opacity:.6; }
    .pagination span { padding:3px 8px; }
    .mobile-sort { display:none; }
    .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .design-states { margin-top:21px; padding:14px 17px; border:1px dashed #e4dcec; border-radius:9px; color:#9788a7; }
    .design-states > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; font-size:10px; }
    .design-states > summary > span { font-size:9px; color:#b1a5bf; }
    .state-samples { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; margin-top:16px; }
    .state-sample { background:#fff; border:1px solid var(--line); padding:17px; border-radius:8px; }
    .state-sample-heading { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; }
    .state-sample-heading strong { font-size:11px; color:#82718e; font-weight:600; }
    .state-sample-heading > span { font-size:9px; color:#aa9cb7; }
    .active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
    .active-filter { display:flex; align-items:center; gap:8px; background:#f2edf9; border:1px solid #e8e0f4; padding:5px 7px; color:#9a84b8; border-radius:5px; font-size:9px; }
    .active-filter b { color:#b7a5cc; font-size:11px; font-weight:400; }
    .clear-filters { color:#a095ad; font-size:9px; padding:4px; }
    .filtered-person { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); margin-top:14px; padding-top:14px; }
    .state-sample p { color:#a295ad; font-size:11px; margin:21px 0 14px; }
    .empty-reset { display:inline-block; font-size:10px; padding:7px 11px; border-radius:5px; color:#9a85b6; border:1px solid #e4dbee; }
    @media(max-width:1050px) { .table-tools .search { flex-basis:100%; } .tools-group { margin-left:auto; } }
    @media(max-width:600px) {
      .table-tools { gap:10px; padding-bottom:12px; }
      .table-tools .search { min-width:0; width:100%; min-height:37px; }
      .search input { font-size:11px; }
      .tools-group { width:100%; gap:8px; margin:0; }
      .tool-button { min-height:34px; padding:8px 12px; font-size:10px; }
      .quick-department,.density-menu { display:none; }
      .columns-menu { margin-left:0; }
      .filters-menu { position:static; }
      .columns-menu .columns-panel { left:0; right:auto; }
      .filters-panel { width:100%; max-width:none; padding:16px; }
      .popover-heading { gap:5px; margin-bottom:15px; }
      .popover-heading > span { font-size:8px; }
      .filter-field-grid { gap:13px 10px; }
      .status-options { gap:7px 9px; }
      .status-options label { font-size:10px; }
      .mobile-sort { display:flex; align-items:center; gap:8px; width:100%; color:#9b8bab; font-size:10px; }
      .mobile-sort select { background:#fff; border:1px solid var(--line); border-radius:5px; padding:7px 10px; font:inherit; color:#8f7ca4; flex:1; min-width:0; }
      .table-scroll { max-height:none; overflow:visible; }
      table { min-width:0; }
      .department-col { display:none; }
      td.employee-col { position:static; min-width:0; background:transparent; }
      tr.highlight td.employee-col { background:transparent; }
      tbody tr:hover td { background:transparent; }
      .table-footer { align-items:center; }
      .page-controls { gap:9px; }
      .page-size { gap:4px; }
      .page-size select { font-size:9px; }
      .design-states { padding:12px; }
      .design-states > summary { flex-wrap:wrap; gap:3px; }
      .state-samples { grid-template-columns:1fr; }
    }
    @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

    .filters-panel { max-height:520px; overflow-y:auto; }
    .column-search { border:1px solid var(--line); padding:8px; border-radius:5px; font:inherit; color:#7a708a; min-width:0; width:100%; }
    .role-filter { border-top:1px solid var(--line); margin-top:9px; padding-top:12px; }
    .employment-date-filters { margin-top:16px; padding-top:13px; border-top:1px solid #efeaf5; }
    .employment-date-filters > summary { display:flex; align-items:center; justify-content:space-between; font-size:10px; cursor:pointer; color:#8c7a9d; }
    .date-filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:13px; }
    .date-filter-grid input { min-width:0; width:100%; color:#8b7e9a; background:#fdfcfe; border:1px solid var(--line); padding:7px 5px; border-radius:5px; font:inherit; font-size:10px; }
    @media(max-width:600px) { .filters-panel { max-height:430px; } }

    table { min-width:1140px; }
    .source-labels { flex-wrap:wrap; gap:7px 17px; }
    .columns-panel { max-height:560px; overflow-y:auto; }
    @media(max-width:600px) { table { min-width:0; } .source-labels { gap:6px 12px; } }

.workflow-section { margin-top:48px; padding-top:31px; border-top:1px solid var(--line); scroll-margin-top:25px; }
    .workflow-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:12px 0 24px; }
    .workflow-heading h2 { font-size:27px; letter-spacing:-.8px; font-weight:650; line-height:1.3; }
    .workflow-heading p { color:#8b819b; font-size:12px; margin-top:7px; }
    .handoff-steps { display:flex; align-items:center; gap:13px; padding:17px 21px; background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:21px; }
    .handoff-steps > span { display:flex; align-items:center; gap:9px; font-size:11px; color:#a99bb7; white-space:nowrap; }
    .handoff-steps b { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#f3f0f8; font-size:10px; font-weight:500; }
    .handoff-steps .current { color:#8865b6; font-weight:600; }
    .handoff-steps .current b { color:#fff; background:#a78dcd; }
    .handoff-steps > i { height:1px; background:#eae3f2; width:40px; }
    .hr-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:21px; align-items:start; }
    .hr-form-content { min-width:0; }
    .hr-section { padding:23px 24px; margin-bottom:17px; }
    .hr-section-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; }
    .section-number { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:#f4f0fa; color:#ab93ca; font-size:9px; flex-shrink:0; margin-top:2px; }
    .hr-section-heading h3 { font-size:14px; font-weight:600; color:#62556f; }
    .hr-section-heading p { font-size:10px; color:#a096ac; margin-top:4px; line-height:1.7; }
    .visibility-label { margin-left:auto; color:#b0a4ba; font-size:8px; border:1px solid #ece5f2; padding:3px 6px; border-radius:4px; white-space:nowrap; }
    .hr-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 17px; }
    .hr-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
    .hr-field > span { color:#897994; font-size:11px; }
    .hr-field b { color:#b796c4; font-weight:500; }
    .hr-field input,.hr-field select { background:#fefeff; border:1px solid #e9e2ef; border-radius:6px; padding:10px 11px; min-height:39px; min-width:0; width:100%; color:#776080; font:inherit; font-size:12px; }
    .hr-field input::placeholder { color:#b0a3bd; }
    .hr-field select { color:#a391b1; }
    .hr-field input:focus,.hr-field select:focus { outline:2px solid #d8c8ee; outline-offset:1px; }
    .language-label { color:#ab99b9; font-size:9px; text-transform:uppercase; letter-spacing:.8px; margin:19px 0 11px; }
    .language-label:first-of-type { margin-top:0; }
    .contact-field { min-width:0; }
    .not-available { display:flex; align-items:center; gap:5px; margin-top:8px; font-size:9px; color:#ad9cba; }
    .field-help { display:block; color:#ac9bb9; font-size:9px; margin-top:9px; line-height:1.7; }
    .add-position { margin-top:15px; }
    .add-position > summary { display:inline-flex; cursor:pointer; color:#a17cbc; font-size:11px; }
    .inline-position { padding:17px; border:1px dashed #dfd1eb; background:#fcfaff; border-radius:7px; margin-top:12px; }
    .inline-position p { font-size:10px; color:#b29dc0; margin:10px 0 13px; }
    .bank-details { border-top:1px solid var(--line); margin-top:20px; padding-top:0; }
    .document-check { display:flex; align-items:center; justify-content:space-between; gap:17px; padding:13px 0; border-top:1px solid #f0eaf5; }
    .document-check strong { display:block; color:#8e779c; font-size:11px; font-weight:500; }
    .document-check small { display:block; color:#b09cbc; font-size:9px; margin-top:4px; }
    .document-check label { display:flex; align-items:center; gap:6px; color:#ad92bb; font-size:10px; white-space:nowrap; }
    .legal-recipient { display:flex; align-items:center; gap:10px; margin:13px 0 2px; padding:13px; background:#f7f2fc; border:1px solid #eee3f7; border-radius:7px; }
    .legal-icon { color:#b196c6; font-size:16px; }
    .legal-recipient strong { display:block; color:#a086b4; font-size:9px; font-weight:500; }
    .legal-recipient a { display:block; font-size:12px; color:#a07ab7; margin-top:3px; }
    .requested-count { margin-left:auto; border-radius:5px; padding:4px 7px; background:#f3edf9; color:#ab90c0; font-size:9px; white-space:nowrap; }
    .requested-access-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .requested-access { display:flex; align-items:center; gap:9px; padding:13px 12px; border:1px solid #eee4f6; background:#fdfbff; border-radius:7px; min-width:0; }
    .requested-access input { accent-color:#ad8bcd; }
    .requested-access strong { display:block; color:#9276a3; font-size:11px; font-weight:500; }
    .requested-access small { display:block; color:#b8a2c4; font-size:9px; margin-top:3px; }
    .placeholder-terms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
    .placeholder-terms > div { padding:15px 11px; border:1px dashed #e5d9ee; background:#fbf9fd; border-radius:7px; }
    .placeholder-terms strong { display:block; font-size:10px; color:#b3a1bd; font-weight:500; }
    .placeholder-terms span { display:block; font-size:8px; color:#c1afca; margin-top:6px; }
    .hr-review-sidebar { position:sticky; top:20px; }
    .handover-summary { padding:20px; }
    .summary-title { display:flex; align-items:center; justify-content:space-between; gap:9px; }
    .summary-title h3 { font-size:13px; font-weight:600; color:#9274a0; }
    .handover-summary > p { color:#af97bc; font-size:10px; line-height:1.8; margin-top:12px; }
    .form-section-links { margin:16px 0; border-top:1px solid #f0e6f6; padding-top:6px; }
    .form-section-links a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; font-size:10px; color:#a58bb3; }
    .form-section-links b { color:#bfa9cc; font-size:8px; font-weight:400; white-space:nowrap; }
    .owner-line { display:flex; justify-content:space-between; align-items:center; margin:11px 0; color:#b098bd; font-size:10px; }
    .owner-line strong { font-weight:500; color:#9e7cad; }
    .handover-summary .handover-policy { border-top:1px solid #f0e6f6; padding-top:12px; color:#b59bc3; font-size:9px; }
    .handover-preview-link { display:block; font-size:10px; color:#ab89bd; padding:16px 5px; }
    .hr-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; background:#fff; border:1px solid #ece3f4; border-radius:8px; padding:16px 19px; margin-top:19px; }
    .hr-actions > div { display:flex; gap:9px; }
    .form-button { font:inherit; font-size:11px; padding:9px 13px; background:#fff; color:#a582b9; border:1px solid #e8daef; border-radius:6px; }
    .form-button.primary { color:#fff; background:#ab8ac8; border-color:#ab8ac8; }
    .form-button:disabled { opacity:.47; cursor:not-allowed; }
    .access-progress { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
    .access-progress i { display:block; position:relative; width:75px; height:3px; background:#eee4f8; border-radius:3px; overflow:hidden; }
    .access-progress i::after { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--progress); background:#b597d2; }
    .access-progress small { font-size:8px; color:#aa8fbe; }
    .access-handover-summary { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:24px; background:#fff; border:1px solid #ece2f4; border-radius:10px; }
    .access-handover-summary h3 { font-size:20px; font-weight:600; color:#81608f; margin-top:13px; letter-spacing:-.4px; }
    .access-handover-summary p { color:#b08fbf; font-size:11px; margin-top:7px; }
    .readiness-state { min-width:150px; text-align:right; }
    .handover-progress { height:5px; border-radius:5px; background:#eee3f6; margin:12px 0 5px; overflow:hidden; }
    .handover-progress i { display:block; height:100%; width:50%; background:#b494cf; }
    .readiness-state small { color:#bda1cd; font-size:9px; }
    .assignment-strip { display:flex; flex-wrap:wrap; gap:20px; margin:18px 2px; font-size:10px; color:#b89bc7; }
    .assignment-strip strong { color:#a37bb6; font-weight:500; margin-left:4px; }
    .access-task-list { overflow:hidden; }
    .access-task-head,.access-task { display:grid; grid-template-columns:1.2fr .8fr 1fr 1fr .65fr; gap:13px; align-items:center; padding:17px 21px; }
    .access-task-head { color:#b49ac6; background:#fcf9ff; font-size:9px; }
    .access-task { border-top:1px solid #f0e6f7; }
    .access-task strong { display:block; font-size:12px; color:#9972ac; font-weight:500; }
    .access-task small { display:block; color:#bea0d0; font-size:9px; margin-top:4px; }
    .access-task > .pill { justify-self:start; }
    .task-account { font-size:11px; color:#ac84bf; }
    .task-confirmation { font-size:10px; color:#b18bc6; }
    .task-link { color:#ba95cf; font-size:10px; text-align:right; }
    .not-requested { background:#fdfbff; }
    .handover-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
    .handover-notes strong { font-size:11px; color:#b089c4; font-weight:500; }
    .handover-notes p { color:#bca0cc; font-size:10px; line-height:1.8; margin-top:7px; }
    @media(max-width:1100px) { .hr-layout { grid-template-columns:minmax(0,1fr) 225px; gap:15px; } .hr-section { padding:20px; } .hr-section-heading { gap:9px; } .placeholder-terms { grid-template-columns:1fr; } }
    @media(max-width:800px) { .hr-layout { grid-template-columns:1fr; } .hr-review-sidebar { position:static; } .hr-review-sidebar .handover-summary { max-width:none; } .handover-notes { grid-template-columns:1fr; gap:15px; } .access-task-head,.access-task { grid-template-columns:1.15fr .8fr 1fr .9fr; } .task-link,.access-task-head > span:last-child { display:none; } }
    @media(max-width:600px) {
      .workflow-section { margin-top:35px; padding-top:25px; }
      .workflow-heading { align-items:flex-start; gap:10px; flex-direction:column; }
      .workflow-heading h2 { font-size:24px; }
      .workflow-heading p { font-size:11px; line-height:1.8; }
      .handoff-steps { gap:7px; padding:13px 10px; }
      .handoff-steps > span { gap:5px; font-size:8px; }
      .handoff-steps b { height:18px; width:18px; font-size:8px; }
      .handoff-steps > i { width:12px; }
      .hr-section { padding:19px 16px; }
      .hr-fields { grid-template-columns:1fr; gap:15px; }
      .hr-section-heading h3 { font-size:13px; }
      .hr-section-heading p { font-size:9px; }
      .visibility-label { font-size:7px; padding:3px 4px; }
      .hr-field > span { font-size:11px; }
      .requested-access-grid { grid-template-columns:1fr; }
      .placeholder-terms { grid-template-columns:1fr; }
      .hr-actions { padding:14px 12px; gap:10px; flex-wrap:wrap; }
      .hr-actions > div { width:100%; }
      .form-button { flex:1; padding:9px; font-size:10px; }
      .access-progress { align-items:flex-end; }
      .access-progress i { width:55px; }
      .access-progress small { font-size:7px; }
      .access-handover-summary { align-items:flex-start; flex-direction:column; padding:19px; gap:18px; }
      .access-handover-summary h3 { font-size:19px; }
      .access-handover-summary p { font-size:10px; line-height:1.7; }
      .readiness-state { width:100%; text-align:left; }
      .assignment-strip { gap:7px; flex-direction:column; }
      .access-task-head { display:none; }
      .access-task { grid-template-columns:1fr 1fr; padding:17px 16px; gap:12px; }
      .access-task > .pill { justify-self:end; }
      .task-confirmation { text-align:right; }
      .task-account { font-size:10px; }
      .handover-notes p { font-size:10px; }
    }
    .hr-section-heading h3,.summary-title h3,.access-task strong,.access-handover-summary h3 { color:#665071; }
    .hr-field > span,.language-label,.document-check strong,.requested-access strong,.owner-line strong,.assignment-strip strong { color:#796082; }
    .hr-section-heading p,.field-help,.document-check small,.not-available,.handover-summary > p,.handover-summary .handover-policy,.form-section-links a,.owner-line,.assignment-strip,.handover-notes p,.requested-access small { color:#887392; }
    .hr-field input,.hr-field select { color:#745e7d; }
    .hr-field input::placeholder { color:#a08ba9; }
    .visibility-label,.requested-count,.document-check label,.legal-recipient strong,.legal-recipient a,.handover-preview-link,.task-account,.task-confirmation,.task-link,.access-task small,.handover-notes strong,.readiness-state small,.access-handover-summary p { color:#9575a5; }
    .form-section-links b { color:#aa864d; }
    .access-task-head { color:#957ba7; }
    .access-progress small { color:#9872b1; }
    html { scroll-padding-top:20px; }
    .workflow-section { scroll-margin-top:0; }

    .parallel-review { border-top:1px solid #ede6f3; padding-top:15px; margin:10px 0 16px; }
    .parallel-review > strong { display:block; color:#9274a4; font-size:10px; font-weight:500; margin-bottom:8px; }
    .parallel-review a { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:7px 0; font-size:10px; color:#927aa1; }
    .parallel-review b { color:#a38553; font-size:8px; font-weight:400; }
    .parallel-review p { color:#9d87ac; font-size:9px; line-height:1.8; margin-top:7px; }
    .parallel-status { display:block; color:#a18cb0; font-size:9px; margin-top:9px; }

.route-page > section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.preview-bar a { color: #775c99; text-decoration: underline; }
.activity-panel { padding: 22px; margin-top: 24px; }
.activity-panel h3 { color: #665071; font-size: 14px; }
.activity-panel p, .activity-panel li { color: #7c6a8b; font-size: 12px; line-height: 1.8; }
.activity-panel ul { margin: 12px 0 0; padding-left: 18px; }
.preview-state-panel { padding: 22px; margin-top: 18px; }
.preview-state-panel h3 { color: #665071; font-size: 14px; margin-bottom: 14px; }
.preview-state-panel .hr-field { max-width: 360px; }
.preview-state-panel [aria-invalid="true"] { border-color: #b83241; }
.field-error { color: #b83241; font-size: 11px; margin-top: 8px; }
.source-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.source-state p { color: #81718d; font-size: 11px; }

.directory-route .preview-bar,
.directory-route .topbar { display: none; }
.directory-route .content { max-width: none; margin: 0; padding: 16px 20px; }
.directory-route .title-row { gap: 12px; margin-bottom: 12px; min-height: 37px; }
.directory-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.directory-heading h1 { font-size: 24px; }
.sample-data { padding: 3px 7px; border: 1px solid #e4ddec; border-radius: 5px; color: #705796; background: #f5f1fa; font-size: 10px; white-space: nowrap; }
.sample-data:hover { color: #705796; border-color: #c9badf; }
.directory-route .directory-tabs { min-height: 42px; padding: 0 16px; }
.directory-route .tab { padding: 11px 0; }
.directory-route .table-tools { padding: 8px 16px; }
.directory-route .table-footer { padding: 10px 16px; }

@media (min-width: 601px) {
  .directory-route { height: 100vh; height: 100dvh; overflow: hidden; }
  .directory-route .shell { height: 100%; min-height: 0; }
  .directory-route .sidebar { height: 100%; min-height: 0; overflow-y: auto; }
  .directory-route .shell > main,
  .directory-route .content,
  .directory-route #directory,
  .directory-route .directory { display: flex; flex-direction: column; min-height: 0; }
  .directory-route .content,
  .directory-route #directory,
  .directory-route .directory { flex: 1; }
  .directory-route .title-row,
  .directory-route .directory-tabs,
  .directory-route .table-tools,
  .directory-route .table-footer { flex-shrink: 0; }
  .directory-route .table-tools .search { flex: 1 1 180px; min-width: 180px; }
  .directory-route .tools-group { margin-left: auto; }
  .directory-route .table-scroll { flex: 1; min-height: 0; max-height: none; container-type: size; }
  .directory-route th { height: 42px; padding-top: 9px; padding-bottom: 9px; }
  .directory-route td { height: 60px; padding-top: 8px; padding-bottom: 8px; }
  .directory-route .access-progress { margin-top: 4px; gap: 3px; }
  /* Reserve room for the header, tabs, and a two-row toolbar. */
  .directory-route .filters-panel { max-height: min(520px, calc(100vh - 240px)); max-height: min(520px, calc(100dvh - 240px)); }
  .directory-route .columns-panel { max-height: min(560px, calc(100vh - 240px)); max-height: min(560px, calc(100dvh - 240px)); }
  .directory-route .density-panel { max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); overflow-y: auto; }
  .directory-route .column-filter-panel { max-height: calc(100cqh - 64px); overflow-y: auto; }
}

@media (max-width: 600px) {
  .directory-route .shell { min-height: 100vh; min-height: 100dvh; }
  .directory-route .content { padding: 14px; }
  .directory-route .title-row { align-items: center; gap: 8px; margin-bottom: 8px; }
  .directory-route .title-actions { padding-top: 0; }
  .directory-heading { gap: 8px; }
  .sample-data { font-size: 9px; padding: 3px 6px; }
  .directory-route .directory-tabs { padding: 0 1px; }
  .directory-route .table-tools { padding: 8px 0 10px; gap: 8px; }
  .directory-route .table-footer { padding: 14px 1px; }
}

.workflow-route .preview-bar,
.workflow-route .topbar { display: none; }
.workflow-route .shell { min-height: 100vh; min-height: 100dvh; }
.workflow-route .content { max-width: none; margin: 0; padding: 16px 20px; }
.workflow-route .workflow-heading { align-items: flex-start; gap: 16px; margin: 0 0 14px; }
.workflow-route .workflow-heading > div { min-width: 0; }
.workflow-route .workflow-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.workflow-route .workflow-title h1 { font-size: 24px; color: #4a4e63; }
.workflow-route .sample-data { font-size: 11px; }
.workflow-route .workflow-heading p { margin-top: 4px; color: #697087; font-size: 12px; line-height: 1.5; }
.workflow-route .back-link { color: #705796; font-size: 12px; white-space: nowrap; }
.workflow-route .workflow-heading > .back-link { padding-top: 7px; }
.workflow-route .handoff-steps { gap: 12px; padding: 10px 16px; margin-bottom: 14px; }
.workflow-route .handoff-steps > span { gap: 7px; color: #697087; font-size: 12px; }
.workflow-route .handoff-steps b { color: #697087; }
.workflow-route .handoff-steps .current { color: #705796; }
.workflow-route .handoff-steps .current b { color: #fff; background: #705796; }
.workflow-route .hr-layout { grid-template-columns: minmax(0, 1fr) 252px; gap: 16px; }
.workflow-route .hr-section { padding: 18px 20px; margin-bottom: 14px; scroll-margin-top: 16px; }
.workflow-route .hr-section-heading { gap: 10px; margin-bottom: 14px; }
.workflow-route .hr-section-heading > div { min-width: 0; }
.workflow-route .hr-section-heading h2,
.workflow-route .summary-title h2 { color: #4a4e63; font-size: 14px; font-weight: 600; }
.workflow-route .hr-section-heading p { color: #697087; font-size: 11px; line-height: 1.5; }
.workflow-route .section-number { color: #705796; font-size: 11px; }
.workflow-route .hr-fields { gap: 12px 14px; }
.workflow-route .hr-field { gap: 6px; }
.workflow-route .hr-field > span { color: #4a4e63; font-size: 12px; }
.workflow-route .hr-field b { color: #705796; }
.workflow-route .hr-field input,
.workflow-route .hr-field select { height: 40px; min-height: 40px; padding: 9px 11px; color: #4a4e63; font-size: 12px; }
.workflow-route .hr-field input::placeholder { color: #697087; }
.workflow-route .field-help,
.workflow-route .not-available { color: #697087; font-size: 11px; line-height: 1.5; margin-top: 7px; }
.workflow-route .add-position { margin-top: 12px; }
.workflow-route .add-position > summary { color: #705796; font-size: 12px; }
.workflow-route .inline-position { padding: 14px; margin-top: 10px; }
.workflow-route .inline-position p { color: #697087; font-size: 11px; margin: 8px 0 10px; }
.workflow-route .menu-apply { font-size: 12px; }
.workflow-route .visibility-label,
.workflow-route .requested-count { color: #705796; font-size: 11px; }
.workflow-route .requested-access-grid { gap: 8px; }
.workflow-route .requested-access { padding: 10px 12px; }
.workflow-route .requested-access strong,
.workflow-route .document-check strong { color: #4a4e63; font-size: 12px; }
.workflow-route .requested-access small,
.workflow-route .document-check small { color: #697087; font-size: 11px; line-height: 1.5; }
.workflow-route .bank-details { margin-top: 16px; }
.workflow-route .bank-details .language-label { margin: 12px 0 10px; color: #697087; font-size: 11px; text-transform: none; letter-spacing: 0; }
.workflow-route .document-check { gap: 12px; padding: 11px 0; }
.workflow-route .document-check label { color: #697087; font-size: 12px; }
.workflow-route .legal-recipient { margin: 10px 0 0; padding: 11px 12px; }
.workflow-route .legal-recipient strong { color: #697087; font-size: 11px; }
.workflow-route .legal-recipient a { color: #705796; font-size: 12px; }
.workflow-route .legal-icon { color: #705796; }
.workflow-route .placeholder-terms { grid-template-columns: 1fr; gap: 0; }
.workflow-route .placeholder-terms > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.workflow-route .placeholder-terms > div:last-child { padding-bottom: 0; border-bottom: 0; }
.workflow-route .placeholder-terms strong { color: #4a4e63; font-size: 12px; }
.workflow-route .placeholder-terms span { color: #697087; font-size: 11px; margin: 0; }
.workflow-route .hr-review-sidebar { top: 16px; }
.workflow-route .handover-summary { padding: 16px; }
.workflow-route .handover-summary > p { color: #697087; font-size: 11px; line-height: 1.5; margin-top: 8px; }
.workflow-route .form-section-links { margin: 12px 0; padding-top: 5px; }
.workflow-route .form-section-links a,
.workflow-route .parallel-review a { padding: 7px 0; color: #705796; font-size: 12px; }
.workflow-route .form-section-links b,
.workflow-route .parallel-review b { color: #8c6529; font-size: 11px; }
.workflow-route .parallel-review { padding-top: 12px; margin: 8px 0 12px; }
.workflow-route .parallel-review > strong { color: #4a4e63; font-size: 12px; }
.workflow-route .parallel-review p { color: #697087; font-size: 11px; line-height: 1.5; }
.workflow-route .owner-line { color: #697087; font-size: 11px; margin: 8px 0; }
.workflow-route .owner-line strong { color: #4a4e63; }
.workflow-route .handover-preview-link { padding: 12px 3px; color: #705796; font-size: 12px; }
.workflow-route .hr-actions { padding: 12px 16px; margin-top: 14px; }
.workflow-route .form-button { color: #705796; font-size: 12px; }
.workflow-route .form-button.primary { color: #fff; background: #8b73b1; border-color: #8b73b1; }
.workflow-route .access-handover-summary { gap: 20px; padding: 18px 20px; }
.workflow-route .access-handover-summary h2 { margin-top: 8px; color: #4a4e63; font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.workflow-route .access-handover-summary p { color: #697087; font-size: 12px; line-height: 1.5; margin-top: 5px; }
.workflow-route .parallel-status,
.workflow-route .readiness-state small { color: #697087; font-size: 11px; }
.workflow-route .parallel-status { margin-top: 7px; }
.workflow-route .handover-progress { margin: 9px 0 5px; }
.workflow-route .assignment-strip { gap: 16px; margin: 12px 2px; color: #697087; font-size: 12px; }
.workflow-route .assignment-strip strong { color: #4a4e63; }
.workflow-route .access-task-head,
.workflow-route .access-task { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .6fr); gap: 12px; padding: 12px 18px; }
.workflow-route .access-task-head { padding-top: 10px; padding-bottom: 10px; color: #697087; font-size: 11px; }
.workflow-route .access-task > * { min-width: 0; }
.workflow-route .access-task strong { color: #4a4e63; font-size: 12px; }
.workflow-route .access-task small { color: #697087; font-size: 11px; line-height: 1.5; margin-top: 3px; }
.workflow-route .task-account,
.workflow-route .task-confirmation { color: #4a4e63; font-size: 12px; overflow-wrap: anywhere; }
.workflow-route .task-link { color: #705796; font-size: 12px; }
.workflow-route .handover-notes { gap: 16px; margin-top: 16px; }
.workflow-route .handover-notes strong { color: #4a4e63; font-size: 12px; }
.workflow-route .handover-notes p { color: #697087; font-size: 11px; line-height: 1.6; margin-top: 5px; }
.workflow-route .mobile-section-jump { display: none; }

@media (max-width: 800px) {
  .workflow-route .hr-layout { grid-template-columns: 1fr; }
  .workflow-route .hr-review-sidebar { position: static; }
  .workflow-route .mobile-section-jump { display: block; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
  .workflow-route .mobile-section-jump > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #705796; font-size: 12px; cursor: pointer; }
  .workflow-route .mobile-section-jump > summary::after { content: "⌄"; margin-left: auto; }
  .workflow-route .mobile-section-jump[open] > summary::after { content: "⌃"; }
  .workflow-route .mobile-section-jump > summary span { color: #697087; font-size: 11px; }
  .workflow-route .mobile-section-jump nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 0 12px 8px; }
  .workflow-route .mobile-section-jump nav a { color: #705796; font-size: 12px; padding: 7px 0; }
  .workflow-route .hr-review-sidebar .form-section-links,
  .workflow-route .hr-review-sidebar .parallel-review a { display: none; }
  .workflow-route .access-task-head,
  .workflow-route .access-task { grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .workflow-route .content { padding: 14px; }
  .workflow-route .workflow-heading { gap: 8px; margin-bottom: 12px; }
  .workflow-route .workflow-title { gap: 8px; }
  .workflow-route .workflow-heading > .back-link { padding-top: 0; }
  .workflow-route .handoff-steps { gap: 5px; padding: 10px; margin-bottom: 12px; }
  .workflow-route .handoff-steps > span { gap: 5px; font-size: 11px; white-space: normal; line-height: 1.35; }
  .workflow-route .handoff-steps b { width: 18px; height: 18px; flex-shrink: 0; font-size: 10px; }
  .workflow-route .handoff-steps > i { width: 8px; flex-shrink: 0; }
  .workflow-route .hr-section { padding: 18px; margin-bottom: 12px; }
  .workflow-route .hr-fields { grid-template-columns: 1fr; gap: 12px; }
  .workflow-route .hr-actions { padding: 12px; }
  .workflow-route .access-handover-summary { padding: 16px; gap: 14px; }
  .workflow-route .access-handover-summary h2 { font-size: 18px; }
  .workflow-route .assignment-strip { gap: 5px; }
  .workflow-route .access-task { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 13px 16px; }
  .workflow-route .handover-notes { gap: 12px; }
}

.profile-route .preview-bar,
.profile-route .topbar { display: none; }
.profile-route .shell { min-height: 100vh; min-height: 100dvh; }
.profile-route .brand small,
.profile-route .nav-group,
.profile-route .nav-item,
.profile-route .nav-item .count,
.profile-route .sidebar-footer,
.profile-route .sidebar-footer .workspace { color: #697087; }
.profile-route .nav-item.active { color: #705796; }
.profile-route .content { max-width: none; margin: 0; padding: 16px 20px; }
.profile-route .profile-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-route .profile-page-heading > div { min-width: 0; }
.profile-route .profile-page-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-route .profile-page-title h1 { color: #4a4e63; font-size: 24px; }
.profile-route .profile-page-heading p { margin-top: 4px; color: #697087; font-size: 12px; line-height: 1.5; }
.profile-route .sample-data { font-size: 11px; }
.profile-route .back-link { padding-top: 7px; color: #705796; font-size: 12px; white-space: nowrap; }
.profile-route .profile-section-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 12px; }
.profile-route .profile-section-links a { color: #705796; font-size: 12px; padding: 3px 0; }
.profile-route #offboarding-review,
.profile-route #accounts,
.profile-route #employee-details,
.profile-route #activity { scroll-margin-top: 16px; }
.profile-route h2 { color: #4a4e63; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.profile-route .offboarding-review { padding: 14px 16px; margin-bottom: 16px; }
.profile-route .offboarding-overview { display: grid; grid-template-columns: minmax(290px, 1fr) minmax(0, 1fr); align-items: center; gap: 12px 20px; }
.profile-route .offboarding-review-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-route .verification-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.profile-route .verification-progress strong { color: #4a4e63; font-size: 12px; font-weight: 600; white-space: nowrap; }
.profile-route .verification-progress progress { width: 140px; max-width: 100%; height: 7px; border: 0; border-radius: 4px; overflow: hidden; accent-color: #705796; background: #eeeaf3; }
.profile-route .verification-progress progress::-webkit-progress-bar { background: #eeeaf3; border-radius: 4px; }
.profile-route .verification-progress progress::-webkit-progress-value { background: #705796; border-radius: 4px; }
.profile-route .verification-progress progress::-moz-progress-bar { background: #705796; border-radius: 4px; }
.profile-route .offboarding-warning { color: #886633; font-size: 12px; line-height: 1.5; padding: 9px 12px; border-left: 3px solid #c29b56; border-radius: 3px; background: #faf3e8; }
.profile-route .offboarding-checks { margin-top: 10px; }
.profile-route .offboarding-checks > summary,
.profile-route .employee-disclosure > summary { display: flex; align-items: center; gap: 8px; color: #705796; font-size: 12px; font-weight: 500; cursor: pointer; }
.profile-route .offboarding-checks > summary::after,
.profile-route .employee-disclosure > summary::after { content: "+"; margin-left: auto; font-size: 16px; line-height: 1; }
.profile-route .offboarding-checks[open] > summary::after,
.profile-route .employee-disclosure[open] > summary::after { content: "−"; }
.profile-route .offboarding-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 10px; }
.profile-route .checklist-line { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto 14px; gap: 8px; padding: 11px 0; color: #4a4e63; font-size: 12px; }
.profile-route .checkmark { width: 15px; height: 15px; border-color: #b8b1c6; }
.profile-route .checkmark.done { color: #13744a; background: #e7f5ec; border-color: #aacdb9; }
.profile-route .check-state,
.profile-route .checklist-line .assignee { color: #697087; font-size: 11px; }
.profile-route .checklist-line .assignee { margin-left: 0; }
.profile-route .profile-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
.profile-route .profile-main { grid-column: 2; grid-row: 1; }
.profile-route .employee-summary { grid-column: 1; grid-row: 1; padding: 16px; min-width: 0; }
.profile-route .employee-summary h2 { color: #4a4e63; font-size: 15px; letter-spacing: 0; }
.profile-route .employee-summary .details { display: block; margin: 10px 0 0; padding: 0; border: 0; }
.profile-route .employee-summary .detail { margin: 10px 0; }
.profile-route dt { color: #697087; font-size: 11px; }
.profile-route dd { color: #4a4e63; font-size: 12px; overflow-wrap: anywhere; }
.profile-route .id-label { padding-top: 10px; border-top: 1px solid var(--line); margin-top: 12px; color: #697087; font-size: 11px; }
.profile-route .employee-disclosure { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.profile-route .employee-disclosure > summary { align-items: baseline; line-height: 1.5; }
.profile-route .profile-topline { margin-bottom: 12px; }
.profile-route .profile-topline h2 { font-size: 15px; letter-spacing: 0; }
.profile-route .account-grid { gap: 14px; }
.profile-route .account-card { padding: 16px; min-width: 0; }
.profile-route .account-heading { gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.profile-route .account-heading > div { min-width: 0; flex: 1 1 140px; }
.profile-route .account-heading h3 { color: #4a4e63; font-size: 13px; overflow-wrap: anywhere; }
.profile-route .account-heading small { color: #697087; font-size: 11px; }
.profile-route .account-icon { color: #705796; }
.profile-route .account-fields,
.profile-route .radius-fields { gap: 12px; }
.profile-route .protocols { margin-top: 12px; flex-wrap: wrap; }
.profile-route .protocol { color: #705796; font-size: 11px; }
.profile-route .radius-note { color: #697087; font-size: 11px; line-height: 1.5; margin-top: 10px; }
.profile-route .session-row { flex-wrap: wrap; color: #4a4e63; font-size: 12px; padding-top: 10px; margin-top: 12px; }
.profile-route .activity-panel { padding: 16px; margin-top: 16px; }
.profile-route .activity-panel p,
.profile-route .activity-panel li { color: #697087; font-size: 12px; line-height: 1.6; }
.profile-route .activity-panel p { margin-top: 6px; }

@media (max-width: 1100px) {
  .profile-route .offboarding-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .profile-route .radius-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .profile-route .profile-layout { grid-template-columns: 1fr; }
  .profile-route .profile-main,
  .profile-route .employee-summary { grid-column: 1; grid-row: auto; }
  .profile-route .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-route .account-card { grid-column: auto; }
  .profile-route .radius { grid-column: 1 / -1; }
  .profile-route .employee-summary .employee-quick-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}

@media (max-width: 600px) {
  .profile-route .content { padding: 14px; }
  .profile-route .profile-page-heading { flex-direction: column; gap: 6px; }
  .profile-route .profile-page-title { gap: 6px 8px; }
  .profile-route .back-link { padding-top: 0; }
  .profile-route .profile-section-links { gap: 4px 12px; margin: 8px 0 10px; }
  .profile-route .profile-section-links a { font-size: 11px; }
  .profile-route .offboarding-review { padding: 14px; margin-bottom: 14px; }
  .profile-route .offboarding-overview { grid-template-columns: 1fr; gap: 10px; }
  .profile-route .offboarding-warning { padding: 8px 10px; }
  .profile-route .offboarding-check-grid { grid-template-columns: 1fr; }
  .profile-route .checklist-line { gap: 6px; }
  .profile-route .profile-layout { gap: 14px; }
  .profile-route .account-grid { grid-template-columns: 1fr; gap: 12px; }
  .profile-route .account-card,
  .profile-route .radius { grid-column: 1; }
  .profile-route .account-heading > div { flex-basis: 140px; }
  .profile-route .employee-summary .employee-quick-facts { display: block; }
}

.states-route .brand small,
.states-route .nav-group,
.states-route .nav-item,
.states-route .nav-item .count,
.states-route .sidebar-footer,
.states-route .sidebar-footer .workspace { color: #697087; }
.states-route .nav-item.active { color: #705796; }
.states-route .nav-item.active .count { color: #705796; }
.states-route .states-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.states-route .state-sample,
.states-route .preview-state-panel { margin: 0; padding: 20px; min-width: 0; }
.states-route .states-grid h2 { color: #4a4e63; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.states-route .state-sample-heading { align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.states-route .state-sample-heading > span { color: #697087; font-size: 11px; }
.states-route .active-filter { max-width: 100%; flex-wrap: wrap; color: #705796; font-size: 11px; }
.states-route .active-filter b { color: #705796; }
.states-route .clear-filters { color: #705796; font-size: 11px; }
.states-route .filtered-person { flex-wrap: wrap; gap: 12px; }
.states-route .person,
.states-route .person > div { min-width: 0; }
.states-route .person-name { color: #4a4e63; font-size: 12px; overflow-wrap: anywhere; }
.states-route .subline { color: #697087; font-size: 11px; overflow-wrap: anywhere; }
.states-route .avatar.peach { color: #4a4e63; }
.states-route .pill { font-size: 11px; }
.states-route .pill.gray { color: #5e6176; }
.states-route .state-sample p { margin: 14px 0 12px; color: #697087; font-size: 12px; line-height: 1.5; }
.states-route .empty-reset { color: #705796; font-size: 11px; }
.states-route .preview-state-panel > h2 { margin-bottom: 14px; }
.states-route .field-error { font-size: 12px; line-height: 1.5; }
.states-route .source-state { gap: 10px 12px; }
.states-route .source-state strong { color: #4a4e63; font-size: 12px; }
.states-route .source-state p { flex-basis: 100%; color: #697087; font-size: 12px; line-height: 1.5; }

@media (max-width: 700px) {
  .states-route .states-grid { grid-template-columns: 1fr; gap: 12px; }
  .states-route .state-sample,
  .states-route .preview-state-panel { padding: 16px; }
}

.vpn-route .content { max-width:1600px; padding:28px 30px 40px; }
.vpn-route .vpn-page { min-width:0; color:#4a4e63; }
.vpn-route .vpn-page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
.vpn-route .eyebrow { color:#817092; margin-bottom:7px; font-size:9px; }
.vpn-route .vpn-title { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.vpn-route h1 { font-size:28px; letter-spacing:-.8px; }
.vpn-route .vpn-title .pill { color:#705796; }
.vpn-route .subtitle { color:#697087; font-size:12px; margin-top:5px; }
.vpn-route .vpn-heading-side { display:flex; flex-direction:column; align-items:flex-end; gap:10px; padding-top:4px; color:#697087; font-size:10px; text-align:right; }
.vpn-route .vpn-back { color:#705796; font-size:12px; }
.vpn-route .vpn-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.vpn-route .vpn-metric { display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:9px; }
.vpn-route .vpn-metric > span { color:#697087; font-size:11px; }
.vpn-route .vpn-metric strong { color:#4a4e63; font-size:28px; line-height:1.25; font-weight:600; letter-spacing:-.6px; }
.vpn-route .vpn-metric small { color:#697087; font-size:10px; line-height:1.5; }
.vpn-route .vpn-metric-enabled strong { color:#13744a; }
.vpn-route .vpn-metric-disabled strong { color:#b83241; }
.vpn-route .vpn-metric-review { border-color:#eadfc9; background:#fffdf9; }
.vpn-route .vpn-metric-review strong { color:#886633; }
.vpn-route .vpn-section-nav { display:flex; gap:25px; overflow-x:auto; max-width:100%; margin-bottom:20px; border-bottom:1px solid var(--line); }
.vpn-route .vpn-section-nav a { display:flex; align-items:center; gap:8px; flex-shrink:0; padding:11px 0 13px; color:#705796; font-size:12px; font-weight:500; white-space:nowrap; }
.vpn-route .vpn-section-nav a span { color:#697087; font-size:10px; font-weight:400; }
.vpn-route .vpn-section-nav a:hover { color:#4c386e; }
.vpn-route .vpn-panel { min-width:0; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.vpn-route .vpn-panel-heading,.vpn-route .vpn-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; }
.vpn-route .vpn-panel-heading { padding:19px 20px 0; }
.vpn-route h2 { color:#4a4e63; font-size:16px; font-weight:600; letter-spacing:-.2px; }
.vpn-route .vpn-panel-heading p,.vpn-route .vpn-section-heading p { color:#697087; font-size:11px; margin-top:4px; line-height:1.6; }
.vpn-route .vpn-source-label { color:#697087; font-size:10px; white-space:nowrap; }
.vpn-route .vpn-toolbar { display:flex; align-items:center; gap:12px; padding:16px 20px 6px; }
.vpn-route .vpn-search { display:flex; align-items:center; flex:1 1 300px; max-width:350px; min-width:0; gap:8px; padding:8px 10px; border:1px solid #dddde8; border-radius:6px; background:#fff; }
.vpn-route .vpn-search svg { width:15px; height:15px; flex-shrink:0; stroke:#8c82a1; stroke-width:1.5; fill:none; }
.vpn-route .vpn-search input { min-width:0; width:100%; padding:0; border:0; background:transparent; font:inherit; color:#4a4e63; font-size:12px; }
.vpn-route .vpn-search input::placeholder { color:#697087; opacity:1; }
.vpn-route .vpn-filter { display:flex; align-items:center; gap:8px; color:#697087; font-size:11px; }
.vpn-route .vpn-filter select { max-width:150px; padding:8px 28px 8px 9px; border:1px solid #dddde8; border-radius:6px; background:#fff; font:inherit; color:#4a4e63; font-size:11px; }
.vpn-route .vpn-table-count { margin-left:auto; color:#697087; font-size:10px; white-space:nowrap; }
.vpn-route .vpn-controls-note { margin:0 20px 12px; color:#697087; font-size:10px; }
.vpn-route .vpn-table-wrap { max-width:100%; overflow:auto; overscroll-behavior-x:contain; }
.vpn-route .vpn-table { display:table; width:100%; min-width:1000px; border-collapse:separate; border-spacing:0; table-layout:auto; text-align:left; white-space:normal; }
.vpn-route .vpn-table caption { caption-side:top; }
.vpn-route .vpn-table thead { display:table-header-group; }
.vpn-route .vpn-table tbody { display:table-row-group; }
.vpn-route .vpn-table tr { display:table-row; padding:0; background:var(--vpn-row-bg,#fff); border:0; border-radius:0; }
.vpn-route .vpn-table th,.vpn-route .vpn-table td { display:table-cell; padding:13px 14px; border:0; border-bottom:1px solid #efeff5; border-radius:0; font-size:11px; vertical-align:top; }
.vpn-route .vpn-table thead th { padding-top:11px; padding-bottom:11px; color:#697087; background:#fcfcfe; border-top:1px solid var(--line); font-size:10px; font-weight:500; white-space:nowrap; }
.vpn-route .vpn-table tbody th { color:#4a4e63; font-weight:600; text-align:left; }
.vpn-route .vpn-table th:first-child,.vpn-route .vpn-table td:first-child { position:sticky; left:0; z-index:2; width:145px; min-width:145px; padding-left:20px; background:var(--vpn-row-bg,#fff); box-shadow:1px 0 0 #e9eaf1; }
.vpn-route .vpn-table thead th:first-child { z-index:3; background:#fcfcfe; }
.vpn-route .vpn-table th:last-child,.vpn-route .vpn-table td:last-child { padding-right:20px; }
.vpn-route .vpn-table tbody tr:last-child > * { border-bottom:0; }
.vpn-route .vpn-table .vpn-review-row { --vpn-row-bg:#fdfbff; }
.vpn-route .vpn-table .vpn-data-issue { --vpn-row-bg:#fffdf8; }
.vpn-route .vpn-table tr:target { --vpn-row-bg:#f3eefb; outline:2px solid #c0aedb; outline-offset:-2px; }
.vpn-route .vpn-login { display:block; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.vpn-route .vpn-owner { min-width:145px; color:#4a4e63; }
.vpn-route .vpn-owner a { color:#705796; }
.vpn-route .vpn-table .subline { color:#697087; font-size:10px; line-height:1.5; margin-top:3px; }
.vpn-route .vpn-table .pill { font-size:10px; white-space:nowrap; }
.vpn-route .vpn-connection { min-width:140px; }
.vpn-route .vpn-review-text { color:#886633; max-width:145px; font-size:10px; line-height:1.5; }
.vpn-route .vpn-no-review { color:#697087; font-size:10px; }
.vpn-route .vpn-account-details { min-width:60px; }
.vpn-route .vpn-account-details[open] { width:230px; }
.vpn-route .vpn-account-details summary { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; color:#705796; font-size:11px; padding:5px 0; list-style:none; white-space:nowrap; }
.vpn-route .vpn-account-details summary::-webkit-details-marker { display:none; }
.vpn-route .vpn-account-details summary::after { content:"+"; font-size:15px; line-height:1; }
.vpn-route .vpn-account-details[open] summary::after { content:"−"; }
.vpn-route .vpn-account-detail-fields { display:grid; grid-template-columns:1fr; gap:9px; margin:8px 0 2px; padding:12px; border:1px solid var(--line); border-radius:7px; background:#faf9fd; }
.vpn-route .vpn-account-detail-fields dt { color:#697087; font-size:10px; margin:0 0 2px; }
.vpn-route .vpn-account-detail-fields dd { color:#4a4e63; font-size:11px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.vpn-route .vpn-panel-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; padding:13px 20px; border-top:1px solid var(--line); color:#697087; font-size:10px; }
.vpn-route .vpn-section { margin-top:28px; scroll-margin-top:18px; }
.vpn-route #vpn-accounts,.vpn-route #vpn-history { scroll-margin-top:18px; }
.vpn-route .vpn-section-heading { margin-bottom:14px; }
.vpn-route .vpn-session-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.vpn-route .vpn-session-card { min-width:0; padding:17px; background:#fff; border:1px solid var(--line); border-radius:9px; }
.vpn-route .vpn-card-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.vpn-route h3 { font-size:13px; color:#4a4e63; font-weight:600; overflow-wrap:anywhere; }
.vpn-route .vpn-card-heading .pill { font-size:9px; }
.vpn-route .vpn-session-source { color:#697087; font-size:10px; margin-top:6px; }
.vpn-route .vpn-session-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 10px; margin:18px 0 15px; }
.vpn-route .vpn-field-wide { grid-column:1 / -1; }
.vpn-route .vpn-session-fields dt { font-size:10px; color:#697087; margin-bottom:3px; }
.vpn-route .vpn-session-fields dd { color:#4a4e63; font-size:11px; overflow-wrap:anywhere; }
.vpn-route .vpn-traffic { display:flex; gap:24px; border-top:1px solid var(--line); padding-top:12px; }
.vpn-route .vpn-traffic > div { display:flex; flex-direction:column; gap:3px; }
.vpn-route .vpn-traffic span { font-size:10px; color:#697087; }
.vpn-route .vpn-traffic strong { font-size:16px; font-weight:600; color:#4a4e63; }
.vpn-route .vpn-card-note { color:#697087; font-size:10px; margin-top:10px; line-height:1.5; }
.vpn-route .vpn-session-unverified { border-color:#eadfc9; background:#fffdfa; }
.vpn-route .vpn-traffic-unavailable { padding:10px 12px; border-radius:6px; background:#faf3e8; }
.vpn-route .vpn-traffic-unavailable strong { color:#886633; font-size:11px; font-weight:600; }
.vpn-route .vpn-traffic-unavailable p { font-size:10px; color:#886633; margin-top:4px; line-height:1.55; }
.vpn-route .vpn-heading-count { color:#886633; font-size:11px; font-weight:400; letter-spacing:0; margin-left:7px; }
.vpn-route .vpn-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.vpn-route .vpn-review-card { min-width:0; padding:17px 18px; background:#fff; border:1px solid var(--line); border-left:3px solid #d8bc8c; border-radius:8px; }
.vpn-route .vpn-review-owner { display:block; margin:5px 0 13px; color:#697087; font-size:10px; }
.vpn-route .vpn-review-reason { display:block; color:#886633; font-size:12px; font-weight:600; }
.vpn-route .vpn-review-card p { color:#697087; font-size:11px; line-height:1.6; margin-top:5px; max-width:560px; }
.vpn-route .vpn-review-card a { display:inline-flex; gap:12px; align-items:center; color:#705796; margin-top:12px; font-size:11px; }
.vpn-route .vpn-section-note { color:#697087; font-size:10px; line-height:1.6; margin-top:10px; }
.vpn-route .vpn-history-panel { margin-top:28px; }
.vpn-route .vpn-history-panel .vpn-panel-heading { padding-bottom:16px; }
.vpn-route .vpn-history-table { min-width:1040px; }
.vpn-route .vpn-history-note { display:flex; align-items:flex-start; gap:12px; padding:14px 20px; border-top:1px solid var(--line); }
.vpn-route .vpn-history-note .pill { flex-shrink:0; font-size:9px; }
.vpn-route .vpn-history-note p { color:#697087; font-size:11px; line-height:1.6; }
.vpn-route .vpn-bottom-note { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:20px; font-size:10px; color:#697087; }
.vpn-route .vpn-bottom-note a { color:#705796; }
.vpn-route a:hover { text-decoration:underline; text-underline-offset:3px; }
.vpn-route a:focus-visible,.vpn-route summary:focus-visible,.vpn-route select:focus-visible,.vpn-route input:focus-visible,.vpn-route [tabindex]:focus-visible { outline:2px solid #8c73b1; outline-offset:3px; border-radius:3px; }
.vpn-route .vpn-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1100px) {
  .vpn-route .content { padding:24px; }
  .vpn-route .vpn-session-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vpn-route .vpn-session-unverified { grid-column:1 / -1; }
}
@media (max-width:700px) {
  .vpn-route .vpn-page-heading { flex-direction:column; gap:12px; }
  .vpn-route .vpn-heading-side { align-items:flex-start; gap:6px; text-align:left; }
  .vpn-route .vpn-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .vpn-route .vpn-section-nav { gap:20px; }
  .vpn-route .vpn-review-grid { grid-template-columns:1fr; }
  .vpn-route .vpn-table-count { display:none; }
}
@media (max-width:600px) {
  .vpn-route .content { padding:20px 14px 30px; }
  .vpn-route h1 { font-size:25px; }
  .vpn-route .vpn-title { gap:8px; }
  .vpn-route .vpn-page-heading { margin-bottom:18px; }
  .vpn-route .vpn-metric { padding:13px 14px; }
  .vpn-route .vpn-metric strong { font-size:25px; }
  .vpn-route .vpn-metric small { font-size:9px; }
  .vpn-route .vpn-panel-heading { padding:16px 15px 0; align-items:flex-start; }
  .vpn-route h2 { font-size:15px; }
  .vpn-route .vpn-toolbar { flex-wrap:wrap; gap:8px; padding:13px 15px 6px; }
  .vpn-route .vpn-search { max-width:none; flex-basis:100%; }
  .vpn-route .vpn-filter { gap:7px; }
  .vpn-route .vpn-controls-note { margin:2px 15px 12px; line-height:1.5; }
  .vpn-route .vpn-table th:first-child,.vpn-route .vpn-table td:first-child { min-width:135px; width:135px; padding-left:15px; }
  .vpn-route .vpn-account-details[open] { width:clamp(110px,calc(100vw - 212px),230px); }
  .vpn-route .vpn-panel-footer { padding:12px 15px; }
  .vpn-route .vpn-section { margin-top:24px; }
  .vpn-route .vpn-session-grid { grid-template-columns:1fr; }
  .vpn-route .vpn-session-unverified { grid-column:auto; }
  .vpn-route .vpn-session-card { padding:16px; }
  .vpn-route .vpn-review-card { padding:15px; }
  .vpn-route .vpn-history-note { flex-direction:column; gap:8px; padding:14px 15px; }
  .vpn-route .vpn-bottom-note { line-height:1.6; }
}