.role-journey-window {
  width:calc(100vw - 40px);
  height:calc(100vh - 40px);
  max-width:none;
  max-height:none;
  margin:20px;
  padding:0;
  color:#e7eef7;
  background:#101923;
  border:1px solid #4c637c;
  border-radius:16px;
  box-shadow:0 28px 100px #000b;
  overflow:hidden;
  font:13px/1.5 "Segoe UI",sans-serif;
}
.role-journey-window[open] { display:flex; flex-direction:column; }
.role-journey-window::backdrop { background:#030912bc; backdrop-filter:blur(4px); }
.role-journey-window * { box-sizing:border-box; }
.role-journey-window button, .role-journey-window select { font:inherit; }
.role-journey-window button { color:inherit; cursor:pointer; }
.role-journey-window button:focus-visible,
.role-journey-window select:focus-visible,
.role-journey-window input:focus-visible,
.rj-viewport:focus-visible { outline:2px solid #c7e3ff; outline-offset:3px; }
.rj-window-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  gap:20px;
  background:#19283b;
  border-bottom:1px solid #33465c;
  flex-shrink:0;
}
.rj-window-header small { color:#99b2ca; font-size:10px; letter-spacing:1.8px; }
.rj-window-header h2 { margin:1px 0 0; color:#f3f7fc; font-size:24px; font-weight:600; }
.rj-project-name { color:#b5c8da; font-size:12px; margin:1px 0 0; }
.rj-close { border:1px solid #4a617a; background:#273c52; border-radius:9px; width:36px; height:36px; padding:0; font-size:24px!important; }
.rj-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; padding:12px 24px; border-bottom:1px solid #33465c; flex-shrink:0; }
.rj-role-label { display:flex; align-items:center; gap:12px; color:#bed0e3; font-weight:600; }
.rj-role-label select { width:clamp(200px,28vw,400px); max-width:100%; border:1px solid #55718d; background:#1a2b3d; color:#e7eef7; border-radius:7px; padding:8px 12px; }
.rj-detail-label { display:flex; align-items:center; gap:8px; color:#a9bfd3; font-size:12px; cursor:pointer; }
.rj-detail-label input { width:16px; height:16px; margin:0; accent-color:#92badd; }
.rj-catalog { margin-left:auto; border:0; background:none; color:#adcfee!important; padding:6px 0; font-size:12px!important; }
.rj-viewport { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-color:#4d657d #101923; }
.rj-board { --rj-gap:44px; --rj-column:calc((100% - 2 * var(--rj-gap)) / 3); padding:0 24px 32px; }
.rj-column-headings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--rj-gap); position:sticky; top:0; z-index:5; padding:15px 0 12px; background:#101923f7; }
.rj-column-headings > div { display:flex; gap:10px; align-items:center; font-size:12px; font-weight:600; color:#b9cede; }
.rj-column-headings > div > span { font-size:18px; }
.rj-column-headings .rj-heading-2 { color:#d3bb87; }
.rj-column-headings .rj-heading-3 { color:#e2a1a8; }
.rj-phase { --rj-phase-color:#93b3cc; --rj-phase-fill:#25384a; margin:0 0 24px; }
.rj-phase-heading { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:12px 15px; border:1px solid color-mix(in srgb,var(--rj-phase-color) 55%,#33465c); border-left:5px solid var(--rj-phase-color); border-radius:8px; background:color-mix(in srgb,var(--rj-phase-fill) 65%,#162231); }
.rj-phase-number { color:var(--rj-phase-color); font-size:17px; font-weight:700; }
.rj-phase-heading strong { flex:1; color:#edf3fa; font-size:14px; overflow-wrap:anywhere; }
.rj-phase-heading > span:nth-last-child(2) { color:#b4c7d9; font-size:11px; }
.rj-phase-heading > span:last-child { color:var(--rj-phase-color); }
.rj-row { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--rj-gap); align-items:start; padding:16px 0 0; }
.rj-slot { position:relative; grid-row:1; min-width:0; z-index:2; }
.rj-column-1 { grid-column:1; }
.rj-column-2 { grid-column:2; }
.rj-column-3 { grid-column:3; }
.rj-main-group { position:relative; padding-bottom:20px; }
.rj-main-group.rj-ordered:has(+ .rj-main-group.rj-ordered)::after { content:'↓'; display:block; position:absolute; bottom:-9px; left:0; width:var(--rj-column); color:var(--rj-phase-color); text-align:center; font-size:22px; }
.rj-card { background:#182737; border:1px solid #3d566e; border-left:3px solid var(--rj-phase-color); border-radius:9px; min-width:0; overflow-wrap:anywhere; box-shadow:0 4px 12px #02080f22; }
.rj-card-top { display:flex; align-items:center; gap:10px; padding:9px 12px 0; color:#9db4ca; font-size:10px; }
.rj-code { font-weight:700; color:var(--rj-phase-color); letter-spacing:.6px; flex-shrink:0; }
.rj-config { margin-left:auto; align-self:start; border:1px solid transparent; border-radius:5px; background:none; color:#b0c9de!important; padding:0 3px; font-size:17px!important; line-height:1.1!important; }
.rj-config:hover { border-color:#587792; background:#2b435c; }
.rj-card-title { display:flex; gap:12px; align-items:baseline; width:100%; text-align:left; padding:5px 12px 4px; background:transparent; border:0; }
.rj-card-title strong { flex:1; font-size:13px; line-height:1.45; font-weight:600; }
.rj-card-title > span { flex-shrink:0; color:#9ebbd6; }
.rj-card-title:hover strong { color:#c6e3ff; }
.rj-card-meta { display:flex; gap:7px 12px; flex-wrap:wrap; padding:2px 12px 10px; font-size:10px; color:#afc3d7; }
.rj-card-meta > span + span { color:#d6bf8d; }
.rj-order { color:#8da9c2; margin:0 12px 10px; font-size:10px; }
.rj-condition { margin:0 12px 10px; color:#e1c895; font-size:11px; white-space:pre-wrap; }
.rj-condition b { margin-right:4px; }
.rj-path-optional { background:#282a2b; border-color:#79694b; border-left-color:#d7b779; }
.rj-path-optional .rj-code { color:#d7b779; }
.rj-path-exit { background:#30262e; border-color:#805765; border-left-color:#dfa0ad; }
.rj-path-exit .rj-code { color:#dfa0ad; }
.rj-details { margin:0; padding:10px 12px; border-top:1px solid #52647655; font-size:11px; }
.rj-details > div + div { margin-top:8px; }
.rj-details dt { color:#859fb7; font-size:10px; }
.rj-details dd { color:#c2d1df; margin:2px 0 0; white-space:pre-wrap; }
.rj-counterparts { display:flex; gap:5px; flex-wrap:wrap; padding:0 12px 10px; }
.rj-counterparts > small { width:100%; color:#859fb7; font-size:10px; }
.rj-counterpart { display:inline-flex; align-items:center; gap:6px; padding:3px 6px; color:#c7d6e6; font-size:10px; border:1px solid #58708966; border-radius:4px; }
.rj-counterpart i { flex-shrink:0; width:6px; height:6px; border-radius:50%; background:#a4bcd2; }
.rj-steps { margin:0; list-style:none; padding:5px 12px; border-top:1px solid #52647655; background:#09132133; }
.rj-steps li { display:flex; align-items:baseline; gap:9px; padding:8px 0; color:#d3e0ed; font-size:11px; }
.rj-steps li + li { border-top:1px solid #52647633; }
.rj-step-code { color:#8dacc7; flex-shrink:0; font-size:10px; font-variant-numeric:tabular-nums; }
.rj-steps li > span:last-child { min-width:0; white-space:pre-wrap; }
.rj-steps small { display:block; margin-top:3px; color:#91a9bc; font-size:9px; }
.rj-note { border-top:1px dashed #ad996b77; padding:10px 12px; color:#d8c8a1; font-size:11px; background:#9d854211; white-space:pre-wrap; }
.rj-note small { display:block; margin-bottom:3px; font-size:9px; letter-spacing:.8px; text-transform:uppercase; color:#bca779; }
.rj-reference { display:block; width:100%; text-align:left; border:1px dashed #536c82; border-radius:7px; background:#132130; padding:10px 12px; overflow-wrap:anywhere; }
.rj-reference small { display:block; color:#8ea9c1; font-size:10px; }
.rj-reference span { display:block; margin-top:3px; color:#b9ccdd; font-size:11px; }
.rj-anchor-label { margin:0 0 7px; font-size:10px; color:#a6b8cb; overflow-wrap:anywhere; }
.rj-branch-arrow { position:absolute; top:44px; height:1px; border-top:1px solid #c5ae7c; z-index:1; }
.rj-branch-arrow::after { content:''; position:absolute; top:-4px; right:0; width:6px; height:6px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg); color:#c5ae7c; }
.rj-arrow-1-2 { left:var(--rj-column); width:var(--rj-gap); }
.rj-arrow-1-3 { left:var(--rj-column); width:calc(var(--rj-column) + 2 * var(--rj-gap)); }
.rj-arrow-2-3 { left:calc(2 * var(--rj-column) + var(--rj-gap)); width:var(--rj-gap); }
.rj-arrow-3-2 { left:calc(2 * var(--rj-column) + var(--rj-gap)); width:var(--rj-gap); }
.rj-arrow-3-2::after { left:0; right:auto; transform:rotate(-135deg); }
.rj-phase-empty { margin:0; padding:22px 18px; color:#8fa9bf; font-size:12px; line-height:1.65; }
.rj-empty { padding:65px 20px; text-align:center; color:#a6bfd5; }
.rj-empty h3 { color:#d5e6f6; font-weight:500; font-size:20px; }
.rj-empty-role { margin:18px 0 0; padding:15px 18px; border:1px dashed #4a667f; border-radius:8px; color:#b4c9dd; }
.rj-empty-role p { margin:3px 0 0; font-size:12px; }
.rj-unscoped { border-top:1px dashed #536b81; padding-top:18px; }
.rj-unscoped-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 18px; color:#bdcede; }
.rj-unscoped-heading span { font-size:11px; color:#8fa7bd; }
.rj-footer { flex-shrink:0; padding:11px 24px; border-top:1px solid #34485c; background:#182737; color:#90abc3; font-size:10px; }
@media (max-width:900px) {
  .role-journey-window { width:calc(100vw - 16px); height:calc(100vh - 16px); margin:8px; border-radius:10px; }
  .rj-board { --rj-gap:24px; padding-right:12px; padding-left:12px; }
  .rj-window-header, .rj-toolbar { padding:11px 14px; }
  .rj-window-header h2 { font-size:20px; }
  .rj-column-headings > div { font-size:11px; gap:5px; }
  .rj-column-headings > div > span { display:none; }
  .rj-steps li { flex-direction:column; gap:2px; }
  .rj-card-title strong { font-size:12px; }
  .rj-footer { padding:9px 14px; }
}
@media (max-width:550px) {
  .rj-board { --rj-gap:12px; padding-right:8px; padding-left:8px; }
  .rj-toolbar { gap:10px; }
  .rj-role-label { width:100%; }
  .rj-role-label select { flex:1; width:0; }
  .rj-card-top { flex-wrap:wrap; gap:3px; padding:7px 6px 0; }
  .rj-card-top > span:nth-child(2) { width:100%; order:3; }
  .rj-card-title { padding:6px; gap:3px; }
  .rj-card-meta, .rj-details, .rj-note, .rj-steps, .rj-reference { padding:7px 6px; }
  .rj-card-title > span { display:none; }
  .rj-counterparts { padding:0 6px 7px; }
  .rj-phase-heading { gap:7px; padding:9px; }
  .rj-phase-heading > span:nth-last-child(2) { display:none; }
  .rj-phase-heading strong { font-size:12px; }
}