:root{
    --bg:#1f2126;
    --bg2:#262930;
    --panel:#2d3139;
    --panel2:#353a44;
    --text:#e6e8ee;
    --muted:#9aa3b2;
    --line:#464d5a;
    --cyan:#00e5cc;
    --cyan-dim:rgba(0,229,204,.12);
    --ai-relation:#cf675d;
    --ai-relation-selected:#f2a59d;
    --amber:#f0a500;
    --danger:#e05050;
    --blue:#66a6ff;
    --purple:#c084fc;
    --green:#7ddc8b;
    --scenario:#ff6bcb;
    --must:#ff7b7b;
    --should:#ffd166;
    --optional:#a7f3d0;
    --shadow:0 10px 30px rgba(0,0,0,.28);
    --radius:18px;
    --btn-h:26px;
    --btn-radius:13px;
    --viz-sidebar-width:340px;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; width:100%; height:100%; background:var(--bg); color:var(--text); font-family:Consolas,'SF Mono',Menlo,monospace; }
  body{ display:grid; grid-template-rows:auto 1fr; overflow:hidden; }
  .topbar{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
      "left primary"
      "secondary secondary";
    align-items:center; gap:7px 12px;
    padding:8px 10px 7px; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    box-shadow:var(--shadow);
    position:relative; z-index:10;
  }
  .brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:0 0 auto; }
  .brand-icon{ width:40px; height:40px; object-fit:contain; flex:0 0 auto; display:block; }
  .brand-copy{ min-width:0; }
  .topbar-left{ grid-area:left; display:flex; align-items:center; gap:12px; min-width:0; flex:0 0 auto; }
  .nav-return-btn{ flex:0 0 auto; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
  .nav-return-btn img{ width:14px; height:14px; object-fit:contain; display:block; flex:0 0 auto; }
  .brand h1{ margin:0; font-size:17px; letter-spacing:.11em; color:var(--cyan); line-height:1.1; }
  .sub{ color:var(--muted); font-size:12px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:520px; }
  .toolbar{ display:contents; }
  .toolbar-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
  .toolbar-row-primary{ grid-area:primary; justify-content:flex-end; }
  .toolbar-row-secondary{ grid-area:secondary; justify-content:flex-end; padding-top:1px; }
  .toolbar-group{
    display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
    padding:2px 5px; border-radius:999px;
  }
  .toolbar-group.mode-group{ border:1px solid rgba(0,229,204,.18); background:rgba(0,229,204,.035); }
  .toolbar-group.scenario-group{ border:1px solid rgba(255,107,203,.18); background:rgba(255,107,203,.035); }
  .toolbar-group.scenario-group.is-collapsed,
  .toolbar-group.scenario-filter-group.is-collapsed,
  .toolbar-group.layer-group.is-collapsed,
  .toolbar-group.relevance-group.is-collapsed{ display:none; }
  .toolbar-group.scenario-filter-group{ border:1px solid rgba(255,107,203,.22); background:rgba(255,107,203,.045); }
  .toolbar-group.layer-group{ border:1px solid rgba(125,220,139,.16); background:rgba(125,220,139,.025); }
  .toolbar-group.relevance-group{ border:1px solid rgba(104,169,255,.18); background:rgba(104,169,255,.035); }
  .relevance-control{ height:var(--btn-h); display:inline-flex; align-items:center; gap:7px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:rgba(45,49,57,.82); color:var(--muted); font-size:11px; white-space:nowrap; }
  .relevance-control input[type=range]{ width:118px; accent-color:var(--blue); cursor:pointer; }
  .relevance-control output{ min-width:30px; color:var(--text); font-weight:700; text-align:right; }
  .scenario-filter-group .relevance-control input[type=range]{ accent-color:var(--scenario); }
  .toolbar-label{ color:var(--muted); font-size:10px; white-space:nowrap; padding:0 3px; }
  .field-wrap{ display:inline-flex; align-items:center; gap:4px; }
  .field-wrap span{ color:var(--muted); font-size:10px; white-space:nowrap; }
  .field-wrap .field{ min-width:0; }
  .btn{
    border:1px solid var(--cyan); color:var(--cyan); background:transparent; cursor:pointer;
    border-radius:var(--btn-radius); height:var(--btn-h); padding:0 12px; font:inherit; font-size:11px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:.15s ease;
    line-height:1; white-space:nowrap;
  }
  .btn:hover{ background:var(--cyan-dim); }
  .btn.danger{ border-color:var(--danger); color:var(--danger); }
  .btn.danger:hover{ background:rgba(224,80,80,.14); }
  .btn.mode-btn.active{ background:var(--cyan-dim); box-shadow:0 0 0 1px rgba(0,229,204,.22) inset; }
  .field.search-field{ min-width:190px; width:220px; }
  .field.scenario-field{ min-width:96px; width:116px; }
  .field.scenario-limit-field{ min-width:88px; width:88px; padding:0 10px; }
  .btn.side-open-btn{ margin-top:10px; text-decoration:none; justify-content:center; width:100%; }
  .side-note{ color:var(--muted); font-size:12px; line-height:1.65; margin-top:8px; }
  .toggle{
    height:var(--btn-h); display:inline-flex; align-items:center; gap:6px; padding:0 10px;
    border:1px solid var(--line); border-radius:999px; background:rgba(45,49,57,.82);
    color:var(--muted); font-size:11px; cursor:pointer; user-select:none;
  }
  .toggle input{ accent-color:var(--cyan); margin:0; }
  .layer-toggle-with-sub{ gap:8px; padding:0 8px; }
  .layer-toggle-with-sub label{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }
  .layer-toggle-with-sub .toggle-sub{ border-left:1px solid var(--line); padding-left:8px; font-size:10px; opacity:.86; }
  .layer-toggle-with-sub .toggle-sub input{ transform:scale(.9); }
  .toolbar-sep{ width:1px; height:24px; background:var(--line); margin:0 2px; }
  .field{
    height:var(--btn-h); min-width:220px; border-radius:999px; border:1px solid var(--line);
    background:var(--panel); color:var(--text); padding:0 12px; font:inherit; font-size:11px;
    outline:none; box-shadow:none;
  }
  .field:focus{
    background:var(--panel2); color:var(--text); border-color:rgba(0,229,204,.65);
    box-shadow:0 0 0 2px rgba(0,229,204,.10);
  }
  input.field:-webkit-autofill,
  input.field:-webkit-autofill:hover,
  input.field:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text);
    transition:background-color 9999s ease-in-out 0s;
    box-shadow:0 0 0 1000px var(--panel) inset, 0 0 0 2px rgba(0,229,204,.10);
    border-color:rgba(0,229,204,.45);
  }
  .shell{
    position:relative; min-height:0; display:grid;
    grid-template-columns:minmax(0,1fr) var(--viz-sidebar-width);
    transition:grid-template-columns .18s ease;
  }
  .shell.detail-collapsed{ grid-template-columns:minmax(0,1fr) 0; }
  .graph-wrap{
    position:relative; min-width:0; min-height:0; overflow:hidden;
    background:
      radial-gradient(circle at 20% 20%, rgba(0,229,204,.08), transparent 26%),
      radial-gradient(circle at 80% 10%, rgba(240,165,0,.08), transparent 24%),
      linear-gradient(180deg, #1b1d22 0%, #16181d 100%);
  }
  #graph{ width:100%; height:100%; display:block; }
  .sidebar{
    min-width:0;
    border-left:1px solid var(--line); background:linear-gradient(180deg, rgba(45,49,57,1), rgba(33,36,43,1));
    padding:16px; overflow:auto;
    transition:opacity .15s ease, padding .15s ease, border-color .15s ease;
  }
  .shell.detail-collapsed .sidebar{
    padding-left:0; padding-right:0; border-left-color:transparent;
    opacity:0; pointer-events:none; overflow:hidden;
  }
  .shell.detail-collapsed .sidebar>*{ visibility:hidden; }
  body.viz-detail-resizing{ cursor:col-resize; user-select:none; }
  .detail-panel-resizer{
    position:absolute; top:0; bottom:0; right:var(--viz-sidebar-width); z-index:8;
    width:8px; transform:translateX(50%); cursor:col-resize;
  }
  .detail-panel-resizer::before{
    content:''; position:absolute; inset:0; background:transparent; transition:background .12s ease;
  }
  .detail-panel-resizer:hover::before,
  body.viz-detail-resizing .detail-panel-resizer::before{ background:rgba(0,229,204,.14); }
  .shell.detail-collapsed .detail-panel-resizer{ display:none; }
  .detail-panel-toggle{
    position:fixed; top:50%; right:calc(var(--viz-sidebar-width) + 10px); transform:translateY(-50%); z-index:320;
    width:14px; height:52px; padding:0; border:1px solid var(--cyan); border-right:none;
    border-radius:10px 0 0 10px; background:rgba(50,50,50,.88); color:var(--cyan);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
    transition:right .18s ease, background .12s ease, opacity .18s ease;
  }
  .detail-panel-toggle:hover{ background:rgba(0,229,204,.12); }
  .detail-panel-toggle span{ font-size:11px; line-height:1; }
  .shell.detail-collapsed .detail-panel-toggle{ right:10px; }
  .shell.detail-collapsed .detail-panel-toggle .toggle-open{ display:block; }
  .shell.detail-collapsed .detail-panel-toggle .toggle-close{ display:none; }
  .shell:not(.detail-collapsed) .detail-panel-toggle .toggle-open{ display:none; }
  .shell:not(.detail-collapsed) .detail-panel-toggle .toggle-close{ display:block; }
  .card{
    border:1px solid var(--line); border-radius:16px; background:rgba(38,41,48,.92);
    padding:14px; margin-bottom:12px; box-shadow:var(--shadow);
  }
  .k{ font-size:11px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }
  .v{ font-size:13px; line-height:1.7; word-break:break-word; }
  .big{ font-size:18px; font-weight:700; margin-bottom:4px; }
  .empty{ color:var(--muted); font-size:13px; line-height:1.7; }
  .legend{
    position:absolute; left:16px; bottom:16px; z-index:3;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:calc(100% - 32px);
    padding:7px 9px; border:1px solid rgba(255,255,255,.10); border-radius:16px;
    background:rgba(24,27,33,.74); backdrop-filter: blur(10px); box-shadow:var(--shadow);
  }
  .legend-title{
    color:var(--text); font-size:11px; font-weight:700; letter-spacing:.08em;
    padding:0 6px 0 2px; border-right:1px solid var(--line); line-height:22px;
  }
  .legend .item{
    display:flex; align-items:center; gap:7px; min-height:22px; padding:4px 8px; border-radius:999px;
    border:1px solid var(--line); background:rgba(45,49,57,.80); font-size:11px; color:var(--muted);
    transition:opacity .12s ease, filter .12s ease;
  }
  .legend .item.is-off{ opacity:.34; filter:saturate(.45); }
  .legend [data-legend-scenario-priority]{ display:none; }
  body.mode-scenario .legend [data-legend-layer],
  body.mode-scenario .legend [data-legend-structure-only]{ display:none; }
  body.mode-scenario .legend [data-legend-scenario-priority]{ display:flex; }
  .legend .item small{ color:var(--muted); opacity:.75; font-size:10px; margin-left:2px; }
  .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; flex:0 0 auto; }
  .legend-line{
    width:28px; height:0; display:inline-block; border-top:2px solid var(--amber); border-radius:999px; flex:0 0 auto;
  }
  .legend-line.explicit{ border-color:var(--amber); }
  .legend-line.attribute{ border-color:var(--blue); border-top-style:dashed; }
  .legend-line.reverse{ border-color:var(--purple); border-top-style:dashed; }
  .legend-line.relation-candidate{ border-color:var(--ai-relation); border-top-style:solid; box-shadow:0 0 7px rgba(207,103,93,.44); }
  .legend-line.weak{ border-color:var(--blue); border-top-style:dotted; opacity:.38; }
  .legend-line.strong{ border-color:var(--blue); border-top-width:4px; }
  .summary{
    position:absolute; right:16px; top:16px; display:flex; gap:8px; flex-wrap:wrap; z-index:3;
    justify-content:flex-end; max-width:calc(100% - 32px);
  }
  body.viz-summary-loading .summary{
    position:fixed; left:50%; top:50%; right:auto; bottom:auto; z-index:9200;
    transform:translate(-50%, -50%); justify-content:center; max-width:calc(100vw - 48px);
    pointer-events:none;
  }
  .pill{
    padding:6px 10px; border-radius:999px; border:1px solid var(--line);
    background:rgba(45,49,57,.92); font-size:11px; color:var(--muted);
  }
  .pill.viz-summary-loading-pill{
    padding:18px 24px; min-width:220px; text-align:center;
    border-color:rgba(0,229,204,.50); border-radius:18px;
    background:linear-gradient(180deg, rgba(45,49,57,.98), rgba(27,30,37,.98));
    color:var(--text); font-size:15px; box-shadow:0 18px 48px rgba(0,0,0,.44), 0 0 24px rgba(0,229,204,.12);
  }
  .viz-loading-spinner{
    width:34px; height:34px; margin:0 auto 12px; border-radius:999px;
    border:3px solid rgba(0,229,204,.18); border-top-color:var(--cyan); border-right-color:rgba(77,235,255,.82);
    box-shadow:0 0 18px rgba(0,229,204,.20), inset 0 0 10px rgba(77,235,255,.10);
    animation:viz-loading-spin .82s linear infinite;
  }
  @keyframes viz-loading-spin{ to{ transform:rotate(360deg); } }
  .pill.viz-summary-loading-pill strong{ color:var(--cyan); }
  .workflow-banner{
    position:absolute; left:16px; top:16px; z-index:4; max-width:min(520px, calc(100% - 390px));
    border:1px solid rgba(0,229,204,.18); border-radius:16px; padding:12px 14px;
    background:rgba(38,41,48,.90); box-shadow:var(--shadow); backdrop-filter:blur(8px);
  }
  .workflow-banner .mode-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--cyan); margin-bottom:4px; }
  .workflow-banner .mode-badge{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#0f1115; background:var(--cyan); border-radius:999px; padding:3px 8px; }
  .workflow-banner .mode-body{ color:var(--text); font-size:12px; line-height:1.6; }
  .workflow-banner .mode-hint{ color:var(--muted); font-size:11px; line-height:1.55; margin-top:5px; }
  .workflow-steps{ margin:8px 0 0; padding-left:18px; color:var(--text); font-size:12px; line-height:1.7; }
  .workflow-steps li::marker{ color:var(--cyan); }
  .node-label{
    fill:#e6e8ee; font-size:11px; pointer-events:none; paint-order:stroke;
    stroke:#1f2126; stroke-width:4px; stroke-linejoin:round;
  }
  .node circle{
    fill:var(--cyan); stroke:#0f1115; stroke-width:1.5;
    filter:drop-shadow(0 0 10px rgba(0,0,0,.28));
    transition:r .12s ease;
  }
  .node.project circle{ fill:var(--cyan); }
  .node.attribute-tag circle{ fill:var(--blue); }
  .node.reverse-tag circle{ fill:var(--purple); }
  .node.folder circle{ fill:var(--green); }
  .node.scenario circle{ fill:var(--scenario); }
  .node.priority-must circle{ fill:var(--must); }
  .node.priority-should circle{ fill:var(--should); }
  .node.priority-optional circle{ fill:var(--optional); }
  .node.focus circle:not(.focus-ring){ stroke:var(--amber); stroke-width:4; }
  .node .focus-ring{
    fill:none !important; stroke:var(--amber) !important; stroke-width:2.2 !important;
    stroke-dasharray:5 4; opacity:.95; pointer-events:none;
  }
  .node.dimmed, .link.dimmed, .node-label.dimmed{ opacity:.14 !important; }
  .node.selected circle:not(.focus-ring){ stroke:#fff; stroke-width:2.6; }
  .link{ stroke:var(--amber); stroke-opacity:.72; stroke-linecap:round; }
  .route-links, .route-nodes{ pointer-events:none; }
  .route-link{
    stroke:#fff7d6 !important;
    stroke-opacity:1 !important;
    stroke-width:5.4px !important;
    stroke-linecap:round;
    filter:drop-shadow(0 0 7px rgba(255, 193, 7, .72)) drop-shadow(0 0 13px rgba(255, 193, 7, .36));
  }
  .route-node-ring{
    fill:none !important;
    stroke:var(--amber) !important;
    stroke-width:2.5px !important;
    stroke-dasharray:5 4;
    opacity:1 !important;
    filter:drop-shadow(0 0 6px rgba(255, 193, 7, .60));
  }
  .route-node-ring.route-current-ring{
    stroke:#fff7d6 !important;
    stroke-width:3.2px !important;
    stroke-dasharray:8 4;
  }
  .route-history-card .route-history-line{ line-height:1.9; }
  .route-history-node{ color:var(--text); font-weight:700; }
  .route-history-arrow{ color:var(--amber); font-weight:900; padding:0 4px; }

  .link.explicit{ stroke:var(--amber); }
  .link.attribute-tag{ stroke:var(--blue); stroke-opacity:.78; stroke-dasharray:5 4; }
  .link.reverse-tag{ stroke:var(--purple); stroke-dasharray:2 4; }
  .link.attribute-link{ stroke:var(--blue); stroke-opacity:.74; stroke-dasharray:7 5; }
  .link.phase10-attribute-link{ stroke:var(--blue); stroke-opacity:.78; stroke-dasharray:7 5; }
  .link.common-identifier,
  .link.common-specialized-term,
  .link.common-target,
  .link.same-system,
  .link.same-process{ stroke:var(--blue); stroke-opacity:.78; stroke-dasharray:7 5; }
  .link.reverse-lookup-link{ stroke:var(--purple); stroke-opacity:.68; stroke-dasharray:3 5; }
  .link.relation-candidate{ stroke:var(--ai-relation); stroke-opacity:.50; stroke-dasharray:none; filter:none; }
  .link.relation-candidate.ai-judge-missing{ stroke:var(--muted); stroke-opacity:.22; stroke-dasharray:5 7; filter:none; }
  .link.relation-candidate.relation-status-candidate{ stroke-opacity:.54; }
  .link.relation-candidate.relation-status-accepted{ stroke-opacity:.88; filter:drop-shadow(0 0 5px rgba(207,103,93,.22)); }
  .link.relation-candidate.relation-status-rejected{ display:none; }
  .link.relation-candidate.ai-decision-required,
  .link.relation-candidate.ai-priority-very-high{ stroke:var(--must); stroke-opacity:.90; filter:drop-shadow(0 0 5px rgba(255,123,123,.22)); }
  .link.relation-candidate.ai-decision-recommended,
  .link.relation-candidate.ai-priority-high{ stroke:var(--ai-relation); stroke-opacity:.78; filter:drop-shadow(0 0 4px rgba(207,103,93,.16)); }
  .link.relation-candidate.ai-decision-useful-comparison,
  .link.relation-candidate.ai-priority-medium{ stroke:var(--ai-relation); stroke-opacity:.68; }
  .link.relation-candidate.ai-decision-similar-case,
  .link.relation-candidate.ai-priority-low{ stroke:var(--cyan); stroke-opacity:.34; stroke-dasharray:8 6; filter:none; }
  .link.relation-candidate.ai-decision-weak-common-attribute,
  .link.relation-candidate.weak-common-attribute,
  .link.relation-candidate.ai-priority-weak{ stroke:var(--muted); stroke-opacity:.16; stroke-dasharray:2 9; filter:none; }
  .link-label{ pointer-events:none; font-size:9.5px; font-weight:800; fill:#ffffff; paint-order:stroke; stroke:rgba(0,0,0,.88); stroke-width:3.5px; stroke-linejoin:round; opacity:.94; letter-spacing:.02em; }
  .link-label.ai-decision-useful-comparison{ opacity:.78; font-weight:700; }
  .link-label.ai-decision-similar-case{ display:none; }
  .link-label.ai-decision-weak-common-attribute{ display:none; }
  .link.requirement-to-drawing,
  .link.drawing-to-requirement,
  .link.drawing-to-change,
  .link.change-to-drawing,
  .link.drawing-to-failure,
  .link.failure-to-drawing,
  .link.requirement-to-failure{ stroke:var(--ai-relation); filter:drop-shadow(0 0 5px rgba(207,103,93,.24)); }
  .link.document-reference{ stroke:var(--must); stroke-opacity:.88; stroke-dasharray:none; }
  .link.vocabulary-match{ stroke:var(--cyan); stroke-opacity:.86; stroke-dasharray:8 3; }
  .link.entity-match{ stroke:var(--blue); stroke-opacity:.78; stroke-dasharray:6 4; }
  .link.file-name-token-match{ stroke:var(--muted); stroke-opacity:.62; stroke-dasharray:2 6; }
  .link.weak-shared{ stroke-opacity:.30; stroke-dasharray:2 7; }
  .link.strong-shared{ stroke-opacity:.92; stroke-width:3.1; }
  .link.folder{ stroke:var(--green); stroke-opacity:.55; }
  .link.scenario{ stroke:var(--scenario); stroke-opacity:.82; stroke-dasharray:7 3; }
  .link.layer-hidden{ display:none; }
  .link.selected{ stroke:var(--amber); stroke-opacity:1 !important; stroke-width:3.2 !important; }
  .link.relation-candidate.selected{ stroke:var(--ai-relation-selected); stroke-opacity:1 !important; stroke-width:2.2 !important; filter:drop-shadow(0 0 9px rgba(242,165,157,.48)); }
  .link.path-highlight{ stroke-opacity:1 !important; stroke-width:3 !important; }
  .tag-line{ display:flex; gap:8px; align-items:flex-start; margin:4px 0; }
  .tag-line b{ color:var(--muted); min-width:86px; font-weight:400; }
  .tag-line span{ color:var(--text); }
  .scenario-card-title{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .scenario-candidate{ border:1px solid var(--line); border-radius:12px; padding:10px; margin:8px 0; background:rgba(255,255,255,.025); }
  .scenario-candidate .rank{ font-size:11px; color:var(--muted); margin-bottom:4px; }
  .scenario-candidate .name{ font-size:13px; font-weight:700; line-height:1.5; }
  .scenario-candidate .reason{ margin-top:5px; color:var(--muted); font-size:11px; line-height:1.55; }
  .scenario-priority{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; border:1px solid var(--line); font-size:11px; color:var(--muted); }
  .scenario-priority.must{ color:#fecaca; border-color:rgba(255,123,123,.45); }
  .scenario-priority.should{ color:#fde68a; border-color:rgba(255,209,102,.42); }
  .scenario-priority.optional{ color:#bbf7d0; border-color:rgba(167,243,208,.38); }
  #tooltip{
    position:fixed; left:0; top:0; transform:translate(12px,12px); pointer-events:none;
    min-width:220px; max-width:360px; padding:12px 14px; border-radius:14px;
    border:1px solid var(--line); background:rgba(38,41,48,.96); box-shadow:var(--shadow);
    font-size:12px; line-height:1.6; color:var(--text); z-index:99; display:none;
  }
  #tooltip .ttl{ color:var(--cyan); font-weight:700; margin-bottom:6px; }
  #tooltip .muted{ color:var(--muted); }
  .error{ color:#fecaca; background:rgba(127,29,29,.28); border:1px solid rgba(248,113,113,.28); padding:10px 12px; border-radius:10px; }
  @media (max-width: 1080px){
    .topbar{
      grid-template-columns:1fr;
      grid-template-areas:
        "left"
        "primary"
        "secondary";
    }
    .toolbar-row-primary, .toolbar-row-secondary{ justify-content:flex-start; }
    .topbar-left{ flex-wrap:wrap; }
    .shell{ grid-template-columns:1fr; }
    .sidebar{ border-left:0; border-top:1px solid var(--line); max-height:42vh; }
    .shell.detail-collapsed .sidebar{ max-height:0; padding-top:0; padding-bottom:0; border-top-color:transparent; }
    .detail-panel-resizer{ display:none; }
    .detail-panel-toggle{
      right:16px; top:auto; bottom:16px; transform:none;
      border-right:1px solid var(--cyan); border-radius:999px; width:34px; height:28px;
    }
    .shell.detail-collapsed .detail-panel-toggle{ right:16px; }
    .summary{ left:16px; right:auto; top:auto; bottom:64px; justify-content:flex-start; }
    .workflow-banner{ position:absolute; left:16px; top:16px; max-width:calc(100% - 32px); }
  }

  .side-pane-layout{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .side-section{
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    padding:10px;
    background:rgba(15,17,22,.14);
  }
  .side-section-title{
    margin:0 2px 9px;
    color:var(--cyan);
    font-size:11px;
    font-weight:700;
    letter-spacing:.10em;
    text-transform:uppercase;
  }
  .side-section-detail{ border-color:rgba(0,229,204,.18); }
  .side-section-project{ border-color:rgba(129,151,179,.18); }
  .side-section-actions{ border-color:rgba(240,165,0,.22); }
  .side-section .card:last-child{ margin-bottom:0; }
  .action-card .btn + .btn{ margin-top:8px; }
  .action-card .primary-action{
    background:rgba(0,229,204,.14);
    box-shadow:0 0 0 1px rgba(0,229,204,.18) inset;
  }

  .relation-candidate-card .relation-entity-list{ margin-top:8px; display:grid; gap:4px; }
  .relation-candidate-card .tag-line{ background:rgba(0,229,204,.035); }
  .relation-evidence-list{ margin-top:10px; display:grid; gap:8px; }
  .relation-evidence-item{ border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:rgba(255,255,255,.035); }
  .relation-evidence-context{ margin-top:4px; color:var(--muted); font-size:12px; line-height:1.45; }

  /* Phase6C-1: user-facing AI relation summary */
  .relation-candidate-card-compact{ border-color:rgba(240,165,0,.30); background:rgba(240,165,0,.045); }
  .relation-ai-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .relation-ai-badge{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; border:1px solid rgba(240,165,0,.45); color:#fde68a; background:rgba(240,165,0,.12); font-size:11px; font-weight:700; letter-spacing:.03em; }
  .relation-ai-score{ color:var(--text); font-size:12px; font-weight:700; }
  .relation-ai-title{ color:var(--text); font-size:14px; font-weight:800; margin-bottom:7px; }
  .relation-ai-reason{ color:var(--text); font-size:13px; line-height:1.65; margin-bottom:7px; }
  .relation-ai-meta{ color:var(--muted); font-size:11px; line-height:1.55; margin-bottom:8px; }
  .relation-ai-status-note{ color:var(--muted); font-size:11px; line-height:1.55; margin-bottom:7px; }
  .relation-candidate-card-compact.relation-status-accepted{ border-color:rgba(0,229,204,.38); background:rgba(0,229,204,.055); }
  .relation-candidate-card-compact.relation-status-accepted .relation-ai-badge{ border-color:rgba(0,229,204,.45); color:var(--cyan); background:rgba(0,229,204,.10); }
  .relation-review-btn{ border-color:rgba(0,229,204,.28); }
  .relation-review-accept{ background:rgba(0,229,204,.13); box-shadow:0 0 0 1px rgba(0,229,204,.16) inset; }
  .relation-review-reject{ border-color:rgba(255,255,255,.18); color:var(--muted); background:rgba(255,255,255,.035); }
  .relation-review-reject:hover{ color:var(--text); border-color:rgba(255,255,255,.30); }
  .relation-review-note{ margin:8px 0 10px; }
  .relation-match-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
  .relation-match-chip{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,229,204,.25); background:rgba(0,229,204,.08); color:var(--text); font-size:11px; }
  .relation-match-chip b{ color:var(--cyan); font-weight:700; }
  .relation-evidence-summary-details{ margin-top:8px; border:1px solid rgba(0,229,204,.14); border-radius:12px; background:rgba(0,0,0,.10); overflow:hidden; }
  .relation-evidence-summary-details summary{ cursor:pointer; color:var(--cyan); font-size:12px; font-weight:800; padding:8px 10px; user-select:none; }
  .relation-evidence-summary-details summary:hover{ background:rgba(0,229,204,.045); }
  .relation-evidence-summary-details[open] summary{ border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,229,204,.035); }
  .relation-evidence-compact{ display:grid; gap:8px; margin-top:0; padding:8px 10px 10px; }
  .relation-evidence-pair{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 10px; background:rgba(0,0,0,.12); }
  .relation-evidence-pair-title{ color:var(--cyan); font-size:12px; font-weight:800; margin-bottom:6px; }
  .relation-side-context{ display:grid; grid-template-columns:52px 1fr; gap:8px; align-items:start; margin:5px 0; }
  .relation-side-context b{ color:var(--muted); font-size:11px; font-weight:700; }
  .relation-side-context span{ color:var(--text); font-size:12px; line-height:1.5; }
  .relation-debug-details{ margin-top:10px; border-top:1px solid rgba(255,255,255,.08); padding-top:8px; }
  .relation-debug-details summary{ cursor:pointer; color:var(--muted); font-size:12px; user-select:none; }
  .relation-debug-details[open] summary{ color:var(--cyan); margin-bottom:8px; }
  .relation-debug-body{ display:grid; gap:8px; }
  .relation-debug-muted{ color:var(--muted); font-size:11px; line-height:1.5; }

  .viz-map-busy-overlay{
    position:fixed; inset:0; z-index:9000;
    display:none; align-items:center; justify-content:center;
    background:rgba(4,8,14,.58); backdrop-filter:blur(3px);
    pointer-events:auto;
  }
  .viz-map-busy-overlay.active{ display:flex; }
  .viz-map-busy-card{
    width:min(560px, calc(100vw - 48px));
    display:flex; align-items:flex-start; gap:18px;
    padding:24px 26px;
    border:1px solid rgba(0,229,204,.48);
    border-radius:20px;
    background:linear-gradient(180deg, rgba(45,49,57,.98), rgba(27,30,37,.98));
    box-shadow:0 20px 60px rgba(0,0,0,.50), 0 0 30px rgba(0,229,204,.12);
    color:var(--text);
  }
  .viz-map-busy-spinner{
    width:36px; height:36px; flex:0 0 auto; margin-top:2px;
    border-radius:999px;
    border:3px solid rgba(0,229,204,.16);
    border-top-color:var(--cyan);
    animation:vizMapBusySpin .85s linear infinite;
  }
  .viz-map-busy-title{ color:var(--cyan); font-weight:700; font-size:17px; letter-spacing:.04em; margin-bottom:8px; }
  .viz-map-busy-text{ color:#c8d4df; font-size:13px; line-height:1.7; }
  .viz-map-busy-steps{
    margin-top:14px; padding-top:12px;
    border-top:1px solid rgba(154,163,178,.26);
    color:#aab8c6; font-size:12px; line-height:1.75; white-space:pre-line;
  }
  body.viz-map-busy{ cursor:progress; }
  @keyframes vizMapBusySpin{ to{ transform:rotate(360deg); } }

/* AnnoLink AI link thin visual v14c begin */
/* AIリンクは「推薦線」なので、明示リンクより控えめに表示する。紫は使わない。 */
:root {
  --annolink-ai-link-thin: #ff756f;
}

svg .link.relation-candidate,
.link.relation-candidate {
  stroke: var(--annolink-ai-link-thin) !important;
  stroke-opacity: .32 !important;
  stroke-width: 1.25px !important;
  filter: none !important;
}

svg .link.relation-candidate.ai-priority-very-high,
svg .link.relation-candidate.ai-priority-high,
svg .link.relation-candidate.ai-decision-confirm-required,
svg .link.relation-candidate.ai-decision-confirm-recommended,
.link.relation-candidate.ai-priority-very-high,
.link.relation-candidate.ai-priority-high,
.link.relation-candidate.ai-decision-confirm-required,
.link.relation-candidate.ai-decision-confirm-recommended {
  stroke: var(--annolink-ai-link-thin) !important;
  stroke-opacity: .45 !important;
  stroke-width: 1.65px !important;
  filter: none !important;
}

svg .link.relation-candidate.ai-priority-medium,
svg .link.relation-candidate.ai-decision-useful-comparison,
svg .link.relation-candidate.ai-decision-basis-result-relation,
svg .link.relation-candidate.ai-decision-role-complement-relation,
svg .link.relation-candidate.ai-decision-target-context-relation,
.link.relation-candidate.ai-priority-medium,
.link.relation-candidate.ai-decision-useful-comparison,
.link.relation-candidate.ai-decision-basis-result-relation,
.link.relation-candidate.ai-decision-role-complement-relation,
.link.relation-candidate.ai-decision-target-context-relation {
  stroke: var(--annolink-ai-link-thin) !important;
  stroke-opacity: .28 !important;
  stroke-width: 1.15px !important;
  filter: none !important;
}

svg .link.relation-candidate.ai-priority-low,
svg .link.relation-candidate.ai-decision-same-case-reference,
svg .link.relation-candidate.ai-decision-weak-attribute,
.link.relation-candidate.ai-priority-low,
.link.relation-candidate.ai-decision-same-case-reference,
.link.relation-candidate.ai-decision-weak-attribute {
  stroke: var(--annolink-ai-link-thin) !important;
  stroke-opacity: .18 !important;
  stroke-width: 1px !important;
  stroke-dasharray: 5 5 !important;
  filter: none !important;
}

/* AIリンクラベルも控えめにする */
svg text.link-label.relation-candidate,
.link-label.relation-candidate {
  opacity: .68 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  fill: rgba(245, 248, 255, .78) !important;
  stroke: rgba(0, 0, 0, .78) !important;
  stroke-width: 2.4px !important;
  paint-order: stroke fill !important;
}

/* 低優先AIリンクのラベルは出しすぎない */
svg text.link-label.relation-candidate.ai-priority-low,
.link-label.relation-candidate.ai-priority-low {
  opacity: .38 !important;
}
/* AnnoLink AI link thin visual v14c end */

/* AnnoLink AI link 4-stage visual v15 begin */
/*
  AI繝ｪ繝ｳ繧ｯ縺ｯ縲梧枚閼井ｸ翫・謗ｨ阮ｦ邱壹€阪€り牡縺ｯ襍､邉ｻ縺ｫ邨ｱ荳€縺励€√Λ繝吶Ν縺ｯ蜃ｺ縺輔↑縺・€・  4谿ｵ髫弱□縺代↓謨ｴ逅・☆繧九€・    1. 螟ｪ縺・・豼・＞   = 蠢・★隕九ｋ蛟呵｣・    2. 邏ｰ縺・・豼・＞   = 遒ｺ隱肴耳螂ｨ
    3. 邏ｰ縺・・阮・＞   = 陬懷勧蛟呵｣・    4. 轤ｹ邱壹・阮・＞   = 蜿り€・Ξ繝吶Ν
*/
:root {
  --annolink-ai-link-v15: #ff756f;
}

/* default: 陬懷勧蛟呵｣・= 邏ｰ縺・・阮・＞ */
svg .link.relation-candidate,
.link.relation-candidate {
  stroke: var(--annolink-ai-link-v15) !important;
  stroke-opacity: .22 !important;
  stroke-width: 1.0px !important;
  stroke-dasharray: none !important;
  filter: none !important;
}

/* 1. 螟ｪ縺・・豼・＞ = 蠢・★隕九ｋ蛟呵｣・*/
svg .link.relation-candidate.ai-priority-very-high,
svg .link.relation-candidate.ai-decision-required,
svg .link.relation-candidate.ai-decision-confirm-required,
svg .link.relation-candidate.ai-decision-direct-document-reference,
.link.relation-candidate.ai-priority-very-high,
.link.relation-candidate.ai-decision-required,
.link.relation-candidate.ai-decision-confirm-required,
.link.relation-candidate.ai-decision-direct-document-reference {
  stroke: var(--annolink-ai-link-v15) !important;
  stroke-opacity: .58 !important;
  stroke-width: 2.0px !important;
  stroke-dasharray: none !important;
  filter: none !important;
}

/* 2. 邏ｰ縺・・豼・＞ = 遒ｺ隱肴耳螂ｨ */
svg .link.relation-candidate.ai-priority-high,
svg .link.relation-candidate.ai-decision-recommended,
svg .link.relation-candidate.ai-decision-confirm-recommended,
svg .link.relation-candidate.ai-decision-basis-result-relation,
svg .link.relation-candidate.ai-decision-role-complement-relation,
svg .link.relation-candidate.ai-decision-target-context-relation,
.link.relation-candidate.ai-priority-high,
.link.relation-candidate.ai-decision-recommended,
.link.relation-candidate.ai-decision-confirm-recommended,
.link.relation-candidate.ai-decision-basis-result-relation,
.link.relation-candidate.ai-decision-role-complement-relation,
.link.relation-candidate.ai-decision-target-context-relation {
  stroke: var(--annolink-ai-link-v15) !important;
  stroke-opacity: .45 !important;
  stroke-width: 1.2px !important;
  stroke-dasharray: none !important;
  filter: none !important;
}

/* 3. 邏ｰ縺・・阮・＞ = 陬懷勧蛟呵｣・*/
svg .link.relation-candidate.ai-priority-medium,
svg .link.relation-candidate.ai-decision-useful-comparison,
svg .link.relation-candidate.ai-decision-similar-case,
svg .link.relation-candidate.ai-decision-same-case-reference,
.link.relation-candidate.ai-priority-medium,
.link.relation-candidate.ai-decision-useful-comparison,
.link.relation-candidate.ai-decision-similar-case,
.link.relation-candidate.ai-decision-same-case-reference {
  stroke: var(--annolink-ai-link-v15) !important;
  stroke-opacity: .22 !important;
  stroke-width: 1.0px !important;
  stroke-dasharray: none !important;
  filter: none !important;
}

/* 4. 轤ｹ邱壹・阮・＞ = 蜿り€・Ξ繝吶Ν */
svg .link.relation-candidate.ai-priority-low,
svg .link.relation-candidate.ai-priority-weak,
svg .link.relation-candidate.ai-judge-missing,
svg .link.relation-candidate.ai-decision-weak-attribute,
svg .link.relation-candidate.ai-decision-weak-common-attribute,
svg .link.relation-candidate.weak-common-attribute,
.link.relation-candidate.ai-priority-low,
.link.relation-candidate.ai-priority-weak,
.link.relation-candidate.ai-judge-missing,
.link.relation-candidate.ai-decision-weak-attribute,
.link.relation-candidate.ai-decision-weak-common-attribute,
.link.relation-candidate.weak-common-attribute {
  stroke: var(--annolink-ai-link-v15) !important;
  stroke-opacity: .14 !important;
  stroke-width: .85px !important;
  stroke-dasharray: 5 7 !important;
  filter: none !important;
}

/* AI繝ｪ繝ｳ繧ｯ縺ｮ繝ｩ繝吶Ν縺ｯ諠・ｱ驕主､壹↓縺ｪ繧九◆繧∬｡ｨ遉ｺ縺励↑縺・€・*/
svg text.link-label.relation-candidate,
svg text.link-label[class*="ai-decision-"],
svg text.link-label[class*="ai-priority-"],
.link-label.relation-candidate,
.link-label[class*="ai-decision-"],
.link-label[class*="ai-priority-"] {
  display: none !important;
}
/* AnnoLink AI link 4-stage visual v15 end */

/* AnnoLink AI link same width as attribute v15c begin */
/*
  AI relation links use the same stroke width as attribute links.
  This block changes width only. Opacity and dashed/solid stage rules remain active.
*/
:root {
  --annolink-ai-link-width-v15c: 2px;
}

svg .link.relation-candidate,
.link.relation-candidate,
svg .link.relation-candidate.ai-priority-very-high,
svg .link.relation-candidate.ai-priority-high,
svg .link.relation-candidate.ai-priority-medium,
svg .link.relation-candidate.ai-priority-low,
svg .link.relation-candidate.ai-decision-confirm-required,
svg .link.relation-candidate.ai-decision-confirm-recommended,
svg .link.relation-candidate.ai-decision-useful-comparison,
svg .link.relation-candidate.ai-decision-basis-result-relation,
svg .link.relation-candidate.ai-decision-role-complement-relation,
svg .link.relation-candidate.ai-decision-target-context-relation,
svg .link.relation-candidate.ai-decision-same-case-reference,
svg .link.relation-candidate.ai-decision-weak-attribute,
.link.relation-candidate.ai-priority-very-high,
.link.relation-candidate.ai-priority-high,
.link.relation-candidate.ai-priority-medium,
.link.relation-candidate.ai-priority-low,
.link.relation-candidate.ai-decision-confirm-required,
.link.relation-candidate.ai-decision-confirm-recommended,
.link.relation-candidate.ai-decision-useful-comparison,
.link.relation-candidate.ai-decision-basis-result-relation,
.link.relation-candidate.ai-decision-role-complement-relation,
.link.relation-candidate.ai-decision-target-context-relation,
.link.relation-candidate.ai-decision-same-case-reference,
.link.relation-candidate.ai-decision-weak-attribute {
  stroke-width: var(--annolink-ai-link-width-v15c) !important;
}
/* AnnoLink AI link same width as attribute v15c end */