.topology-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;margin-bottom:24px}.tool-panel{background:var(--gray-50);border-radius:20px;padding:20px;max-height:700px;overflow-y:auto}.tool-panel::-webkit-scrollbar{width:4px}.tool-panel::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:2px}.tool-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--gray-200)}.tool-section:last-child{border-bottom:none}.tool-section h4{font-size:0.85rem;margin-bottom:12px;color:var(--gray-700);display:flex;align-items:center;gap:8px}.node-types{display:grid;grid-template-columns:1fr 1fr;gap:8px}.node-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:white;border:1px solid var(--gray-300);border-radius:8px;cursor:pointer;font-size:0.75rem;transition:all 0.2s}.node-btn:hover{background:var(--primary-color);border-color:var(--primary-color);color:white}.node-btn i{font-size:0.9rem}.canvas-settings{display:flex;flex-direction:column;gap:8px}.setting-row{display:flex;align-items:center;gap:12px}.setting-row label{width:70px;font-size:0.75rem;color:var(--gray-600)}.setting-row input[type="color"]{width:36px;height:30px;border:1px solid var(--gray-300);border-radius:4px}.setting-select{padding:4px 8px;border:1px solid var(--gray-300);border-radius:4px;background:white}.action-buttons{display:flex;flex-wrap:wrap;gap:8px}.action-btn-primary,.action-btn-secondary,.action-btn-warning{padding:6px 14px;border:none;border-radius:8px;cursor:pointer;font-size:0.7rem;transition:all 0.2s}.action-btn-primary{background:var(--primary-color);color:white}.action-btn-primary:hover{background:var(--primary-dark)}.action-btn-secondary{background:var(--gray-200);color:var(--gray-700)}.action-btn-secondary:hover{background:var(--gray-300)}.action-btn-warning{background:#ef4444;color:white}.action-btn-warning:hover{background:#dc2626}.stats-info{display:flex;flex-direction:column;gap:4px}.stat-row{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--gray-600)}.stat-row span:last-child{font-weight:600;color:var(--gray-800)}.canvas-wrapper{background:white;border-radius:20px;border:1px solid var(--gray-200);overflow:hidden;display:flex;flex-direction:column}.canvas-container{position:relative;min-height:500px;background:#1a1a2e;cursor:default}#topologyCanvas{width:100%;height:100%;min-height:500px;display:block}.canvas-tips{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--gray-500);text-align:center;pointer-events:none}.canvas-tips i{font-size:32px;display:block;margin-bottom:8px}.canvas-tips span{font-size:0.85rem}.canvas-footer{padding:10px 16px;background:var(--gray-50);border-top:1px solid var(--gray-200);display:flex;justify-content:space-between;font-size:0.7rem;color:var(--gray-500)}.property-panel{background:white;border:1px solid var(--gray-200);border-radius:16px;padding:16px;margin-top:16px;animation:fadeIn 0.3s ease}.property-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--gray-200)}.property-header h4{font-size:0.9rem;color:var(--gray-700)}.close-btn{background:transparent;border:none;cursor:pointer;color:var(--gray-400);font-size:1rem}.close-btn:hover{color:#ef4444}.property-body{display:flex;flex-direction:column;gap:12px}.property-row{display:flex;align-items:center;gap:12px}.property-row label{width:60px;font-size:0.75rem;color:var(--gray-600)}.prop-input{flex:1;padding:6px 10px;border:1px solid var(--gray-300);border-radius:6px;font-size:0.8rem}.prop-color{width:40px;height:30px;border:1px solid var(--gray-300);border-radius:4px}.prop-save-btn,.prop-delete-btn{padding:8px;border:none;border-radius:8px;cursor:pointer;font-size:0.8rem}.prop-save-btn{background:var(--primary-color);color:white}.prop-delete-btn{background:#ef4444;color:white}.quick-examples{margin-bottom:24px}.example-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.example-btn{background:var(--gray-100);border:1px solid var(--gray-300);padding:8px 20px;border-radius:40px;cursor:pointer;font-size:0.85rem;transition:all 0.2s}.example-btn:hover{background:var(--primary-color);color:white}.knowledge-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-top:20px}.knowledge-card{background:var(--gray-50);border-radius:16px;padding:20px;text-align:center}.knowledge-card i{font-size:28px;color:var(--primary-color);margin-bottom:12px}.knowledge-card h4{font-size:0.85rem;margin-bottom:8px}.knowledge-card p{font-size:0.75rem;color:var(--gray-500);line-height:1.5}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:900px){.topology-layout{grid-template-columns:1fr}.tool-panel{max-height:none}.knowledge-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:600px){.node-types{grid-template-columns:1fr 1fr}.knowledge-grid{grid-template-columns:1fr}}