:root{
            --paper:#fffdf8;
            --ink:#27324a;
            --muted:#68748f;
            --line:#e7dfd2;
            --novel:#28666e;
            --author:#bc6c25;
            --work:#6b4eff;
            --creator:#0a8754;
            --warn:#b15f00;
        }
        body{
            color:var(--ink);
            background:
                linear-gradient(90deg,rgba(39,50,74,.045) 1px,transparent 1px),
                linear-gradient(rgba(39,50,74,.045) 1px,transparent 1px),
                radial-gradient(circle at 86% 10%,rgba(107,78,255,.12),transparent 28%),
                radial-gradient(circle at 12% 88%,rgba(10,135,84,.12),transparent 26%),
                var(--paper);
            background-size:28px 28px,28px 28px,auto,auto,auto;
        }
        .relation-shell{max-width:1200px;margin:0 auto;padding:12px 14px 30px}
        .relation-hero{
            display:grid;
            grid-template-columns:minmax(0,1fr) auto;
            gap:18px;
            align-items:end;
            padding:22px;
            border:1px solid var(--line);
            border-radius:8px;
            background:rgba(255,255,255,.82);
            box-shadow:0 18px 42px rgba(39,50,74,.1);
        }
        .relation-hero h1{margin:0 0 8px;font-size:34px;line-height:1.2;letter-spacing:0;color:var(--ink)}
        .relation-hero p{margin:0;color:var(--muted);line-height:1.72;max-width:760px}
        .stats{display:grid;grid-template-columns:repeat(4,86px);gap:8px}
        .stat{padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:center}
        .stat strong{display:block;font-size:24px;line-height:1.1}
        .stat span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
        .toolbar{display:flex;gap:8px;align-items:center;margin-top:12px}
        .toolbar input,.toolbar select{
            min-height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:8px 11px;
        }
        .toolbar input{flex:1}
        .layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;margin-top:12px}
        .side,.board,.panel{
            border:1px solid var(--line);
            border-radius:8px;
            background:rgba(255,255,255,.86);
            box-shadow:0 10px 28px rgba(39,50,74,.08);
        }
        .side{
            padding:10px;
            align-self:start;
            position:sticky;
            top:92px;
            max-height:calc(100vh - 108px);
            overflow:auto;
            scrollbar-gutter:stable;
        }
        .side h2,.panel h2{margin:0 0 8px;font-size:16px;color:var(--ink)}
        .novel-list{display:grid;gap:6px}
        .novel-button{
            width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
            padding:9px 10px;font-size:14px;line-height:1.35;cursor:pointer;
        }
        .novel-button.active{border-color:var(--novel);box-shadow:inset 4px 0 0 var(--novel);font-weight:800}
        .board{padding:12px;min-height:520px}
        .relation-detail{min-width:0;align-self:start;position:sticky;top:92px}
        .relation-detail-scroll{
            max-height:calc(100vh - 108px);
            overflow:auto;
            padding-right:2px;
            scrollbar-gutter:stable;
        }
        .relation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
        .lane-title{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:800}
        .node{position:relative;border:1px solid var(--line);border-radius:8px;background:#fff;padding:11px;min-height:120px}
        .node::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:8px 0 0 8px;background:var(--line)}
        .node.novel::before{background:var(--novel)}
        .node.author::before{background:var(--author)}
        .node.work::before{background:var(--work)}
        .node.creator::before{background:var(--creator)}
        .node h3{margin:0 0 6px;font-size:17px;line-height:1.35;color:var(--ink)}
        .node p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
        .pill-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
        .pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fffaf2;color:#5c657d;padding:3px 8px;font-size:12px;line-height:1.35}
        .pill.ok{color:#0a8754;background:#f1fff7;border-color:#c7ead8}
        .pill.wait{color:var(--warn);background:#fff7e8;border-color:#f2d3a8}
        .link-list{display:grid;gap:5px;margin-top:8px}
        .link-list a{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fbfcff;color:#315fbb;text-decoration:none;font-size:12px;line-height:1.4}
        .node-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
        .node-actions a,.node-actions span{
            display:inline-flex;align-items:center;justify-content:center;
            min-height:28px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;
            background:#fbfcff;color:#315fbb;text-decoration:none;font-size:12px;font-weight:800;line-height:1.35;
        }
        .node-actions span{color:var(--muted);background:#fffaf2;font-weight:700}
        .work-stack,.creator-stack{display:grid;gap:8px}
        .query-list{margin:8px 0 0;padding-left:17px;color:var(--muted);font-size:12px;line-height:1.55}
        .panel{margin-top:12px;padding:12px}
        .edge-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
        .edge{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);font-size:12px;line-height:1.4}
        .source-tip{margin-top:10px;color:var(--muted);font-size:12px}
        #friend-links{margin-top:14px;border-radius:8px;border:1px solid var(--line);background:#ffffffd8;padding:12px}
        #friend-links h3{margin:0 0 8px;font-size:16px}
        @media(max-width:960px){
            .relation-hero{grid-template-columns:1fr}.stats{grid-template-columns:repeat(4,1fr)}
            .layout{grid-template-columns:1fr}.side,.relation-detail{position:static;max-height:none;overflow:visible}
            .relation-detail-scroll{max-height:none;overflow:visible;padding-right:0}
            .relation-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:620px){
            .relation-hero{padding:16px}.relation-hero h1{font-size:26px}
            .stats,.relation-grid,.edge-list{grid-template-columns:1fr}
            .toolbar{flex-direction:column;align-items:stretch}
        }