*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.main-content{display:flex;gap:1rem;padding:1rem;height:100vh}.controls-panel{width:300px;background:white;border-radius:8px;padding:1.5rem;box-shadow:0 2px 10px #0000001a;overflow-y:auto;height:calc(100vh - 2rem);flex-shrink:0}.control-group{margin-bottom:1.5rem}.control-group h2{margin-bottom:1rem;color:#333;font-size:1.2rem;font-weight:700;border-bottom:2px solid #667eea;padding-bottom:.5rem}.control-group h3{margin-bottom:.75rem;color:#555;font-size:.95rem;font-weight:600;border-bottom:1px solid #eee;padding-bottom:.4rem}.input-group{margin-bottom:.6rem;display:flex;align-items:center;gap:.75rem}.input-group label{font-weight:500;color:#666;font-size:.9rem;flex-shrink:0;min-width:60px}.input-group input{width:80px;padding:.5rem;border:1px solid #ddd;border-radius:3px;font-size:.85rem;transition:border-color .2s ease}.input-group input:focus{outline:none;border-color:#667eea}.input-group input.invalid{border-color:#ff6b6b;background-color:#fff5f5}.validation-error{display:block;color:#ff6b6b;font-size:.75rem;margin-left:.5rem;min-height:.9rem;flex-shrink:0}.checkbox-group{display:flex;align-items:center;margin-bottom:.6rem}.checkbox-group input[type=checkbox]{margin-right:.5rem;transform:scale(1.1)}.checkbox-group label{font-weight:500;color:#666;cursor:pointer;font-size:.9rem}.checkbox-group input[type=checkbox]:disabled+label{color:#bbb;cursor:not-allowed}button{width:100%;padding:.6rem;margin-bottom:.4rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:3px;font-size:.85rem;font-weight:500;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}button:active{transform:translateY(0)}button#clear-graph{background:linear-gradient(135deg,#ff6b6b 0%,#ee5a52 100%)}button#clear-graph:hover{box-shadow:0 4px 12px #ff6b6b66}.rule-display{padding:.75rem 0;font-size:.9rem;line-height:1.3}.rule-display p{margin-bottom:.3rem}.rule-display p:last-child{margin-bottom:0}#rebuild-graph{background:linear-gradient(135deg,#28a745 0%,#20c997 100%);font-weight:600;margin-top:.5rem}#rebuild-graph:hover{box-shadow:0 4px 12px #28a74566}#export-link{background:linear-gradient(135deg,#17a2b8 0%,#138496 100%);font-weight:600}#export-link:hover{box-shadow:0 4px 12px #17a2b866}.layout-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.4rem}.layout-btn{padding:.4rem;font-size:.75rem;margin-bottom:0;background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);transition:all .2s ease}.layout-btn:hover{background:linear-gradient(135deg,#5a6268 0%,#495057 100%);box-shadow:0 2px 8px #6c757d66}.layout-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 2px 8px #667eea66}.graph-container{flex:1;background:white;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden;height:calc(100vh - 2rem)}#cy{width:100%;height:100%}#cycle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:1000;cursor:pointer}@media (max-width: 768px){.main-content{flex-direction:column}.controls-panel{width:100%;height:200px;order:2;flex-shrink:0}.graph-container{order:1;height:calc(100vh - 220px);flex:1}}.node-selected{border:3px solid #ff6b6b!important}.edge-selected{line-color:#ff6b6b!important;target-arrow-color:#ff6b6b!important}.node-grey{background-color:#bbb!important;border-color:#000!important;color:#000!important;border-width:2px!important}.node-white{background-color:#fff!important;border-color:#000!important;color:#000!important;border-width:2px!important}.node-black{background-color:#000!important;border-color:transparent!important;color:#fff!important;border-width:0px!important}#cycles-list{max-height:200px;overflow-y:auto;margin-top:.5rem}.cycle-item{background:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;padding:.5rem;margin-bottom:.4rem;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;font-size:.8rem}.cycle-item:hover{background:#e9ecef;border-color:#667eea}.cycle-start{font-weight:600;color:#333;margin-bottom:.2rem}.cycle-path{color:#666;font-family:monospace;font-size:.75rem;line-height:1.3;word-break:break-all}.no-cycles{color:#888;font-style:italic;text-align:center;padding:1rem;font-size:.85rem}.display-controls{display:flex;flex-direction:column;gap:.5rem}.display-controls .checkbox-group{margin-bottom:0}.scale-controls,.transform-controls,.flip-controls{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}.scale-controls span{font-weight:500;color:#666;font-size:.9rem}.scale-controls .layout-btn,.transform-controls .layout-btn,.flip-controls .layout-btn{width:30px;height:30px;padding:0;margin-bottom:0;font-size:1rem;font-weight:700}.labels-group{display:flex;align-items:center;gap:.5rem}.labels-group span{font-weight:500;color:#666;font-size:.9rem}.labels-group .checkbox-group{margin-bottom:0}.help-link{display:inline-block;margin-left:.5rem;background:#667eea;color:#fff!important;text-decoration:none;border-radius:50%;width:20px;height:20px;text-align:center;line-height:20px;font-size:.8rem;font-weight:700}.help-link:hover{background:#5a6fd8;text-decoration:none}