:root { --navy:#10253f; --navy2:#173858; --blue:#176b87; --cyan:#38a9bb; --canvas:#f3f7f8; --surface:#fff; --line:#dfe7eb; --muted:#6b7d8b; --ink:#172535; --green:#3e9071; --orange:#d47a37; --red:#c94e44; --shadow:0 18px 45px rgba(25,46,67,.09); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid rgba(56,169,187,.28); outline-offset:2px; } svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .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;}
.topbar { height:76px; padding:0 clamp(20px,5vw,72px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; } .brand-mark { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--navy);color:white;font-size:25px;font-weight:800;letter-spacing:-.07em; } .brand strong{display:block;color:var(--navy);font-size:18px;line-height:1.05;letter-spacing:-.03em}.brand small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.header-context{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:#49a37e;box-shadow:0 0 0 4px rgba(73,163,126,.12)}
main { width:min(1440px,calc(100% - clamp(28px,8vw,112px))); margin:0 auto; padding:42px 0 38px; }.hero{display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow{display:block;margin-bottom:9px;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.hero h1{margin:0;color:var(--navy);font-size:clamp(30px,3.3vw,44px);line-height:1;letter-spacing:-.05em}.hero p{max-width:610px;margin:11px 0 0;color:var(--muted);font-size:14px;line-height:1.5}.hero-actions{display:flex;gap:9px}.ghost-button,.primary-button{height:42px;padding:0 15px;border-radius:10px;font-size:12px;font-weight:750}.ghost-button{border:1px solid var(--line);background:white;color:var(--navy)}.primary-button{border:1px solid var(--navy);background:var(--navy);color:white}.ghost-button:hover{background:#f8fbfb}.primary-button:hover{background:var(--navy2)}
.graph-workspace{min-height:635px;margin-top:28px;display:grid;grid-template-columns:220px minmax(420px,1fr) 280px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.context-panel,.inspector-panel{padding:24px 20px}.context-panel{border-right:1px solid var(--line)}.inspector-panel{border-left:1px solid var(--line);background:#fbfcfc}.panel-title h2{margin:0;color:var(--navy);font-size:18px;letter-spacing:-.035em}.context-card{margin-top:20px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f9fbfb}.type-pill{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.type-pill.location{background:#e7eef7;color:#255377}.context-card strong{display:block;margin-top:10px;color:var(--navy);font-size:13px;line-height:1.3}.context-card small{display:block;margin-top:7px;color:var(--muted);font-size:10px;line-height:1.4}.view-switcher{margin-top:19px;padding:4px;display:grid;grid-template-columns:1fr 1fr;border-radius:10px;background:#eef3f5}.view-tab{min-height:31px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:10px;font-weight:750}.view-tab.active{background:white;color:var(--navy);box-shadow:0 2px 8px rgba(20,44,62,.07)}.search-field{height:40px;margin-top:15px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;background:#fbfcfc;color:#8b9ca5}.search-field svg{width:16px;height:16px}.search-field input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:11px}.legend{margin-top:24px;display:grid;gap:11px;color:var(--muted);font-size:10px}.legend-title{color:var(--navy);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.legend span:not(.legend-title){display:flex;align-items:center;gap:9px}.legend-shape{width:12px;height:12px;display:inline-block;background:#38a9bb}.legend-shape.location{border-radius:4px;background:var(--navy)}.legend-shape.installation{clip-path:polygon(50% 0,100% 27%,88% 85%,12% 85%,0 27%);background:var(--cyan)}.legend-shape.equipment{border-radius:50%;background:var(--green)}.legend-line{width:17px;height:2px;display:inline-block;background:#9cafb8}.tip-card{margin-top:24px;padding:11px;display:flex;gap:8px;border-radius:10px;background:#eef8f7;color:#2e7266;font-size:10px;line-height:1.4}.tip-card svg{flex:0 0 auto;width:15px;height:15px}
.graph-panel{position:relative;min-width:0;background:radial-gradient(circle at 48% 45%,#fff 0%,#fbfdfd 60%,#f4f8f8 100%)}.graph-toolbar{height:65px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.graph-toolbar strong,.graph-toolbar small{display:block}.graph-toolbar strong{color:var(--navy);font-size:13px}.graph-toolbar small{margin-top:3px;color:var(--muted);font-size:10px}.graph-count{padding:5px 8px;border-radius:999px;background:#eaf4f4;color:#28756c;font-size:10px;font-weight:750}.graph-panel #graphCanvas{position:absolute;inset:65px 0 30px}.graph-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#8c9da6;font-size:9px}.cy-node-label{font-size:11px}
.inspector-empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:11px;line-height:1.5}.inspector-empty svg{width:34px;height:34px;margin-bottom:11px;color:#9db0ba}.inspector-empty strong{display:block;color:var(--navy);font-size:13px}.inspector-empty p{max-width:180px;margin:6px auto 0}.inspector-header{padding-bottom:18px;border-bottom:1px solid var(--line)}.inspector-header .type-pill{margin-bottom:11px}.inspector-header h2{margin:0;color:var(--navy);font-size:20px;line-height:1.12;letter-spacing:-.04em}.inspector-header p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.45}.inspector-fields{margin-top:18px;display:grid;gap:13px}.inspector-field span{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.inspector-field strong{display:block;margin-top:4px;color:var(--navy);font-size:12px}.relation-list{margin-top:20px}.relation-list h3{margin:0;color:var(--navy);font-size:11px}.relation-list ul{margin:10px 0 0;padding:0;display:grid;gap:7px;list-style:none}.relation-list li{padding:8px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--muted);font-size:10px}.relation-list b{color:var(--blue)}.inspector-action{width:100%;height:39px;margin-top:20px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--navy);font-size:11px;font-weight:750}.inspector-action:hover{background:#f4f9f9}
.summary-strip{margin-top:17px;padding:16px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.7)}.summary-strip>div{display:flex;align-items:center;gap:10px}.summary-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:18px;font-weight:700}.summary-icon.blue{background:#e9eff7;color:#2b5d84}.summary-icon.teal{background:#e5f4f2;color:#23786c}.summary-icon.orange{background:#fff0e5;color:#ab632b}.summary-strip strong,.summary-strip small{display:block}.summary-strip strong{color:var(--navy);font-size:12px}.summary-strip small{margin-top:3px;color:var(--muted);font-size:10px}.toast-region{position:fixed;right:18px;bottom:18px;z-index:20}.toast{padding:12px 15px;border-radius:10px;background:var(--navy);color:white;box-shadow:0 15px 30px rgba(16,37,63,.2);font-size:11px;animation:in .2s ease both}@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.graph-workspace{grid-template-columns:200px minmax(360px,1fr)}.inspector-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);min-height:260px}.inspector-empty{min-height:180px}.inspector-fields{grid-template-columns:repeat(3,1fr)}.relation-list{margin-top:15px}.inspector-action{max-width:250px}}
@media(max-width:700px){.topbar{height:66px;padding:0 16px}.brand small,.header-context{display:none}main{width:calc(100% - 24px);padding:24px 0}.hero{display:block}.hero h1{font-size:31px}.hero p{font-size:12px}.hero-actions{margin-top:18px}.hero-actions button{flex:1}.graph-workspace{display:flex;flex-direction:column;min-height:0;margin-top:20px;border-radius:15px}.context-panel{border-right:0;border-bottom:1px solid var(--line);padding:18px 16px}.panel-title h2{font-size:17px}.context-card{margin-top:13px}.view-switcher{margin-top:13px}.legend,.tip-card{display:none}.graph-panel{height:480px;order:2}.graph-toolbar{padding:0 16px}.graph-panel #graphCanvas{inset:65px 0 28px}.inspector-panel{order:3;border-top:1px solid var(--line);padding:19px 16px;min-height:280px}.inspector-fields{grid-template-columns:repeat(2,1fr)}.summary-strip{grid-template-columns:1fr;gap:11px;padding:14px 16px}}