:root{--bg: #f6f8fb;--panel: #ffffff;--border: #e2e8f0;--text: #1f2937;--muted: #64748b;--accent: #2563eb;--danger: #b91c1c;--danger-bg: #fef2f2;--warn: #92400e;--warn-bg: #fffbeb;--ok: #15803d;--ok-bg: #f0fdf4}*{box-sizing:border-box}body{margin:0;font-family:system-ui,Malgun Gothic,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}a{color:var(--accent)}.layout{display:flex;min-height:100vh}.sidebar{width:220px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);padding:20px 0;display:flex;flex-direction:column}.sidebar h1{font-size:15px;margin:0 20px 20px}.sidebar nav a{display:block;padding:9px 20px;color:var(--text);text-decoration:none;border-left:3px solid transparent}.sidebar nav a:hover{background:#f8fafc}.sidebar nav a.active{border-left-color:var(--accent);background:#eff6ff;color:var(--accent);font-weight:600}.sidebar .foot{margin-top:auto;padding:16px 20px 0;border-top:1px solid var(--border)}.main{flex:1;padding:24px 32px;max-width:1400px}.main h2{margin:0 0 4px;font-size:20px}.main .sub{color:var(--muted);margin:0 0 20px}.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin-bottom:16px}.card h3{margin:0 0 12px;font-size:15px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.grow{flex:1;min-width:200px}button,.btn{padding:8px 14px;border-radius:7px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:14px;font-family:inherit}button:hover:not(:disabled){background:#f8fafc}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover:not(:disabled){background:#1d4ed8}button.danger{color:var(--danger);border-color:#fecaca}button.accent-outline{color:#2563eb;border-color:#2563eb}button.accent-outline:hover:not(:disabled){background:#eff6ff}input,select,textarea{padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-family:inherit;font-size:14px;background:#fff;color:var(--text)}textarea{width:100%;resize:vertical}label{display:block;font-weight:600;margin-bottom:4px;font-size:13px}.field{margin-bottom:12px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--border);vertical-align:top}th{background:#f8fafc;font-weight:600;position:sticky;top:0}tr.disabled td{color:#9aa3af}tr.deny td{background:#fef2f2}.scroll{max-height:60vh;overflow:auto;border:1px solid var(--border);border-radius:8px}.badge{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;border:1px solid var(--border);background:#f1f5f9}.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#bbf7d0}.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#fde68a}.badge.err{background:var(--danger-bg);color:var(--danger);border-color:#fecaca}.alert{padding:10px 14px;border-radius:8px;margin-bottom:12px;border:1px solid}.alert.err{background:var(--danger-bg);color:var(--danger);border-color:#fecaca}.alert.warn{background:var(--warn-bg);color:var(--warn);border-color:#fde68a}.alert.ok{background:var(--ok-bg);color:var(--ok);border-color:#bbf7d0}.alert.info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}.alert ul{margin:6px 0 0;padding-left:20px}code,pre{font-family:Cascadia Code,Consolas,monospace;font-size:12.5px}pre.diff{background:#0f172a;color:#e2e8f0;padding:14px;border-radius:8px;overflow-x:auto;max-height:420px;overflow-y:auto}pre.diff .add{color:#4ade80}pre.diff .del{color:#f87171}pre.diff .hdr{color:#94a3b8}.chip{display:inline-block;background:#eef3fb;border:1px solid #c9d6ea;border-radius:12px;padding:1px 9px;margin:2px 3px 2px 0;font-size:12px;cursor:help}.chip.warn{background:var(--danger-bg);border-color:#fecaca}.muted{color:var(--muted);font-size:13px}.center{display:grid;place-items:center;min-height:100vh}.spinner{color:var(--muted);padding:40px;text-align:center}.pill-list{display:flex;flex-wrap:wrap;gap:4px}.hchip{position:relative;display:inline-block;padding:1px 8px;margin:2px 3px 2px 0;border:1px solid #d4def0;border-radius:11px;background:#f4f7fc;font-size:12px;cursor:help;white-space:nowrap}.hchip:hover{background:#e4edfb;border-color:#a9c4ea}.hchip-wan{background:#fff1e6;border-color:#f3c9a5}.hchip-lan{background:#e9f7ee;border-color:#a9dcbc}.hchip-dmz{background:#fdf3d6;border-color:#ecd08a}.hchip-tunnel{background:#eee9fb;border-color:#c3b3ec}.hchip-group{background:#eaf1fd;border-color:#b3caf0;font-weight:600}.hchip-warn{background:#fdeaea;border-color:#f0b4b4}.hchip-kind{margin-left:5px;color:#7b8798;font-size:11px}.hcard{position:absolute;z-index:40;top:100%;left:0;margin-top:4px;min-width:260px;max-width:460px;padding:9px 11px;background:#fff;border:1px solid #cdd8e8;border-radius:8px;box-shadow:0 6px 20px #14285029;white-space:normal;cursor:default;display:block;text-align:left}.hcard-title{display:block;font-weight:700;font-size:13px;border-bottom:1px solid #eef2f8;padding-bottom:4px;margin-bottom:5px}.hcard-row{display:flex;gap:8px;margin:2px 0;font-size:12px}.hcard-k{color:#7b8798;min-width:84px;flex-shrink:0}.hcard-v{word-break:break-all}.hcard-members{display:block;max-height:220px;overflow-y:auto;margin-top:3px}.hcard-member{display:block;font-size:12px;padding:1px 0;color:#334}.arrow{margin:0 6px;color:#8a97a8;font-weight:700}.pathcell{display:flex;align-items:center;gap:2px}.pathside{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}.pathcell .hchip{margin:0}.pathcell .arrow{margin:0 4px;flex-shrink:0}.dir{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;background:#eef2f7;color:#4a5768;border:1px solid #d6dfeb;white-space:nowrap;cursor:help}.dir-in{background:#fdeaea;color:#a12a2a;border-color:#f0b4b4}.dir-out{background:#e9f7ee;color:#1f7a45;border-color:#a9dcbc}.dir-vpn{background:#eee9fb;color:#513a9c;border-color:#c3b3ec}.dirwrap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}.dirpath{font-size:11.5px;color:#64748b;cursor:help;max-width:170px;line-height:1.45}.explain{background:#f7faff;border:1px solid #dbe6f5;border-radius:8px;padding:12px 14px;margin-bottom:14px}.explain-summary{margin:0;font-size:15px;line-height:1.65}.explain-purpose,.explain-path{margin:8px 0 0;font-size:13px;color:#445}.explain-path b{margin-right:8px}.explain-notes{margin:8px 0 0;padding-left:18px}.explain-notes li{font-size:13px;color:#8a4b12;line-height:1.6}.hcard-assets{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed #dde5f0}.hcard-asset{display:block;margin-bottom:5px}.hcard-asset-head{display:block;font-size:12px;font-weight:600;color:#1f4e79}.hcard-asset-head em{font-style:normal;font-weight:400;color:#7b8798}.hcard-asset-line{display:block;font-size:11.5px;color:#55637a;padding-left:15px}.hcard-asset-src{display:block;font-size:10.5px;color:#9aa5b4;margin-top:3px}.hcard-member-asset{color:#1f4e79;font-style:normal;font-size:11px}.site-chip{display:inline-block;padding:3px 11px;margin:3px 4px 3px 0;border-radius:13px;border:1px solid #d4def0;background:#f4f7fc;font-size:13px;cursor:pointer;white-space:nowrap}.site-chip:hover{filter:brightness(.96)}.site-chip.on{outline:2px solid #3b82f6;font-weight:600}.site-chip em{font-style:normal;margin-left:6px;color:#7b8798;font-size:11.5px}.site-office{background:#e9f7ee;border-color:#a9dcbc}.site-datacenter{background:#e6f0fb;border-color:#a8c8ea}.site-external{background:#fdeaea;border-color:#f0b4b4}.site-remote{background:#eee9fb;border-color:#c3b3ec}.site-guest{background:#fdf3d6;border-color:#ecd08a}.site-vpn{background:#f0eafc;border-color:#cbb8ef}.site-detail{margin-top:12px;padding:14px 16px;background:#f7faff;border:1px solid #dbe6f5;border-radius:8px}.site-detail h4{margin:0 0 8px;font-size:15px}.site-desc{margin:0 0 8px;font-size:14px;line-height:1.65}.site-more{margin:0;font-size:13px;color:#4a5768;line-height:1.7}.site-notes,.site-ifs{margin-top:12px;padding-top:10px;border-top:1px solid #e4ecf7}.site-notes b,.site-ifs b{display:block;font-size:12px;color:#64748b;margin-bottom:5px}.site-notes p,.site-ifs p{margin:4px 0;font-size:13px;line-height:1.6}.picker label{display:block}.picker-hint{font-weight:400;color:#64748b;font-size:12px;margin-left:8px}.picker-selected{min-height:30px;padding:5px 7px;margin:5px 0 6px;background:#f8fafc;border:1px dashed #d6dfeb;border-radius:7px}.picked{display:inline-block;cursor:pointer;margin-right:2px}.picked:hover{opacity:.65}.picker-changed{border-color:#93b4de;border-style:solid;background:#f4f9ff}.picked-mark{font-weight:700;margin-right:2px}.picked-added .picked-mark{color:#15803d}.picked-added .hchip{border-color:#86c9a2;background:#eaf9f0}.picked-removed{display:inline-flex;align-items:center;gap:4px;margin:2px 3px 2px 0;padding:1px 9px;font-size:12px;border:1px dashed #f0b4b4;border-radius:11px;background:#fdf3f3;color:#a12a2a;text-decoration:line-through}.picked-removed .picked-mark{color:#a12a2a}.picked-undo{text-decoration:none;font-size:10.5px;color:#7b8798;background:#fff;border-radius:8px;padding:0 6px}.changebox{background:#f4f9ff;border:1px solid #93b4de;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px}.changebox-none{background:#f8fafc;border-color:var(--border);color:#64748b}.changetable{margin-top:6px;font-size:12.5px}.changetable td{border:none;padding:3px 8px 3px 0;vertical-align:top}.chg-k{font-weight:600;width:110px}.chg-before{color:#a12a2a;text-decoration:line-through}.chg-arrow{color:#8a97a8;width:20px}.chg-after{color:#15803d;font-weight:600}.picker-list{margin-top:6px;border:1px solid #e2e8f0;border-radius:7px;max-height:260px;overflow-y:auto}.picker-row{display:flex;align-items:center;gap:9px;padding:6px 10px;border-bottom:1px solid #f1f5f9;cursor:pointer;font-size:13px}.picker-row:last-child{border-bottom:none}.picker-row:hover{background:#f3f8ff}.picker-row.on{background:#e6f0fd}.picker-check{width:13px;color:#2563eb;font-weight:700;flex-shrink:0}.picker-name{font-weight:600;min-width:170px;flex-shrink:0}.picker-sum{color:#64748b;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-asset{color:#1f4e79;font-size:12px;flex-shrink:0}.picker-used{color:#7b8798;font-size:11.5px;background:#f1f5f9;padding:1px 7px;border-radius:9px;flex-shrink:0}.linkish{background:none;border:none;color:#2563eb;cursor:pointer;padding:4px 0;font-size:12.5px}.linkish:hover{text-decoration:underline}.guide{background:#f7faff;border:1px solid #dbe6f5;border-radius:8px;padding:12px 15px;margin-bottom:16px}.guide b{font-size:13px}.guide p{margin:6px 0 0;font-size:13px;color:#4a5768;line-height:1.7}.repostamp{margin:-10px 0 16px;font-size:12.5px;color:#5b6676;background:#f8fafc;border:1px solid var(--border);border-radius:7px;padding:7px 12px;line-height:1.7}.repostamp code{background:#eef2f7;padding:1px 6px;border-radius:4px}.modebar{display:flex;flex-wrap:wrap;gap:8px}.mode{border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 14px;font-size:13px}.mode.on{border-color:var(--accent);background:#eff6ff;color:var(--accent);font-weight:600}.mode-danger{border-color:#f0b4b4;color:#a12a2a}.mode-danger.on{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}.mode-tag{margin-left:7px;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:9px;background:#fdeaea;color:#a12a2a}button.primary.danger{background:var(--danger);border-color:var(--danger);color:#fff}button.primary.danger:hover:not(:disabled){background:#991b1b}tr.picked-row td{background:#e6f0fd}.sub-card{background:#fbfcfe;border-style:dashed;margin-top:18px}.sub-card h4{font-size:14px}.newobj-list{margin-top:12px;border:1px solid #e2e8f0;border-radius:7px}.newobj-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid #f1f5f9;font-size:13px}.newobj-item:last-child{border-bottom:none}.newobj-form{margin-top:12px;padding-top:12px;border-top:1px solid #e6ecf4}.newobj-form .row{margin-bottom:10px;align-items:center}.newobj-form input{width:100%}.newobj-help{margin:4px 0 12px;font-size:12.5px;color:#4a5768;background:#f7faff;border-left:3px solid #93b4de;padding:8px 12px;border-radius:0 6px 6px 0;line-height:1.7}.newobj-manual p{margin:8px 0 0;font-size:12.5px;line-height:1.75}.newobj-manual code{background:#0000000f;padding:1px 5px;border-radius:4px;font-size:12px}.modegroup{display:flex;align-items:flex-start;gap:10px;margin-top:8px}.modegroup-label{flex:0 0 92px;padding-top:8px;font-size:12px;font-weight:600;color:var(--muted, #6b7280)}.modegroup .modebar{flex:1 1 auto}@media(max-width:720px){.modegroup{flex-direction:column;gap:4px}.modegroup-label{padding-top:0}}